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

‘resources.zip’ file –

Course link –

**** 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