Learn HTML & CSS – Full Course for Beginners

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!