Learn HTML and CSS

Offered By: Scrimba

Course Description

Overview

This course will teach you HTML and CSS through building and deploying five awesome projects. It is also fully interactive, with over 75 coding challenges. There are no prerequisites, so it is suitable for absolute beginners.

What is HTML and CSS?
Text elements
Anchor tags
Interactive elements
Divs and spans
Attributes
Nesting
Lists
Images
CSS basics
Classes and Ids
Inline vs block
Centering elements
Borders
The box model
Margin & padding
Inheritance
Basic flexbox
Designing your page
Text shadows
Background images
Google Fonts
Color palettes
Gradients
Web dev basics
Dev Tools
How to Google
Using GitHub
Deployment
Using Figma

Syllabus

Build & Deploy Your First Website

1. Welcome to the HTML & CSS course!
2. HTML tags
3. Write a news article!
4. Aside: The tag
5. Aside: Nesting
6. Internet superpowers -> Change the BBC news!
7. Aside: Buttons
8. Aside: Input tags
9. Let's build Google!
10. Aside: Anchor tags
11. Add an anchor tag to Google.com
12. Aside: Proper document structure
13. Aside: Lists
14. Build a Personal Website
15. Deploy your Personal Website
16. HTML Recap

Build a Google.com clone

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
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
25. It's time for you to build a Solo Project
26. Solo Project (PRO) - The Daily Dribble Newsletter

Build a Digital Business Card

1. Building your digital business card
2. Fix the image path
3. More on Relative Paths
4. Add alt attribute
5. Make image smaller
6. Add a border and padding
7. Aside: flexbox child containers
8. Flex item containers
9. Add a utility class
10. Justify the items
11. Center the card
12. Aside: inheritance
13. Center the text via inheritance
14. Add colors
15. Web-safe fonts
16. Aside: margin/padding shorthand
17. Use the margin&padding shorthands
18. Make it your own!
19. Deploy your Digital Business Card
20. Business Card recap
21. Solo Project (PRO) - Amazon Product Page

Build a Space Exploration Site

1. Let's go to space!
2. Add a background image from unsplash
3. Center elements and style button
4. Aside: Google Fonts
5. Aside: @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
15. Solo Project (PRO) - Web Agency Hero

Build a Birthday GIFt Site

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 Site
23. GIFt site recap

Solo Project: Hometown Homepage

1. It's time to go solo!
2. Solo Project: Hometown Homepage
3. Get a code review!
4. Code Review by Guil Hernandez
5. Congrats on completing the course!

Learn HTML and CSS

Tags

Course Description

Overview

Syllabus

Related Courses