Learn HTML & CSS – Full Course for Beginners

⭐️ Code ⭐️

🛠 Tools used:

⭐️ 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: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

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!

[SpaceOutlaww]

To those worried and concerned about tutorial hell, I would recommend watching this video in its entirety without coding along and then to attempt the projects or similar ones afterwards. You can always use this video as a reference. It'll be a much faster and much more effective way to learn

[oldschoolgaming]

I don't even know why I'm doing university degree with such amazing materials available for free on the internet.
Not enough to say it's great stuff this here.

[valrahul]

Finally! I get a beginner, beginner course from scratch! Many people out there looking for this info. Thank you.

[Sterlin]

This guy is a great teacher. I love everything about the way this guy teaches. I can actually remember everything and actually utilize what I remember in my own projects.

[jasminerivera]

I couldn't understand why my code wasn't working when it was writing right, but after watching this I now know what I did wrong and feel a bit more confident doing more stuff. Thank you ❤️

[nnamanilota]

Per Harald Borgen, my very first trainer on YouTube when I just started learning Javascript. Great man, I hope to meet him one day. Heading to Finland hopefully next month for masters degree .

[raviroy]

This was one of the most beautiful and satisfying learning experience I have had. Please keep up the good work. ❤

[PaulDuBerry]

Probably the best course on HTML and CSS on YouTube. Brilliant teacher.

[patrickchicaiza]

I love the way you teach, clear, without complicating things and lots of examples. Thanks a lot. God bless you.

[Anata_No_Mirai]

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.

[karim_ghibli]

This one is amazing! The teaching methodology is next level. I love this course!

[AhriaHasegawa]

I just finished this course and I learned so many things and still learning more. I already know some of them but still this course corrected my mistakes. Thank you so much for this!

[edisco]

Your teaching style, delivery, vocalisation and everything is perfect (so far im 30 mins in). I couldn't bare to listen to the other tutorials on yt, too jumbled up, annoying voices, unclear analogies. This is excellent!

[sezanali]

You are the best tutor. Please give us more on JavaScript. Without your tutorial, I would never learn it.

[nvermr]

This guy is my favorite teacher, I saw his javascript tutorial a long time ago and I'm really happy to see him again.

[meritanna]

🎉🎉Best teacher I have ever met.I am Kenyan. I really enjoyed you class.Looking forward to other classes with you.Thank you

[On.demand]

Sir as being a college student you made me realise that css is so easy in your lecture you solved every doubt that I had in my mind .
I am thankful to you 💓❣️💕❣️💕❣️

[xcuezrp]

Per, this course was amazing 🎉 Thank you

[coldcity]

Was so excited to see my boy Per’s face in the thumbnail… you have a gift for teaching and a lovely soul… it’s about to get “dangerous “ :)))

[adonbush]

You guys just never stop collaborating with beginner tutorial courses! Thank you!