Free examples of html-css

Hi, Im new to html-css , any free examples that shows a website with its corresponding html/css explanation for beginners?..i feel i need to look at many examples in order to grasp html-css quicker

You can use the developer tools of any browser to see that for any website you visit. But you won’t understand it unless you learn it first. If you follow the path here on fcc You will learn html and css, plus more.

First off, know that you can look at the rendered html/css of any website with your browser’s developer tools. Right click > inspect. You can play around with the html and css there. Just refresh the page and you are back to normal.

Then in a way freeCodeCamp’s Responsive Web Design curriculum is one explained example after another. You can also peak at the 5 projects you would build in the end on codepen. https://codepen.io/freeCodeCamp

These:

Codepen in general is a platform where people show cool stuff with html/css. It’s half editor half presentation. https://codepen.io/picks/pens/

You can find a ton of articles and video tutorials. Besides FCC’s own youtube channel two of my favorite youtubers are Kevin Powell https://www.youtube.com/user/KepowOb
and Brad Traversy https://www.youtube.com/user/TechGuyWeb

Mozilla Developer Network (MDN) has more of an encyclopaedic character but is a great reference with small examples of language features e.g. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

Two great online magazines with how-to articles:
https://css-tricks.com/guides/
https://www.smashingmagazine.com/guides/css-layout/

Generally, if you just search “[what you want to do] tutorial” for anything HTML/CSS the chances are good.

3 Likes

Can you please share techniques about how to use CSS for new learners; I’m quite comfortable with HTML but still not understanding how to implement CSS as it has got so many permutations and combinations

Thanks in advance.

WoW bro… appreciate the info and the great sources … thank you very much

1 Like

Yeah, CSS definitely has parts that are puzzling at first. I started with the freeCodeCamp exercises and projects. After that I started to build some static sites. Trying to implement some vision helps a lot, because you discover gaps in your knowledge. You ask yourself ‘How do I make this look like X?’ and then you search the web for a solution …

Some people like to build clones of websites. Haven’t done that much myself, but seems to be good practise. I like to get the perspective of multiple instructors on the same topic. It was also worthwhile to code along some longer tutorials where you build a small site, because you see someone more experienced structure their code. e.g. I took a great (and affordable) course like that on Udemy called “Advanced CSS and Sass: Flexbox, Grid, Animations”. But as mentioned above, there are lots of free resources as well …

Learning BEM (a way to structure CSS selectors in a specific way) has helped me make the mess I create less messy. (Not everybody likes BEM, and there are a bunch of ways to go about this.) It also helped me to use cheatsheets. (e.g. http://flexbox.malven.co/ http://grid.malven.co/) and follow some tutorials about dev tools

2 Likes

Thanks a zillion for your detailed clarifications & super awesome tips ; I will try per your instructions this week and update you back.

Best Regards,
Vikram

Dear Community,

After spending 9 weeks of self bootcamp learning, I would like to share few important lessons for new engineers.

  1. Refer to YouTube videos where they are explaining and coding, delete - repeat code few times till code sticks into your mind

  2. Without actual coding; I found it very hard to understand CSS. Initially it was like dreaded VC++ of early 2000

More your practice along with YouTube authors more confidence you’ll get.

Regards,
Vikram

2 Likes

Thanks @vikramvi for the info