Full Stack Java Course Series for Beginners - Learn HTML, CSS and Bootstrap by building an App

This course makes it possible for beginners to find out if they can become a developer or not.

'resources.zip' file - https://github.com/simplacademy/fsd/raw/master/resources.zip

Course link - https://www.udemy.com/course/fullstackpart1

**** Free Coupons and Discount Coupons ****
Each month has limited # of FREE COUPONS.
If FREE COUPONS not available get it at a discounted price. Find instruction below.

** FREE coupon format - MMMYYNOCOST
MMM - First 3 characters of current month. Example, August - AUG.
YY - Last two digits of the current year. Example, 2024 - 24.
September 2022 - SEP22NOCOST.

** Discount Coupon format - MMMYYDISCOUNT
September 2022 - Coupon code is SEP22NOCOST.

Topics
Introduction
00:00 - Full Stack
05:23 - Learning Environment
06:15 - Install Chrome
07:50 - Download VS Code
09:14 - Install VS Code - win
11:03 - Install VS Code - mac
13:13 - Quick Launch VS Code
15:48 - Install Live Server Extension
17:22 - Patisserie - Our Story
18:13 - Folder Structure
18:51 - Open folder in VS Code
20:39 - 'learn' folder
21:39 - 'html' folder
HTML
22:18 - HTML file
23:01 - DOCTYPE
24:23 - DOCTYPE Explained
25:24 - html tag
26:24 - html tag explained
27:25 - body and heading
29:40 - Launch web page
31:01 - Styling limitations
31:43 - body explained
32:18 - head explained
33:51 - HTML
34:55 - Title
35:34 - Title in French
36:37 - title tag
38:29 - View title
39:40 - meta tag with charset
41:02 - Save file using shortcut
41:53 - head, title, meta explained
43:02 - Title explained
44:03 - HTML Attributes explained
45:01 - Favicon
45:37 - Download 'resources.zip'
46:11 - Copy 'resources.zip'
46:50 - Place 'resources.zip'
47:50 - Extract 'resources.zip'
48:38 - Verify 'resources'
49:49 - Favicon image
51:12 - Copy favicon image file
52:14 - Delete 'resources.zip'
53:07 - Link tag for favicon
55:15 - Live Server extn.
56:29 - Favicon link tag
57:20 - Paris street image
58:22 - Images and Copyrights
59:30 - img tag
01:00:53 - Screen Reader
01:01:34 - 'alt' attribute
01:02:37 - Include text
01:04:01 - Align Element
01:05:56 - Border
01:06:48 - Analyze layout
01:08:12 - Limitations of HTML Layout
01:09:14 - Analogy for div tag
01:10:47 - div tag for navbar
01:11:57 - Clean up the styles
01:13:10 - Navbar tags using emmet
01:14:48 - Intellisense
01:15:49 - Nav content
01:16:44 - View nav elements
01:17:28 - div to nav
01:18:49 - Enclosing div for home page
01:19:39 - Command Palette
01:20:38 - VS Code commands
01:21:31 - Command Palette
01:22:50 - Execute with Command Palette
01:24:00 - Outer div using Command Palette
01:26:06 - Book cover image
01:26:54 - Bottom part of Our Story web page
CSS
01:28:39 - Create 'css' folder
01:29:18 - HTML file
01:30:18 - Include HTML tags
01:31:03 - 'style' attribute
01:31:53 - Styles for multiple tags
01:32:43 - Multiple h2 tags
01:33:51 - Create 'css' file
01:34:25 - Define external styles
01:35:20 - Link HTML and styles
01:36:20 - Styles for all h2 tags
01:36:53 - External CSS
01:37:52 - Class Selector
01:38:40 - Class Selector explained
01:39:44 - HTML file for CSS styling
01:41:08 - Applying Font Color
01:41:49 - VS Code and Browser adjacent
01:43:22 - Background Color
01:44:17 - Padding
01:45:12 - Border
01:46:00 - Margin
01:46:31 - Box Model
01:47:44 - Box Model on specific sides
01:48:38 - Text Alignment
01:49:12 - Fonts
01:50:25 - Google Fonts
01:51:40 - Apply Font
01:52:27 - @import
01:53:48 - Bold
01:54:28 - Font Size
01:54:54 - Width and Height
01:56:22 - Layout Demo
01:57:09 - 'layout.html' and styles
01:59:07 - Flex
01:59:43 - CSS Conclusion
Bootstrap
02:00:28 - Folder and File
02:01:39 - Developer Tools
02:02:05 - Emulate devices
02:02:49 - Browser scales desktop content to mobile
02:04:27 - Viewport
02:06:36 - Bootstrap
02:07:22 - Bootstrap files
02:08:09 - Bootstrap CSS and JS file walkthrough
02:09:33 - Bootstrap in HTML
02:11:40 - Bootstrap styles in dev tools
Styling Our Story web page with Bootstrap
02:12:36 - Copy HTML file
02:13:46 - Bootstrap
02:14:45 - Heading
02:15:37 - Font Color
02:16:39 - Styles customization
02:17:24 - Heading
02:18:09 - container
02:18:54 - container explained
02:19:39 - div layout
02:20:28 - Outer div
02:21:20 - Inner div
02:22:02 - Indent div tag content
02:23:09 - 'row' and 'col'
02:24:11 - 'row' explained
02:24:53 - Grid files
02:25:59 - Grid - HTML and CSS
02:26:52 - Grid - 12 columns
02:28:28 - Column width - 'col'
02:29:33 - 'col' class definition
02:30:50 - Responsive
02:23:24 - Center align image
02:34:02 - Image height
02:35:23 - Text color
02:35:56 - Center Text
02:36:44 - Vertical align
02:37:57 - Font
02:39:20 - 'nav' classes
02:40:54 - 'nav' explained
02:42:07 - nav Customization
02:44:08 - nav styles
02:45:00 - Mobile and Tablet View
02:45:52 - Mobile layout
02:47:01 - Verify desktop layout
02:52:27 - Device classification
02:53:09 - Bootstrap device example
02:54:06 - Mobile layout
02:55:08 - Tablet layout
02:56:12 - Desktop layout
02:57:51 - Make Our Story layout work for Mobile, Tablet and Desktop