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.
-
Refer to YouTube videos where they are explaining and coding, delete - repeat code few times till code sticks into your mind
-
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