Learning HTML and CSS

I have decided to teach myself HTML and CSS (because, y'know, reasons) And I wanted to find out what resources peeps recommend and also if there are other languages that it is advantageous to learn at the same time, such as javascript, java or ajax or any other relevant languages.

For reference material I have bought "HTML5 and CSS3 all in one for Dummies" by Andy Harris (2014)

http://www.bookdepository.com/HTML5-CSS3-All-One-for-Dummies-Andy-Harris/9781118289389?utm_source=SV-Body&utm_medium=email-Service&utm_term=HTML5-and-CSS3-All-in-One-for-Dummies_title&utm_content=order-details&utm_campaign=Order-confirmation

Thanks all!

You will get a good handle on basic things with that book on its own.
Go through everything on w3schools.com a few times.
Make a habit of right-clicking web pages to view the source. Then go though and make sense of what you can.
XML is worth learning imho (so you will have to learn to validate stuff) and maybe something like PHP, perl, python etc. Then maybe learning how to set up a web server.

1 Like

It's really great to know web coding, and HTML and CSS are the basics, and best place to start, in addition JavaScript would be great to learn, you can do a lot with it. Just for the beginning stick to HTML and CSS, then jump to JavaScript to start learning more programmings.

A personal favorite source; http://www.codecademy.com/ ( Here you learn to code, by coding )
Another way I always recommend is; get some simple template you can find for free on the web, and tweak it, play with it, use the "Inspect element" in browsers to see how all rules affect the elements in the page etc.

Like LAJW said, anytime you have a question, head over to "http://www.w3schools.com/", they have everything with live examples, For more (of course you will need more help), just search on the web, sites like "https://css-tricks.com/" will save you a lot of time.
Just start and learn something everyday, and you'll bee all cool, very soon.

And most importantly, from the beginning use Percentage (%), and ems etc for measurements and completely avoid pixels(px), you can do almost everything.

Tips:
How to convert width I see on my screen, in pixels, to ems so it looks same on different resolution displays?

1 em = Font size set for the browser or device
If you want to convert 7 pixels to em; 7 / 14 = 0.5em ( When you browser's font size is set to 14px )

20 pixels to em; 20 / 14 = 1.428571428571429em
Some browsers will notice only up to some decimal points but some will take into account more, so if you will just copy and paste the number from your calculator and not round it up, it will help you with precision.

When you need to convert a very small width, say 1px for border or something, instead of just converting 1 pixel to em, convert 1.25 pixels (for example) to em; 1.25 / 14 = 0.0892857142857143em
It helps with browser compatibility.

Best wishes!
Stay safe!

1 Like

Once you get the hang of things, I'd recommend downloading some good free templates as well. For me, visual learning really helps, so I found that making tweaks to an already finished product worked well when learning about how changes in style/formatting affect different objects, etc. You can change some code and have a visual reference of how it changes the look of the finished design. Templates are hardly ever exactly what you want though, so once you're ready, you can take some of the ideas and concepts from templates you've explored/tweaked and start making your own work. There's some good responsive HTML5 templates here that might be useful.

1 Like

Hello,

It's great you're taking an interest in learning CSS/HTML.
I would suggest this.
Learn HTML first (which is not very hard) then get a grasp on CSS.
After you have a good understanding of both languages.
I would shoot for a touch of Javascript.
However; I would want to push you in the PHP / Database Abstraction area as well.

If you're a book worm; like me :D
Then I would suggest these books.

Here's a set of both the "HTML/CSS" and the "Javascript/jQuery" books from Jon Duckett.
I enjoy reading from these. Also I would recommend some Tim O'Reilly books as well.

This one covers PHP/MySQL as well, and again; Robin Nixon is a very good author.

Well mate. I hope this helps you on your quest of knowledge!
If you run into any errors or problems; I would be more than happy to lend a helping hand.

~ Netty

1 Like

www.codecademy.com/ is a great way to learn HTML, CSS and Javascript. It also has lessons for PHP, jQuery, AngularJS, Python and Ruby. I can recommend it from personal use!