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!

source

44 Comments

  1. 32:00
    I don't know what I did wrong, because I used Google logo, added an input field and so on, but the outcome looked different and messy, because for one, the image was huge so I had to use width=20% instead .. yet the image still remained on the left side of the page.
    Plus, the input field itself was tiny compared to that of Google's, even though I checked and double-checked the tags.
    I'm sure I'm going to get my answer by the end of the course, but I don't want to skip any step to get there

  13. I have bought two different Web Development courses on Udemy from the two best tutors and I can say for a fact that this guy right here is a better teacher than both of them.
    Please, does this tutor have intermediate and advanced courses on Udemy?

    Thank you so much for this amazing tutorial.

  21. very good and interactive course. the way of this course is challenging and not just copy-paste code, the project base path is heped a lot. just a one con of this is git hub part which is very rushed, but i dont mind as it is not git hub course and i can learn it from anywhere. thank you for course. 100% recomanded for beginners

  30. I was a bit hesitant to get into coding as I wasn't sure if I would enjoy it. Although I just finished the HTML part, this course was very helpful and made the learning fun and easy. Now that all my worries have faded away, I'm really excited to finish this course and build my own projects. Thank you so much. You did a wonderful job with this course.

  40. Hello
    thx for this lesson. I am a big beginner and am struggling making the google page as you showed at the 29e minute of the video.
    I did the same thing as you did but it doesn´t appear the same way. I need some help, please😊.

Leave A Reply

Please enter your comment!
Please enter your name here