2024 UPDATED - HTML5 Elements & CSS3 Properties Bootcamp, V2

Focused View

17:19:51

0 View

1. Introduction

1.1 Entire Bootcamp Resource Files.zip

1. Welcome.mp4

03:54

2. Who this Bootcamp is for.mp4

01:01

3. How to Make the Best of This Bootcamp.mp4

04:21

4. What You Should Expect After Completing This Bootcamp.mp4

01:30

5.1 Legacy Version - V1.txt

5. How to Access the Legacy Version (V1) of this Bootcamp.mp4

02:09

6. How to Get Help.mp4

01:51

7. Lets Get Started.mp4

00:31

2. Getting Started with Web Development

1. Section Overview.mp4

02:39

2. HTML.mp4

04:28

3. CSS.mp4

07:16

4. JavaScript.mp4

03:40

3. Getting Up and Running

1. Browser.mp4

00:34

2. Visual Studio Code.mp4

02:15

3. Visual Studio Code Settings.mp4

03:51

4.1 Prettier Settings.txt

4. Visual Studio Code Extensions.mp4

05:17

4. Practical HTML Preliminary Level

1.1 html-preliminary-level.zip

1. Section Overview.mp4

01:10

2. How to Open a Folder with VS Code.mp4

01:21

3. How to Create an HTML File with VS Code.mp4

02:37

4. How to Create Your First Webpage.mp4

03:54

5. Understanding the HTML Metadata.mp4

01:35

6. Anatomy of an HTML Element.mp4

02:37

7. HTML.mp4

02:33

8. Head.mp4

03:09

9. Style.mp4

02:36

10. HTML Body.mp4

03:54

11. HTML Heading.mp4

05:50

12. Practice 1 Lets Create some Comments.mp4

02:01

13. HTML Attributes.mp4

02:43

14. Practice 2 Attributing Classes & IDs.mp4

04:54

15. HTML Paragraph.mp4

03:28

16. Practice 3 Writing Text.mp4

01:47

17. HTML Link.mp4

03:50

18. Practice 4 Redirecting Viewers.mp4

02:45

19. HTML Semantic Elements.mp4

06:35

20. Practice 5 Lets Build up some Good Habits.mp4

03:48

5. Practical HTML Intermediate Level

1.1 html-intermediate-level.zip

1. Section Overview.mp4

01:48

2. HTML Image.mp4

05:10

3. HTML Figure.mp4

04:42

4. HTML Figcaption.mp4

03:45

5. Practice 6 Captioning an Image.mp4

02:23

6. HTML Video.mp4

01:57

7. HTML Audio.mp4

00:45

8. HTML Ordered List.mp4

06:58

9. Practice 7 Steps to Learn Frontend Web Development.mp4

02:19

10. HTML Unordered List.mp4

01:25

11. Practice 8 Creating a Shopping List.mp4

01:36

12. HTML Description List.mp4

02:00

13. Practice 9 Animals Diet.mp4

01:23

14. HTML Table.mp4

04:45

15. Practice 10 Endangered Animals Database.mp4

03:18

16. HTML Icons.mp4

07:55

17. HTML Block Quotation.mp4

01:57

18. HTML Header.mp4

00:45

19. HTML Nav.mp4

01:58

20. Practice 11 Creating a Navigation.mp4

01:29

21. HTML Main.mp4

01:31

22. HTML Section.mp4

02:53

6. Practical HTML Advanced Level

1.1 html-advanced-level.zip

1. Section Overview.mp4

02:03

2. HTML Article.mp4

00:42

3. HTML Aside.mp4

00:57

4. HTML Abbreviation.mp4

01:29

5. HTML Span.mp4

01:50

6. HTML Div.mp4

01:25

7. HTML iFrame.mp4

02:33

8. HTML Picture.mp4

07:41

9. HTML Script.mp4

01:19

10. HTML Details.mp4

01:05

11. HTML Footer.mp4

01:23

12. HTML Forms Part 1 Input Types.mp4

08:33

13. HTML Forms Part 2 More Input Types.mp4

10:11

14. HTML Forms Part 3 Fieldsets and Legends.mp4

04:53

15. HTML Container VS. Contained.mp4

02:58

16. HTML Block VS. Inline.mp4

06:22

17. Practice 12 Lets Build a Mini-Project.mp4

16:42

7. Using AI to Generate HTML

1.1 Using-AI-to-Generate-HTML.zip

1. Section Overview.mp4

01:35

2. Generating the HTML5 Boilerplate - ChatGPT vs. Gemini.mp4

08:51

3. Generating HTML Headings - ChatGPT vs. Gemini.mp4

03:07

4. Generating HTML Lists - ChatGPT vs. Gemini.mp4

06:38

5. Generating HTML Figure Caption - ChatGPT vs. Gemini.mp4

03:59

6. Generating HTML Semantic Elements - ChatGPT vs. Gemini.mp4

08:54

7. Generating Form Inputs - ChatGPT vs. Gemini.mp4

09:13

8. Generating HTML Tables - ChatGPT vs. Gemini.mp4

06:52

8. Practical CSS Preliminary Level

1.1 Practical-CSS-Preliminary-Level.zip

1. Section Overview.mp4

02:50

2. How to Link CSS to HTML.mp4

09:11

3. Anatomy of a CSS Ruleset.mp4

03:24

4. Browser Default Styles.mp4

10:37

5. CSS Basic Selectors.mp4

13:11

6. CSS Colors.mp4

04:58

7. CSS Background Images.mp4

10:26

8. CSS Absolute Length Units.mp4

06:15

9. CSS Height and Width.mp4

04:17

10. CSS Padding.mp4

06:32

11. CSS Border.mp4

05:11

12. CSS Border Radius.mp4

11:34

13. CSS Margin.mp4

06:01

14. CSS Box Model.mp4

02:18

15. CSS Box Sizing.mp4

12:56

16. Practice 13 Styling a Text.mp4

10:13

17. Practice 14 Styling a Link.mp4

02:24

18. CSS Tree-Structural Pseudo-Classes.mp4

14:04

19. CSS User Action Pseudo-Classes.mp4

07:51

20. CSS Location Pseudo-Classes.mp4

02:55

21. CSS Input Pseudo-Classes.mp4

13:02

22. CSS Positioned Layout Static & Fixed.mp4

04:48

23. CSS Positioned Layout Top & Bottom.mp4

02:55

24. CSS Positioned Layout Left & Right.mp4

02:05

25. CSS Positioned Layout Relative & Sticky.mp4

05:02

26. CSS Positioned Layout Absolute.mp4

04:30

27. CSS Pseudo-Elements.mp4

10:38

28. CSS Combinators.mp4

13:11

29. Practice 15 Styling a Table.mp4

09:17

30. CSS Specificity.mp4

12:48

31. CSS Display Inline.mp4

02:29

32. CSS Display Block.mp4

02:50

33. CSS Display Inline-Block.mp4

02:21

34. CSS Display Flex.mp4

05:14

35. CSS Display Grid.mp4

02:47

36. Practice 16 Styling a Navigation.mp4

05:06

37. Practice 17 Creating a Gallery.mp4

05:51

9. Practical CSS Intermediate Level

1.1 Practical-CSS-Intermediate-Level.zip

1. Section Overview.mp4

01:29

2. CSS Opacity.mp4

05:10

3. CSS Box Shadow.mp4

07:30

4. CSS Text Shadow.mp4

03:06

5. CSS Linear Gradient.mp4

06:34

6. CSS Radial Gradient.mp4

02:50

7. CSS Repeating Gradient.mp4

05:17

8. CSS Transitions.mp4

07:13

9. CSS Transforms.mp4

06:15

10. CSS Transform Origin.mp4

03:55

11. Practice 18 Animating a Link.mp4

07:19

12. Practice 19 Styling an Overlay.mp4

07:36

13. Practice 20 Showing Text on Hover.mp4

09:00

14. CSS Animations Part 1.mp4

06:08

15. CSS Animations Part 2.mp4

05:43

16. CSS Animations Part 3.mp4

11:05

17. CSS Object Position.mp4

01:50

18. CSS Object Fit.mp4

04:04

19. CSS background Blend Mode.mp4

03:01

20. CSS Mix Blend Mode.mp4

04:27

21. CSS Filters Part 1.mp4

06:16

22. CSS Filters Part 2.mp4

04:04

23. CSS Backdrop Filters.mp4

04:53

24. CSS Clip Path.mp4

06:57

25. CSS Multi-Column Layout Part 1.mp4

05:09

26. CSS Multi-Column Layout Part 2.mp4

02:04

27. CSS Multi-Column Layout Part 3.mp4

02:00

28. CSS Z-Index.mp4

03:22

29. CSS Overflow.mp4

04:52

30. Practice 21 Changing Transform Origin.mp4

05:52

31. Practice 22 Styling a Form.mp4

16:39

32. Practice 23 Styling a CSS-Only Hamburger Menu.mp4

08:26

33. Practice 24 Styling an on-off Button.mp4

06:43

34. Practice 25 Styling a Text Cut-out.mp4

01:20

35. Practice 26 Styling a Modal.mp4

06:31

36. Practice 27 Building a Responsive Multi-Column Layout.mp4

03:45

10. Practical CSS Advanced Level

1.1 Practical-CSS-Advanced-Level.zip

1. Section Overview.mp4

01:52

2. CSS Flexbox Introduction.mp4

05:02

3. CSS Flexbox Direction.mp4

04:23

4. CSS Flexbox Wrap.mp4

01:19

5. CSS Flexbox Flow.mp4

00:45

6. CSS Flexbox Justify Content.mp4

04:39

7. CSS Flexbox Align Items.mp4

05:05

8. CSS Flexbox Align Content.mp4

03:26

9. CSS Flexbox Gap.mp4

02:47

10. CSS Flexbox Order.mp4

04:49

11. CSS Flexbox Grow.mp4

04:23

12. CSS Flexbox Shrink.mp4

05:58

13. CSS Flexbox Basis.mp4

02:12

14. CSS Flexbox Align Self.mp4

01:39

15. CSS Grid Introduction.mp4

04:29

16. CSS Grid Columns and Rows.mp4

07:15

17. CSS Grid Area and Gap.mp4

07:04

18. CSS Grid Justify, Align and Place Items.mp4

04:39

19. CSS Grid Justify, Align and Place Content.mp4

04:09

20. CSS Grid Justify, Align and Place Self.mp4

02:44

21. CSS Spanning Grid Items.mp4

03:26

22. CSS Relocating Grid Items.mp4

05:11

23. CSS Relative Units ch.mp4

03:42

24. CSS Relative Units ex.mp4

01:17

25. CSS Relative Units em.mp4

07:20

26. CSS Relative Units rem.mp4

06:29

27. CSS Relative Units vh.mp4

02:30

28. CSS Relative Units vw.mp4

02:53

29. CSS Relative Units vmin.mp4

02:54

30. CSS Relative Units vmax.mp4

02:00

31. CSS Relative Units Percentage.mp4

01:41

32. CSS Min-Width and Max-Width.mp4

05:55

33. CSS Min-Height and Max-Height.mp4

04:24

34. CSS Media Queries Part 1.mp4

10:23

35. CSS Media Queries Part 2.mp4

06:36

36. CSS Media Queries Part 3.mp4

11:03

37. Practice 28 How to Choose Breakpoints Part 1.mp4

21:33

38. Practice 29 How to Choose Breakpoints Part 2.mp4

12:02

39. Practice 30 Mobile First Responsive Design HTML.mp4

12:16

40. Practice 31 Mobile First Responsive Design CSS.mp4

21:01

41. Practice 32 Mobile First Responsive Design Final Steps.mp4

14:17

11. Using AI to Style HTML

1. Section Overview.mp4

01:53

2. Styling HTML Headings - ChatGPT vs. Gemini.mp4

04:52

3. Styling HTML Lists - ChatGPT vs. Gemini.mp4

12:29

4. Styling HTML Tables - ChatGPT vs. Gemini.mp4

12:59

5. Styling an HTML Form - ChatGPT vs. Gemini.mp4

08:21

6. Creating a Landing Page - ChatGPT vs. Gemini.mp4

13:46

12. Congratulations

1. Wrap up + Next Steps.mp4

05:11

Description

Learn HTML5 - CSS3 from the Ground up through Examples and Practice Activities - Leverage AI to Write Better Code

What You'll Learn?

Taking a Deep Look at the Building Blocks of the Web
Understanding What HTML and CSS are and Why and Where They are Used
Understanding the Web Development Process
Chapters Outlining Different Skill Levels for HTML and CSS Best Suited to Each and Every Student
Learning Latest Versions of HTML (HTML5) and CSS (CSS3)
Learning Practical HTML Elements and CSS Properties
Learning Unique HTML Elements
Leveraging AI to Generate HTML
Understanding CSS Syntax
Learning Modern CSS Properties
Learning CSS Flexbox
Learning CSS Grid
Leveraging AI to Style HTML

Who is this for?

Anyone Who is Interested in Learning Front-end Web Development can take This Course Regardless of Their Skill Level

Absolute Beginners

Intermediate Level Frontend Web Developers

Advanced Level Frontend Web Developers

What You Need to Know?

No Previous Knowledge of HTML or CSS is Needed

Being Interested in Learning Web Development

Have a PC + Internet Connection and Leave the Rest to Me :)

More details

Description
Why Choose This Course?
This is the most comprehensive course on the Practical aspects of HTML and CSS. In this course you will learn the web development process and how HTML & CSS fit into the picture. This course will make you a wizard of HTML and CSS, therefore you will be able to write HTML and CSS comfortably and quickly. All the new and modern features of HTML and CSS are included and you will have tens examples and practice activities along the way. By enrolling in this course, you will have an amazing and unique experience of learning all the nuts and bolts of how HTML and CSS work in a real world context.
How Is This Course Different?
This Course builds concepts in a harmonious and easy to understand way specific to anyone who is interested in web development. The examples and practice activities will make sure you truly learn everything presented in the Bootcamp.
One Last Thing to Keep in Mind
This course is NOT going to be a static course. I will definitely update it regularly for fresh content.
So, what are you waiting for? Letâ€™s start this epic journey together by ENROLLING IN THIS COURSE RIGHT NOW!
Who this course is for:
Anyone Who is Interested in Learning Front-end Web Development can take This Course Regardless of Their Skill Level
Absolute Beginners
Intermediate Level Frontend Web Developers
Advanced Level Frontend Web Developers

User Reviews

Rating

average 0

Total votes0

Focused display

CSS

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.