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!