HTML Tutorial For Beginners

In this video, I'll guide you step-by-step through the fundamental elements of HTML, and by the end, you'll be able to recreate Google's iconic homepage. This comprehensive guide is perfect for aspiring software engineers, so dive in and take your first step toward mastering web development

Remember 0 * 10 = 0

VS Code Download: https://code.visualstudio.com/download

// TIMESTAMPS //

00:00 - Intro

00:51 - Getting Started

01:09 - why index.html??

01:50 - back to HTML

02:12 - What is autocomplete stuff???

03:39 - Time to start writing HTML

04:07 - What are HTML Tags and Elements?

04:48 - Writing our first HTML Element

05:02 - Semantic HTML

05:32 - Basic HTML text elements I recommend you know

05:48 - The div tag (Better know this one)

06:11 - How to make a button

06:26 - How to add links

06:49 - HTML attributes (pretty important)

07:02 - Finishing our first link

07:36 - Absolute Links and Relative Links (also pretty important to know)

09:05 - Organizing our files like a real software engineer

10:20 - Adding images

11:43 - Adding Forms and Inputs

12:59 - Nesting Elements (parent and child)

13:18 - You are now a pro (here's some things you can do now)

13:34 - Making Googles homepage

//ADDITIONAL LEARNING RESOURCES //

If you're feeling motivated and want to move on ahead or wanna learn some of these topics in a more in-depth way, or if I just didn't explain something good, here's some resources I recommend trying out:

The Odin Project: https://www.theodinproject.com/

Full stack Open: https://fullstackopen.com/en/

Learn HTML in 1 hour:    • Learn HTML in 1 hour 🌎

HTML in 5 minutes:    • HTML in 5 minutes

// ALL THE IMAGES I USED FOR GOOGLES HOMEPAGE //

Google Logo: https://www.google.com/images/brandin...

The 3 dot icon: https://cdn3.iconfinder.com/data/icon...

The Profile Pic I used: https://i.pinimg.com/1200x/b9/c4/7e/b...

Search Icon: https://cdn-icons-png.flaticon.com/51...

Mic Icon: https://www.iconpacks.net/icons/1/fre...

Camera Icon: https://cdn-icons-png.flaticon.com/51...

// SOCIALS //

Twitter:   / thecodingsloth1

TikTok:   / thecodingsloth

#html #webdevelopment #htmltutorial #learnhtml #programming #coding #webdesign #VSCode #Tutorial #CodingTutorial