Learn HTML & CSS – Full Course for Beginners

Embark on a comprehensive 5-hour journey to master HTML and CSS from the ground up. Build 6 practical projects, including a Google clone, digital business card, space exploration site, and birthday gift site, while tackling over 80 coding challenges. Gain hands-on experience with essential web development tools like Netlify, VS Code, GitHub Desktop, Figma, and more. Learn crucial concepts such as HTML tags, document structure, CSS styling, flexbox, responsive design, and deployment techniques. By the end of this course, create and publish your own hometown homepage as a solo project, solidifying your newfound web development skills.

Introduction
1: Welcome to the HTML & CSS Course
2: HTML Tags
3: Write a news article
4: The image tag
5: Nesting
6: Internet superpowers - Change the BBC news!
7: Interactive elements - Button
8: Interactive elements - input tags -- Experiment with input types 100%
9: Let’s build Google!
10: Aside - Anchor tags
11: Add an anchor tag to Google.com
12: Proper document structure
13: Aside: Lists
14: Build a personal Website
15: Deploy your Personal Website
16: HTML Recap
1: Let’s learn CSS!
2: Write your first lines of CSS!
3: Write your first lines of CSS! Solution
4: Let’s destroy wikipedia - recording
5: Link to the CSS file
6: Set the width of the elements
7: Inline vs block elements
8: Margin top
9: Divs rule the world
10: CSS classes
11: Aside - Learn margins via flags
12: Add space between our elements
13: Aside - Centering with margins
14: Centering our content
15: Aside - padding
16: Aside - Border and border-radius
17: Aside challenge - style Twitter button
18: Fix the input field
19: Center the button
20: Style the button
21: Why we can’t have two block-level buttons
22: Aside - Flexbox
23: Centering both buttons with flexbox
24: Google clone recap
1: Building your digital business card
2: Fix the image path
3: Add alt attribute
4: Make image smaller
5: Add a border and padding
6: Aside - flexbox child containers
7: Flex item containers
8: Add a utility class
9: Justify the items
10: Center the card
11: Aside - inheritance
12: Center the text via inheritance
13: Add colors
14: Web-safe fonts
15: Aside - margin/padding shorthand
16: Use the margin & padding shorhands
17: Deploy your Digital Business Card
18: Business Card Recap
1: Let’s go to space
2: Add a background image from unsplash
3: Center elements and Style button
4: Add a Google font
5: @font-face
6: Aside - spans
7: Add an underline using a span
8: Use an ID for the logo
9: Replace the jpg with a webp
10: Choose a color palette from an image
11: Add the terms & conditions section
12: Aside - text shadow
13: Improving the readability with text shadows
14: Space - Exploration recap
1: Let’s build a Birthday GIFt site
2: Add basic header styling
3: Set the colors
4: Add shadow on text
5: We have a problem that flexbox can fix
6: Aside - align-items
7: Aside - flex-direction
8: Turn the header into a flexbox
9: Fix date and age design
10: Create the first gift
11: Replace the img with a div
12: Aside - make elements change on hover
13: Add the hover effect
14: Create the next GIFt
15: Create two more GIFts
16: Create the final GIFt
17: Add the footer
18: Add a background gradient
19: Personalize the Birthday GIFt Site
20: Use GitHub Desktop to publish your Birthday GIFt Site
21: Deploying your Birthday GIFt Site
22: Use VS Code to edit your Birthday GIFt
23: GIFt site recap
1: It’s time to go solo!
2: Solo Project - Hometown Homepage
3: Congrats on completing the course!