Best place to learn html5 / css?

[cookiethecrumb]

Hey guys I want to teach myself how to code and make websites with css and html5. What would be the best free resources to teach myself these two things. Thanks for any help!

 

(i know c++ and java if that is relevant information)

[minibois]

W3Schools and generally trying out a ton helped me.

I have seen people recommend Codeacademy, but can't personally vouch for it (have never used it)

 

Also, Google any questions you have.

[VinsinityKT]

https://www.w3schools.com/html/default.asp

 

I was taught by a book. See if you can find a PDF of one of its edition online for free.

https://www.amazon.com/gp/product/0133970744/ref=oh_aui_detailpage_o03_s01?ie=UTF8&psc=1

[mpsparrow]

HTML and CSS are not that hard to learn. I suggest you just jump in and try things. Tons of free resources are on the internet if you have any questions.

[Mira Yurizaki]

I highly recommend this book: https://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/ref=sr_1_3?s=books&ie=UTF8&qid=1493229057&sr=1-3&keywords=HTML5+CSS3. It's no-nonsense, clear, and teaches you the things you will use most of the time (and the book as a tongue-in-cheek comment about the other things it won't cover you can Google. Seriously)

 

And then I use w3schools from time to time as a reference.

[EunSoo]

Im not sure if this breaks the community standards (if it does, i will take out the link and you can personally ask me for it or find it yourself) but I found this PDF of a book that I have been reading in my free time that I recommend.

http://wtf.tw/ref/duckett.pdf

[Enderman]

I used w3 too

[Blackhole890]

sololearn app teaches around 7 programming lenguages for starters, but is not a complete guide

[Underi]

I have used codeacademy and pretty much learned the basics fast. Really simple to use. Also w3schools is really good.

[SaladFingers]

I'm surprised to see none is recommending what to me is the most obvious: View the source of existing websites on the internet and study it. Download it locally, mess with the code, brainstorm why things are working for you or not. Rinse repeat. I learned both html and css just by doing that.

 

Html is far less messy these days because you don't need it to design the UI anymore, you just use css. So for the most part it's pretty simple and straight forward. Now, for a handcoder like me css can be tricky. The amount of time spent messing with pixel values and refreshing just to "get it right" is unbelievable. I would recommend that once you get better at it just use software like Dreamweaver for easier UI design. 

 

But yeah, apart from all the nice sources everybody else mentioned, find websites that you like and study their source code. Sometimes, for some p eople, having functional code available to mess with can be better for learning than starting with a "hello world" kind of strategy. Try it and find out

[middleclasspoor]

You might want to take a look at http://www.freecodecamp.com. I happened to run across it a day or two ago and it looked very comprehensive and is free!

 

 

Good luck.

 

[aithos]

It really depends what you intend to do and what your goals are...

 

You say that you "know" c++ and java, so what does that mean?  You took a class once or you're a software developer that currently writes console-based apps and wants to move more into front end and web applications?  HTML5 and CSS are pretty much just a hands-on type of learning because they don't really DO anything without some form of client/server code telling them what to do. 

 

In other words: they are both markup languages intended to help you design the UI (client) of a webpage/application.  What flavor or version of HTML you use (HTML5, Asp.net, etc) is largely irrelevant as the concepts are mostly the same, and CSS is really just a way of organizing your styles/themes into classes for re-usability and to keep your pages clean.  The differences between older HTML and HTML5 are pretty minor and also depend on which browser/s you're targeting.

 

For example, let's say you're trying to create a business website that tracks sales, invoices, customer information, reports, etc.  You're going to have a lot of controls (search templates, gridviews, tables, etc) on multiple pages.  If you wanted to have all your gridviews use the same appearance you would create a CSS class like "gridview-default" that you could then assign to each grid rather than styling them individually.  Not only is it less work, but when you need to make a change you update the one central location rather than modifying each page/control independently.  

 

So to summarize... learning HTML and CSS is really just the basics of web programming.  You can buy books or study tutorials but if you understand the concepts of controls, events and styles then you should really just dig in.  I would suggest picking a simple concept and starting to work on it, jot down some notes about what you think you'll need and then review later.  If you get stuck then Google, Stack Overflow, and W3Schools are your friends.

 

Also, I would strongly recommend you learn jQuery, JavaScript and look into Bootstrap as well...

[Mira Yurizaki]

3 hours ago, SaladFingers said:

I'm surprised to see none is recommending what to me is the most obvious: View the source of existing websites on the internet and study it. Download it locally, mess with the code, brainstorm why things are working for you or not. Rinse repeat. I learned both html and css just by doing that.

I recommend against doing this. The source you see on your browser may be different than the actual source file on the server. jQuery and Angular for instance can generate a ton of HTML that gets complicated for a human to read really fast. But if you want to do that approach, I would go with a framework like http://www.getmdl.io, as it's easy to get into and the examples are helpful.

 

But until then, one should really learn the fundamentals of HTML and CSS before trying to look at someone else's work. It'd be like trying to learn C and looking at snippets of the Linux kernel source without understanding what a function call is.

[SaladFingers]

1 minute ago, M.Yurizaki said:

I recommend against doing this. The source you see on your browser may be different than the actual source file on the server. jQuery and Angular for instance can generate a ton of HTML that gets complicated for a human to read really fast. But if you want to do that approach, I would go with a framework like http://www.getmdl.io, as it's easy to get into and the examples are helpful.

 

But until then, one should really learn the fundamentals of HTML and CSS before trying to look at someone else's work. It'd be like trying to learn C and looking at snippets of the Linux kernel source without understanding what a function call is.

Well that's why you don't start with overly complicated websites at the beginning. Even templates can help one understand. Anyway, I have had success with top to bottom learning in the past and I know others that did as well, so I thought I'll give my 5c.

 

PS: What you see doesn't necessarily need to be the same with the code on the file server. If I'm using php inclusions for example, that doesn't really matter as the end result is the front end that the browser renders and the user sees, so it still works.

[Mira Yurizaki]

Just now, SaladFingers said:

PS: What you see doesn't necessarily need to be the same with the code on the file server. If I'm using php inclusions for example, that doesn't really matter as the end result is the front end that the browser renders and the user sees, so it still works.

That's what I said. With AngularJS, I can iterate a data structure using a repeat function. On the actual source file, if I'm putting this in a ul, I only have one li element. AngularJS creates the rest of listing on the client side.

 

In any case, I find it harder to find a website with simple enough code to be useful for learning than not. Something like W3 Schools is good because they provide examples that are appropriate for the expected level of experience.

[SaladFingers]

Just now, M.Yurizaki said:

That's what I said. With AngularJS, I can iterate a data structure using a repeat function. On the actual source file, if I'm putting this in a ul, I only have one li element. AngularJS creates the rest of listing on the client side.

 

In any case, I find it harder to find a website with simple enough code to be useful for learning than not. Something like W3 Schools is good because they provide examples that are appropriate for the expected level of experience.

But that's the thing, going through the code you find things you don't understand and then you look them up on sites like W3 Schools. And then it sticks.