HTML and CSS Tutorials - 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 ⭐️ 🔗 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: 🔗 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 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 shorhands 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! ❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp