DEV Community

Manan Gouhari
Manan Gouhari

Posted on • Updated on

Comprehensive guide to HTML and CSS

There are three components that go into frontend development - html, css and javascript.

  • HTML is the structure of the website.
  • CSS is the styles on the website.
  • Javascript brings in functionality to the website.

HTML and CSS are not programming language per se(people have been debating about it for ages.)
But Javascript is a programming language.
HTML meme

At a beginner level, you can create AMAZING, STUNNING websites with just HTML and CSS.

HTML and CSS are super easy to learn, believe me.
But it takes time to master the art of using them in websites to create compelling layouts like the one in the below photo.

Website example

First step is to get good at HTML and CSS, here are a few resources for you -

Learning Platforms -

  • Freecodecamp - Awesome platform to interactively learn web development, I can't stress on how complete it is. All for free.
  • Codecademy - It's mostly a paid platform but their basic HTML and CSS course is free! Worth giving a look.
  • Scrimba - An interesting platform for sure. Think of it as interactive courses. You can look at and edit the code while you're watching the course! Tons of free courses over here!

Crash courses on Youtube(GOLD) -

Basic tutorials through projects -

Best websites/blogs -

Instagram carousels worth checking out -

(I truly believe there's a lot of value all over Instagram, you just gotta dig it up)

By @thecodercoder

By @thecodecrumbs

By @duanecreates

Tools -

Websites that can make your life easy as a frontend developer.

Conclusion -

Once you're good at HTML and CSS, dive into Javascript and Javascript frameworks.
A nice way to practice is to pick up a Frontend Mentor Challenge and trying to solve those.
One other thing that works really well for me is watch youtube videos where a person is making a website, be it a tutorial or live stream, it really exposes the ideology that goes behind breaking the website into pieces and implementing it.

If any of y'all want to contact me, hit me up on Instagram at @manan.code.

All the best on your journey into frontend web development!
good luck gif

Discussion (4)

Collapse
violet profile image
Elena

Great. I would also add this 6 hour html/css tutorial on youtube. I goes really deep into all sort of complex css functionality.

Collapse
fabcodingzest profile image
Fab

Awesome guide for HTML and CSS filled with tons of resources.
Nice work, Manan ๐ŸŽ‰๐ŸŽŠ๐Ÿค“๐Ÿ”ฅ

Collapse
manangouhari profile image
Manan Gouhari Author

thank you!

Collapse
duanecreates profile image
Duane Creates

Great information man, I'm sure it would be useful for beginners with all those resources! Also thanks for linking to my Instagram posts.