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!