Hi everyone, regular lurker but occasional poster here.
I’m interested in learning web design and development. I messed around with HTML back in the early days of the web when dial-up accounts came with 10MB of free web space. I enjoyed it at the time but drifted off into other hobbies. I picked HTML up fairly quickly at the time, but much of it has leaked out of my memory since then.
I’m interested it picking it back up. My long-term goal is to learn enough to develop a database driven dynamic site - this is purely for a hobby; I have no intention of pursuing a career in this area.
I’m fairly clear (I think) on what I’ll eventually need to learn: HTML, CSS, JavaScript, PHP and SQL. It would seem obvious to start with HTML.
For what it’s worth, I’ve done bits of programming here and there in the past… A bit of VB.net mostly. I’m familiar with concepts like variables, functions, loops, decision branching, arrays etc, although I don’t remember a lot of the specific syntax.
So, that was really all background to the actual General Question: can anyone recommend a good book on HTML 5? Any discussion on other elements of the OP welcome as well.
You might take a look at the w3schools.com site. It’s pretty basic as far as tutorials go but should be enough to get you started.
A few years back I bought the Head First book on HTML. At that time it was heavily focused on XHTML but they may have an updated revision now for HTML 5.
Seconding the W3schools tutorials. Anyone who works their way through the relevant ones will have a better working grasp of HTML5, CSS3 etc. than from most books or other courses. (And they’re free.)
The good thing about HTML5 and to a lesser extent CSS3 is that many things have been simplified over the massive kludges and add-ins of earlier versions. The capabilities have been extended using a much streamlined language and code system.
To tie systems together, talking about a client/server set up, you may also want to investigate AJAX. - asynchronous JavaScript and XML.
Long story short. The client, a desktop for instance through a JavaScript function, sends a request to the server. Which can be an .aspx page on the website. The server takes that request (usually processing SQL against a DB), and returns XML. XML is really just a text file that can read by anyone that has notepad.
With code of course, the client (the home PC) using JavaScript reads the returned XML and paints the page on the browser.
What gets hard to wrap your mind around, is that some processes are performed on the server, or web site. Some on the client. The data is returned, and the browser takes that info and creates the page.
I wouldn’t worry to much about CSS to start with. The look and feel of the page can all be handled with HTML. If you are pulling data from a server, some basic SQL will be needed. That can be as complex as you make it.
It’s simple. :eek:
still makes me wander the halls mumbling to myself.
The problem is practice. On a PC you need to set up a mini-server on your drive. It is not complicated but even so I still cannot get aps files to work correctly which you need if you are going to do forms.
I use this book. Maybe it won’t teach you HTML5/CSS3 as much as W3C but it is a good reference work and design ideas. It also talks about how we used to do web design vs now.
Disagree 100%. You’ll almost never do inline style codes and HTML/CSS go hand in hand. If you want to learn good web design practices you’ll learn both concurrently.
Unless rigorously set up and maintained, a rather involved techie task at best, a local server is a barrier to learning web development, not an asset. Problems are as likely to be caused by a faulty server setup as by any actual coding mistakes.
You can also write and test basic HTML and CSS and even JavaScript - no PHP, no SSI - without anything more than a text editor in one pane and your fave browser in the other. There’s a lot that needs to be mastered before you get to dynamic pages, active server code, etc.
Last time I looked up web building tricks I got the feeling that HTML doesn’t really exist.
On one hand they say XML is used for describing data and HTML is for displaying it.
On the other hand they say CSS is for displaying a web page and I forget what HTML was for according to them. Probably just for the old folks that ain’t cool no more.
Meanwhile, we are viewing this on a page made of tables and div’s.
Yeah, just like the last desktop PC was sold five years ago and laptops are only for old fogeys.
HTML, and even more so HTML+CSS, remains the absolute backbone of web development. That there are more complex tools you can use if (1) you’re building a very complex, high-traffic dynamic site or (2) can’t fart without a symphonic score is irrelevant.
Maybe it’s a terribly old-fogey viewpoint, from someone who built websites with hand-coding for many years while visual tools slowly, slowly grew from useless clusterfarts to actual productivity platforms, but I believe that a solid grasp of core code and page development from raw code up is essential to success as a web developer.
The 24yo’s who got their degrees or certificates without ever seeing a live line of code can laugh and dismiss me, but that’s what I did - laughed and fired you - when you encountered a problem Dreamweaver or GoLive didn’t have a menu item for.
Learn to code. It’s by no means obsolete and it will serve you long and well. (And bless yer lucky stars that you never had to work through the kludgy shit of HTML 4.x and XHTML.)
I don’t mean to be unnecessarily disrespectful, but I would suggest you not follow any of this advice.
As Duckster says, ignoring CSS3 isn’t a good way to learn basic Web development in 2015.
You also definitely don’t need to learn AJAX any time soon or ever as a hobbyist, and some of the information enipla posted about it is incorrect. AJAX doesn’t require an XML response in spite of the name.
I suggest you hunker down and learn HTML5/CSS3/Javascript until you’re reasonably comfortable with a completely static Web site all before you worry about doing anything dynamic. Learning PHP will be a lot easier if you’re not stopping to figure out those things every step of the way.
I was referring specifically specifically to the OP wanting to do SQL etc. Straight HTML/CSS/JS just needs a web browser and text editor (Notepad ++ is a good free one).
Most of the straight HTML/CSS tutorials I’ve come across (including W3School) recommend the “Notepad and a browser” approach. I think that Fuzzy Dunlop is right - I should be focussing on the basics first. As I’ve been reading up since I posted, the HTML is slowly coming back to me, but there have been many developments since 1997!
Long time lurker here but I wanted to add my thoughts to this one.
I studied Web Design BA at uni so hopefully have some advice for you.
w3schools.com - it’s ok but teaches some crap practices imo but should be fine for a hobbiest.
Don’t buy a physical book! All the resources are online and free!
http://codepen.io/ This site lets you prevew little snippets of code for free! It’s brill, sign up! It also supports stuff like .sass!
For more hard core stuff, I brought a subscription to www.lynda.com BUT beware, these are very dry and assume you understand programming concepts. You might have to do more basic programming modules before you tackle any complicated code.
http://css-tricks.com/ Lots of great examples and explains why they work well.
Fastest way to learn -> find a cool tutorial that explains the code.
Go to codepen -> experiment and watch the code in action!
Long term: Think of a project, break it down in to different modules. Learn how to program the individual aspects of this project then bring them all together. My suggestion would to be to make a responsive template for wordpress. i.e one that adapts to the screen size. You’ll learn: web hosting, CMS’, PHP, html, javascript, and CSS.
Code pen will allow you a play ground in the short term but you’ll want to get your own full website at some stage for php ect.
Could you expland on this, Lannister? I’ve heard others say similar things, but without any specific detail.
I did some googling yesterday after posting the OP and found a good free intro-level HTML / CSS course on Microsoft’s Virtual Academy. I’ve only watched the first couple so far, but the style seems to work for me.
That’s the thing - I do sort-of have a project in mind. Mrs Snowman and I spend a lot of time doing online grocery shopping, and we often try new recipes. It can get a bit laborious compiling a shopping list, so I wanted to build an online database of recipes which we like, so that we can compile a “meal plan” for the coming week and the site will present a sorted list of required ingredients for all the recipes on that week’s menu. I’m fairly clear in my head what the architectural building blocks of this will be - I know what I don’t know, if you see what I mean.
I came across an online IDE called Cloud 9 which is pretty slick - as well as a decent code editor, your project is hosted in a virtual “workspace” - which is a virtual Linux server running Apache and whatever other applications you want, which means you can do the dynamic stuff without needing a separate hosting site. It’s free for a basic subscription. I don’t think I need it yet, but I imagine once I’ve got the plain text stuff down, it will be useful.
When I first began learning HTML, back in the mists of 1997, I had a book by lynda.com, and they still exist. That’s my recommendation.
I’ve not kept up with web design. I’m still good at the basics, but the programming and back-end of things is beyond my ken. Coupled with cheap alternatives like squarespace, my limited skills are now obsolete.
So learn jquery, Ajax, and SQL, for certain, if you want to stay competitive.
As for w3schools, for an absolute beginner it is good to learn the difference between <p> and <h1>, basic javascripting, etc. someone can get on it and crank out a decent first web page. I’ve noticed that as soon as you start moving into intermediate design w3schools is pretty worthless. Like I said before, I have one book but it is more of a reference than anything. It was great when I taught web design when a student wanted to double-check how to use the img tag real quick for example.
For the OP, sign up to stackoverflow. It is worth it. Also, don’t neglect the graphic design aspect. Look at what modern websites are doing, find one you really like and try to replicate that.
It’s very old fashioned and there’s better/more efficient ways of coding certain things. I’m struggling to pick out a particular thing as it’s been a while since I referenced it.
However, use it for the basics. If you see anything that contradicts another site, W3 is probably out of date (take it with a pinch of salt).
Saint Cad
As for w3schools, for an absolute beginner it is good to learn the difference between <p> and <h1>, basic javascripting, etc.
Agree. It’s also usually the top search ^^
http://www.codecademy.com/ I have been a front-end developer for many years and this is generally where I refer people when they tell me they want to take up coding. The HTML / Javascript courses there assume 0 coding knowledge, so they are a great place to start as a beginner.
https://www.codeschool.com/ Once you complete codecademy this is a good website to go to. It costs money (like $20 a month) but it is more advanced. Their courses will get you through to the point of self-sufficiency and you will be able to go start building stuff on your own.
These recommendations assume that you learn effectively with this type of training. Some people (myself included) just can’t read books and learn stuff. I learn by doing. Lots of people will tell you “just go build something and you’ll learn as you go along”. This is true, but I know as a beginner at square one it is very difficult to know where to start. Those sites help you get the ball rolling.
I generally tell people to do the Javascript course for learning actual coding practices. HTML/CSS are markup languages that don’t “do” anything dynamic. Javascript can be used anywhere (hell you could make the entire site run on it) and it is pretty generic so you’ll be able to quickly shift to another language like PHP if you want to without much headache.
If you decide to get more into the back-end stuff this course https://cs50.harvard.edu/ is a great one. I have a couple friends who have successfully completed this and gotten jobs within 6 months. You said you didn’t want a career in it, but that should give you an idea of where you could be by that time.
If you already know some vb.net, I’d recommend visual studio as your IDE. You should be able to get started fairly quickly on building a simple and yet modern, MVC driven, dynamic website.
I’d recommend a book on .net MVC to get you started.
Frankly, there is no real “learning” to html 5. It’s a declarative outline of data. IT should take you all of 10 minutes to familiarize yourself with the basics, and the rest you can look up.
You have a basic structure:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
You have the elements that group data: <div> <span>
You have elements that describe data: <p> <table> <form> <image> <video> <h1-h6> <input> <ul> <canvas> <script>
And you have properties that assign CSS styles or provide further information: <image class=“thumbnail” id=“logo” src=“lovely.jpg” data-info=“gonna use this in js at some point”> <input type=“password”> <script src=“myscript.js”>
