Black Friday 2024: 25+ Ways to Save on Online Learning

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Scrimba

Learn HTML and CSS

via Scrimba

Go to class Write review

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!

Reviews

5.0 rating, based on 3 Class Central reviews

Start your review of Learn HTML and CSS

  • Edina Erdelyiova
    I´m doing the Frontend Career Path and after I´ve tried a lot of different courses, this one is really unique - with the ability to jump straight into the videos and do some coding, try out any ideas an see what will happen.

    It keeps me engaged with the little exercises as well as bigger projects and I love Per´s lecturing style, he always sounds so enthusiastic :-D I felt like I was wasting money with other courses, but not with this one, it is superb :)
  • Anonymous
    I am almost done with the course, and this is the best learning tool that I have found. I was hesitant at first to spend any money on a program, but I am so happy that I did. The free course alone is incredible, but signing up for pro really allowed me to test my abilites that I was learning. It really helps to guide you while helping you learn on your own in baby steps that aren't too overwhelming. All of the instructors do a wonderful job!
  • Anonymous
    Scrimba's Learn HTML and CSS was amazing. I love how Per breaks down the concepts and allows us to practice the concept he taught previously and then proceeds to show his solution. I enjoy the teaching/practice structure of Scrimba.

    I 100% recommend it!
Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.