Learn HTML & CSS – Full Course for Beginners

By freeCodeCamp.org
Published: Sep 14, 2022

“
Learn HTML and CSS from scratch by building 6 projects and solving 80+ coding challenges. Go here for the interactive browser version: https://scrimba.com/links/htmlandcss

Code
• Interactive version: https://scrimba.com/links/htmlandcss
• GitHub repo: https://github.com/scrimba/learn-html…

This course was created by Per Harald Borgen, the co-founder and CEO of Scrimba. You can follow Per on Twitter here: https://twitter.com/perborgen.

Tools used:
• Netlify: https://www.netlify.com/
• VS Code: https://code.visualstudio.com/
• GitHub Desktop: https://desktop.github.com/
• Figma: https://www.figma.com/
• Coolors: https://coolors.co/
• Google Fonts: https://fonts.google.com/
• 1001 Fonts: https://www.1001fonts.com/

Contents
• 0:00:00 Introduction

Build and deploy your first website
• 0:01:32 1: Welcome to the HTML & CSS Course
• 0:04:12 2: HTML Tags
• 0:07:33 3: Write a news article
• 0:09:43 4: The image tag
• 0:14:43 5: Nesting
• 0:17:33 6: Internet superpowers – Change the BBC news!
• 0:22:34 7: Interactive elements – Button
• 0:24:37 8: Interactive elements – input tags — Experiment with input types 100%
• 0:29:37 9: Let’s build Google!
• 0:33:28 10: Aside – Anchor tags
• 0:38:04 11: Add an anchor tag to Google.com
• 0:39:43 12: Proper document structure
• 0:45:29 13: Aside: Lists
• 0:49:27 14: Build a personal Website
• 0:58:15 15: Deploy your Personal Website
• 1:01:30 16: HTML Recap

Build a Google.com clone
• 1:03:06 1: Let’s learn CSS!
• 1:03:53 2: Write your first lines of CSS!
• 1:08:10 3: Write your first lines of CSS! Solution
• 1:11:46 4: Let’s destroy wikipedia – recording
• 1:13:43 5: Link to the CSS file
• 1:16:22 6: Set the width of the elements
• 1:18:31 7: Inline vs block elements
• 1:20:49 8: Margin top
• 1:22:05 9: Divs rule the world
• 1:24:10 10: CSS classes
• 1:28:07 11: Aside – Learn margins via flags
• 1:34:04 12: Add space between our elements
• 1:35:12 13: Aside – Centering with margins
• 1:38:39 14: Centering our content
• 1:40:01 15: Aside – padding
• 1:45:23 16: Aside – Border and border-radius
• 1:50:33 17: Aside challenge – style Twitter button
• 1:55:36 18: Fix the input field
• 2:00:22 19: Center the button
• 2:02:42 20: Style the button
• 2:07:13 21: Why we can’t have two block-level buttons
• 2:11:42 22: Aside – Flexbox
• 2:15:25 23: Centering both buttons with flexbox
• 2:18:20 24: Google clone recap

Build a Digital Business Card
• 2:20:27 1: Building your digital business card
• 2:21:00 2: Fix the image path
• 2:23:56 3: Add alt attribute
• 2:28:24 4: Make the image smaller
• 2:29:40 5: Add a border and padding
• 2:33:30 6: Aside – flexbox child containers
• 2:37:11 7: Flex item containers
• 2:38:51 8: Add a utility class
• 2:42:04 9: Justify the items
• 2:44:13 10: Center the card
• 2:46:13 11: Aside – inheritance
• 2:50:31 12: Center the text via inheritance
• 2:53:32 13: Add colors
• 2:56:57 14: Web-safe fonts
• 3:02:06 15: Aside – margin/padding shorthand
• 3:06:09 16: Use the margin & padding shorthands
• 3:07:26 17: Deploy your Digital Business Card
• 3:12:16 18: Business Card Recap

Build a Space Exploration Site
• 3:14:17 1: Let’s go to space
• 3:14:54 2: Add a background image from Unsplash
• 3:18:54 3: Center elements and Style button
• 3:22:12 4: Add a Google font
• 3:26:34 5: @font-face
• 3:28:39 6: Aside – spans
• 3:32:37 7: Add an underline using a span
• 3:34:27 8: Use an ID for the logo
• 3:38:51 9: Replace the jpg with a webp
• 3:41:25 10: Choose a color palette from an image
• 3:44:18 11: Add the terms & conditions section
• 3:48:17 12: Aside – text shadow
• 3:54:17 13: Improving the readability with text shadows
• 3:56:17 14: Space – Exploration recap

Build a Birthday GIFt Site
• 3:58:02 1: Let’s build a Birthday GIFt site
• 3:59:13 2: Add basic header styling
• 4:02:47 3: Set the colors
• 4:04:13 4: Add shadow on text
• 4:07:34 5: We have a problem that flexbox can fix
• 4:10:10 6: Aside – align-items
• 4:16:13 7: Aside – flex-direction
• 4:20:42 8: Turn the header into a flexbox
• 4:22:26 9: Fix date and age design
• 4:26:36 10: Create the first gift
• 4:31:56 11: Replace the img with a div
• 4:36:14 12: Aside – make elements change on hover
• 4:39:08 13: Add the hover effect
• 4:41:17 14: Create the next GIFt
• 4:45:39 15: Create two more GIFts
• 4:48:15 16: Create the final GIFt
• 4:51:38 17: Add the footer
• 4:55:18 18: Add a background gradient
• 4:58:46 19: Personalize the Birthday GIFt Site
• 5:00:25 20: Use GitHub Desktop to publish your Birthday GIFt Site
• 5:05:44 21: Deploying your Birthday GIFt Site
• 5:06:45 22: Use VS Code to edit your Birthday GIFt
• 5:11:36 23: GIFt site recap

Solo Project: Hometown Homepage
• 5:13:29 1: It’s time to go solo!
• 5:15:47 2: Solo Project – Hometown Homepage
• 5:19:54 3: Congrats on completing the course!

[READ MORE]

”