How can I master HTML & CSS?


#1

Hello mate,

I just started learning about HTML and CSS from an online website like- w3schools.com. How can I learn easily and comfortably. What's the easiest way to learn?

Thank you!


#2

The "easiest way" depends on who is learning.

Try this

  • open your favorite plain text editor and write a simple HTML file.
  • select all - copy it, and paste it into https://validator.w3.org/#validate_by_input
  • fix any errors and warnings until it passes validation
  • add some CSS rules between <style>... </style> in the files <head> section
  • test it in the HTML validator again
  • test it in https://jigsaw.w3.org/css-validator/#validate_by_input
  • fix any errors and warnings until it passes validation
  • give the file a ".html" extension and open it with your favorite browser
  • use the browsers developer tools to try different HTML and CSS, keeping note of what changes you like
  • make those changes to the file and save it
  • test in the validators again
  • rinse, repeat

#3

I think book learning is the best way to learn programming. Sites like W3C are good for reference – not progressively learning a language. Books are designed to teach you based on prerequisite information. You loose that in tutorials on the internet. Tutorials on the internet are useful for solving specific problems once familiar with a language. I myself started out a little over a decade ago by reading many Sitepoint books. I would like to believe that all the new publishing is just as informative as their old-school books. Perhaps you could start there with a HTML book or course.


#4

My way was maybe not the easiest way but it was the most fun and perhaps you could argue the easiest because it's the most fun... It was like that for me anyways: by doing. Try to build something of your fancy... At the point at which you get stuck then google for your answer and if you cannot find anything then ask here or at any other related forum... I could never really get into books because mostly i find them a little boring, but they're probably the best way if you then follow along with practical exercises


#5

I think that approach is like stumbling down a dark ally at night drunk. You might learn something but not what you want to. If you do learn that way though and happen to get a foot in the door professionally more power to you.


#6

Only it's not dark because the answer is most probably one search away... So in a way it is more targeted towards what you want to learn right now... whereas in books you might stumble upon a lot of stuff you are not interested in learning right now, and therefore you might find it tedious like I do.

I did... it's just about what works best for you...

It's definitely not easy learning something that complex without having fun


#7

Yes, things have changed a lot over the past couple of decades.

But my approach has remained similar. First I scan (* note, not reading as in understanding or remembering everything) documentation to get familiar with terminology and an idea of what's there. Years ago this meant books like "for dummies", "in a nutshell" and sites like w3schools. Then I would look for code examples, change it until it broke, and try to fix it. Referring back to documentation as needed.

I've tried several tutorials and I agree that they demonstrate how to do things a certain way. For me the learning came in changing code until it broke and figuring out how to fix it. I learned little to nothing by copying - pasting though when the code worked there was a brief fleeting "yay, it works" feeling.

One thing that was unfortunate with the way I learned was that by looking at online pages view-source and following random tutorials I learned a lot that needed to be unlearned. But that was then. Nowadays there are more good examples that can be found (still plenty of not so good too unfortunately) and with good search foo what can't be found in documentation can often be found online somewhere.


#8

There is no one answer that will suit all people as we all have varying skills and learning abilities. As to whether 'it is easy' will depend on some degree to your intellect or learning ability as some people grasp the principles straight away but others can be told the same things a 1000 times but still not grasp the concepts (mentioning no names).

There are many courses around but the good ones do come at a price and there are a number of css courses on Sitepoint for html and css. I would start with a structured introductory course on html and CSS and then move on to more advanced topics once you understand the logic and terminology.

CSS these days is a vast topic and its easy to get overwhelmed so its best to start with the basics and then gradually increase your knowledge over a period of time. Once you have a grasp on the basics then the rest is easy. It's just practice,practice and more practice.:slight_smile:

Write your own code and even if you copy and paste be sure that you understand what you are copying and pasting. It does not aid learning to simply copy and paste but writing your own code always has great benefits.

Use the w3c css and html validators every time you write a block of code to make sure it is correct. There is no point in learning how to write broken code.

Buy a few good books to keep by your desk or for reading when offline as they are useful when you need to lookup or remember something. Do a search of this forum for best books as the question has been asked a number of times.

I learned most of my stuff (about 2 decades ago) by browsing web developer forums like Sitepoint and reading all the posts that interested me and trying to understand and then improve on the answers. These days every question you need to ask has probably been solved a 1000 times already so you just need to google it.

Once you have grasped the basics on the disciplines you want to learn then it is probably time to specialise in one area so that you become very good in a specific area (without forgetting all the other stuff) and gradually build a good reputation for that specific discipline.


#9

Practice practice practice!

Set yourself small goals such as creating a layout, or building a nice structured page.

Make mistakes, learn to fix them - if anything fixing things will teach you the most.


#10

Easiest way to learn is start making notes of the topics you are learning from websites and do a practice of every topic that you are learning. you can also learn from the video tutorials about HTML and CSS.


#11

Thank you so much all guys for your great reply. I will try to abide those tips. But I already started learning from w3schools. Let's see how much I can.


#12

When I started I found the w3schools site a lot easier to understand than other more technical sites. But as I previously posted, I needed to unlearn some of what I learned there.

Many are strongly against using w3schools. My personal feeling is that as long as you keep in mind that some of its information might not be up-to-date the site can still be useful. But once you get past "newbie" level you would do better to go to the MDN (or other) site.

You might like this site
http://htmldog.com/guides/html/beginner/


#13

My vote goes to W3School for HTML and CSS tutorial, especially at the very beginning stages. Getting into the development these two most basic skills are a must.


#14

codecademy.com is a good start, and you can use codepen to test sections like menu, header etc, and join social media communities where you can chat live with others and learn from.


#15

I have heard about this but didn't try there yet. I will. Thanks!


#16

Exactly! I have same thinking.


#17

Sign up at codepen.io. You can create numerous free pens for all your exploration and experiments.
Your CSS edits will appear live as you code which is good feedback while learning.

I agree with both approaches of learn by doing and also book learning. You need a structured and progressive learning tool but you also have to put fingers to keyboard and write stuff so you can really see how things work.

You'll want to study general overarching concepts like the box model and exactly how line-height, padding, borders, margins all interplay. Then look into positioning; static, relative, absolute, fixed.
Take a study on how the CSS cascade really works, and specificity.
Learn about pseudo elements and pseudo classes and how those can fit in to a design and what problems they solve (or cause).

Learning those things is not just for advanced nerds or something. They actually provide a very important foundation for how to think about laying out and styling HTML containers and content. Knowing them will help avoid endless bugs and traps later on.

Use codepen give yourself challenges like styling a menu bar, or creating a header image, or styling a full set of text elements, or a form.

Good luck, CSS is fun!


#18

You can use sites like SoloLearn and FreecodeCamp which offer an interactive environment with the community if you get stuck on questions or need help.

For the book-learning part I would recommend the SAMS TEACHES series or WHY THE LUCKY STIFF books. These have questions and thought-out examples that will help you understand what is relative to CSS/Javascript.

Also, look at CODEPEN as there are many projects and a great IDE to work with.

Start with learning HTML first and CSS, then Javascript.

Var is variable in JS. You must use the word function before declaring a function in JS. You will also need knowledge of operators or >, >, <=, >= as well as if-else statements and .this

Also, codeacademy is not good unless you want to fork over money. All the sites listed above are totally free but are up-to-date and interactive


#19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.