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 ⭐️
Two versions:
ð??? Interactive version: https://scrimba.com/links/htmlandcss
ð??? GitHub repo: https://github.com/scrimba/learn-html-and-css

�️ 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 in the course:
ð??? 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/

⭐️ Course Contents ⭐️
�️ (0:00:00) Introduction
�️ (0:01:37) Welcome to the HTML & CSS Course
�️ (0:04:28) HTML Tags
�️ (0:08:03) Write a news article
�️ (0:10:22) The image tag
�️ (0:15:43) Nesting
â?¨ï¸ (0:18:45) Internet superpowers – Change the BBC news!
â?¨ï¸ (0:24:07) Interactive elements – Button
â?¨ï¸ (0:26:19) Interactive elements – input tags — Experiment with input types 100%
â?¨ï¸ (0:31:40) Letâ??s build Google!
â?¨ï¸ (0:35:47) Aside – Anchor tags
�️ (0:40:42) Add an anchor tag to Google.com
�️ (0:42:28) Proper document structure
�️ (0:48:38) Aside: Lists
�️ (0:52:53) Build a personal Website
�️ (1:02:18) Deploy your Personal Website
�️ (1:05:46) HTML Recap

Build a Google.com clone
â?¨ï¸ (1:07:29) Letâ??s learn CSS!
�️ (1:08:19) Write your first lines of CSS!
�️ (1:12:54) Write your first lines of CSS! Solution
â?¨ï¸ (1:16:45) Letâ??s destroy wikipedia – recording
�️ (1:18:51) Link to the CSS file
�️ (1:21:41) Set the width of the elements
�️ (1:23:59) Inline vs block elements
�️ (1:26:26) Margin top
�️ (1:27:48) Divs rule the world
�️ (1:30:01) CSS classes
â?¨ï¸ (1:34:15) Aside – Learn margins via flags
�️ (1:40:37) Add space between our elements
â?¨ï¸ (1:41:50) Aside – Centering with margins
�️ (1:45:31) Centering our content
â?¨ï¸ (1:47:00) Aside – padding
â?¨ï¸ (1:52:43) Aside – Border and border-radius
â?¨ï¸ (1:58:15) Aside challenge – style Twitter button
�️ (2:03:39) Fix the input field
�️ (2:08:46) Center the button
�️ (2:11:15) Style the button
â?¨ï¸ (2:16:05) Why we canâ??t have two block-level buttons
â?¨ï¸ (2:20:53) Aside – Flexbox
�️ (2:24:51) Centering both buttons with flexbox
�️ (2:28:00) Google clone recap

Build a Digital Business Card
�️ (2:30:15) Building your digital business card
�️ (2:30:50) Fix the image path
�️ (2:33:58) Add alt attribute
�️ (2:38:45)2 Make image smaller
�️ (2:40:06) Add a border and padding
â?¨ï¸ (2:44:12) Aside – flexbox child containers
�️ (2:48:09) Flex item containers
�️ (2:49:56) Add a utility class
�️ (2:53:22) Justify the items
�️ (2:55:41) Center the card
â?¨ï¸ (2:57:48) Aside – inheritance
�️ (3:02:24) Center the text via inheritance
�️ (3:05:38) Add colors
�️ (3:09:17) Web-safe fonts
â?¨ï¸ (3:14:48) Aside – margin/padding shorthand
�️ (3:19:09) Use the margin & padding shorthands
�️ (3:20:30) Deploy your Digital Business Card
�️ (3:25:41) Business Card Recap

Build a Space Exploration Site
â?¨ï¸ (3:27:50) Letâ??s go to space
�️ (3:28:30) Add a background image from unsplash
�️ (3:32:46) Center elements and Style button
�️ (3:36:18) Add a Google font
�️ (3:40:59) @font-face
â?¨ï¸ (3:43:12) Aside – spans
�️ (3:47:27) Add an underline using a span
�️ (3:49:25) Use an ID for the logo
�️ (3:54:07) Replace the jpg with a webp
�️ (3:56:52) Choose a color palette from an image
�️ (3:59:57) Add the terms & conditions section
â?¨ï¸ (4:04:13) Aside – text shadow
�️ (4:10:39) Improving the readability with text shadows
â?¨ï¸ (4:12:46) Space – Exploration recap

Build a Birthday GIFt Site
â?¨ï¸ (4:14:38) Letâ??s build a Birthday GIFt site
�️ (4:15:54) Add basic header styling
�️ (4:19:43) Set the colors
�️ (4:21:15) Add shadow on text
�️ (4:24:50) We have a problem that flexbox can fix
â?¨ï¸ (4:27:37) Aside – align-items
â?¨ï¸ (4:34:06) Aside – flex-direction
�️ (4:38:55) Turn the header into a flexbox
�️ (4:40:45) Fix date and age design
�️ (4:45:12) Create the first gift
�️ (4:50:55) Replace the img with a div
â?¨ï¸ (4:55:31) Aside – make elements change on hover
�️ (4:58:37) Add the hover effect
�️ (5:00:55) Create the next GIFt
�️ (5:05:35) Create two more GIFts
�️ (5:08:22) Create the final GIFt
�️ (5:11:59) Add the footer
�️ (5:15:55) Add a background gradient
�️ (5:19:37) Personalize the Birthday GIFt Site
�️ (5:21:23) Use GitHub Desktop to publish your Birthday GIFt Site
�️ (5:27:05) Deploying your Birthday GIFt Site
�️ (5:10:43) Use VS Code to edit your Birthday GIFt
�️ (5:15:38) GIFt site recap

Solo Project- Hometown Homepage
â?¨ï¸ (5:17:33) Itâ??s time to go solo!
â?¨ï¸ (5:19:52) Solo Project – Hometown Homepage
�️ (5:24:02) Congrats on completing the course!