Learn HTML & CSS – Full Course for Beginners

Curriculum for the course Learn HTML & CSS – Full Course for Beginners

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!

Watch Online Full Course: Learn HTML & CSS – Full Course for Beginners

Click Here to watch on Youtube: Learn HTML & CSS – Full Course for Beginners

This video is first published on youtube via freecodecamp. If Video does not appear here, you can watch this on Youtube always.

Udemy Learn HTML & CSS – Full Course for Beginners courses free download, Plurasight Learn HTML & CSS – Full Course for Beginners courses free download, Linda Learn HTML & CSS – Full Course for Beginners courses free download, Coursera Learn HTML & CSS – Full Course for Beginners course download free, Brad Hussey udemy course free, free programming full course download, full course with project files, Download full project free, College major project download, CS major project idea, EC major project idea, clone projects download free