7 ms·

A friendly web development tutorial for complete beginners

412 points by interneting 10y ago

exprA 10y ago
HTML, CSS and JavaScript are not hard. What's hard is being able to teach any single person them – that requires many sorts of people skills. The irony is that for people with the right mindset, learning the 3 of them, or programming in general is one of the easiest thing they could do.
- jordanlev 10y ago
  I disagree... they are hard. The fact that you think they are easy speaks to your own intelligence or "way your brain works" that you are able to grasp it (and/or your persistence/practice over the years of learning it). But try teaching this stuff to people with no experience, and/or people who don't have as analytical a mind as us tech folks and you will quickly discover just how hard it can be. (I recently taught a college class that was an intro to web design / development - suffice to say it really gave me a clearer picture of how far I'd come in my own professional skills over the years... it's easy to forget what it was like before you knew what you know now :)
- sixQuarks 10y ago
  A big problem with me learning to code is my terrible memory. I get the concepts and logic of code, but it's frustrating having to re-learn everything over and over again because I can't remember the function name, format, etc. My biggest nightmare is trying to learn another language, I took 7 years of Spanish in school and I literally can't speak a sentence of Spanish.
WA 10y ago
The graphics are nice, but I think you can polish the writing. 1. It took me probably 30 seconds to understand that the text blocks on the start page are summaries of what's in every chapter. Try to read this without knowing that this website is an online book: > The purpose of HTML, CSS, and JavaScript, the difference between frameworks and languages, and finding your way around a basic website project with Atom. This doesn't make any sense if you don't know that it describes a chapter in a book. 2. Simplify sentences. Cut adjectives. Shorten. It reads academic. Examples: > Our goal is to make it as easy as possible for complete beginners to become professional web developers, so if you’ve never written a line of HTML or CSS, but you’re contemplating a career shift, grab a cup of coffee, take a seat, and let’s get to work. This is a single sentence. It's hard to understand. Your readers aren't all native Americans. This could be turned into: -> This guide helps you to become a professional web developer, even if you've never written a single line of HTML or CSS. > They’re very closely related, but they’re also designed for very specific tasks. Understanding how they interact will go a long way towards becoming a web developer. Ctrl + F "very": Too often. A good editor might reduce the text by 25-50%. My secret tip is the Material Design Writing guide [1]. It shows how to write for apps. With apps, the user needs to get a task done as fast and efficient as possible. Write that way. [1] https://material.io/guidelines/style/writing.html https://material.io/guidelines/style/writing.html
- hbharadwaj 10y ago
  Are there guides similar to Material Design that you would recommend to an app developer? Looking for Dos and Don'ts. Appreciate any help in this direction!
  - WA 10y ago
    Don't overthink it. The material design guidelines teach you what to look out for. The book On Writing Well helps. But most rules are simple enough: Write in the active voice, cut unnecessary words, write, then edit and revise. It's a process, it needs practice, too ;)
- mcintyre1994 10y ago
  To add on to point 1 here, those sentence fragments should be links (and visually distinguished as them). Currently they're not, there's just the read more link - and if you go there and ctrl-f for any of the fragments (say "purpose", "frameworks and" or "basic website" you'll get nothing. So it's impossible to go from "that part of that chapter sounds good" to reading about it unless you know enough about the topic to ctrl-f a different term.
- bshimmin 10y ago
  Or write in a way that's light, friendly, and engaging. Not everyone wants something that's "fast and efficient" and information-dense, perhaps especially not people taking a beginner's course on HTML and CSS.
  - wruza 10y ago
    That's how I filter out turorials. If it is not fast and efficient, or involves weak analogies and too playful with terms, then I simply skip them until one is really factful, concise and to the point. I am noob, not stupid. Edit: typo
    - wruza 10y ago
      Otoh, after reading two chapters it seems that this turorial does not involve that. It is pretty good and thorough for complete beginners.
onion2k 10y ago
I think it's really good. I often wonder how people learn to make websites these days - I made my first 20 years ago when it was all a lot more straightforward. Even a basic site needs a huge amount groundwork now. The only comments I have is that it's technically "web design" rather than "web development", and there's nothing about taking the work the user has done and putting it on a server somewhere so other people can see it. It'd be a shame for someone to work through the whole thing and not have a working website at the end. Awesome work.
- tbranyen 10y ago
  Nothing had changed in the web stack that would prevent someone from building a webpage the same way as 20 years ago. Text editor and a browser...
  - CaptSpify 10y ago
    The tutorials have. I agree with you, the same things I learned 10 years ago are still relevant. But every tutorial out there now basically preaches that you need to learn $new_hot_language, and $new_hot_framework. For a beginner that doesn't know any better, it can sound like those are necessary.
  - jordanlev 10y ago
    This is true but misleading. You could make a similar statement about any field where technology improves over time. For example, "nothing has changed in the manufacturing process that would prevent someone from building an automobile the same way as 60 years ago" -- sure someone could build it that way, but it doesn't mean it would be a successful product compared to other things currently on the market. And I am not talking about using different frameworks / compiled languages / etc... I'm talking about the improved techniques we've developed over the years combined with new features in browsers, such as: * HTML5 vs. HTML4 (streamlined and more consistent syntax in a lot of places) * Float-based grid systems for layout * Flexbox(!) for alignment * media queries and picture/srcset for responsive design (heck, the whole concept of responsive design) * web fonts (not being limited to the dozen or so that are available through the OS only) * BEM methodology (having a modular mindset about styling components, combined with avoiding specificity issues by just using a class for everything) ...and that's just plain old HTML and CSS... don't even get me started about javascript (even just JS/ES5!)
tangue 10y ago
It's pretty cool,even on tricky subject like responsive images the content stays accessible. I hope he'll continue with js, filling the gap between codecademy and "first let's npm install webpack babel and gulp"
sddfd 10y ago
This is awesome, thanks! I've updated my personal homepage just a few days ago, and it was difficult to google the simplest way to make the layout responsive. This was, because answers often involved adding some overbloated framework to my homepage that was supposed to solve all problems. After two days of googling arround I arrived at very simple HTML + CSS, like you are describing, and did not need kilobytes of "CSS frameworks". The same applies to Javascript, and it is even worse there. People are using big, big frameworks everywhere, and I wonder if it would not be much easier to do it in plain Javascript. On stackoverflow it is really difficult to find an answer that does not require at least jquery. Are people aware of how to do things in plain javascript, and choosing the frameworks deliberately?
Yan_Coutinho 10y ago
Good! I also really like this one about webdev in HTML5: https://www.liveedu.tv/elijahwass99/videos/REABM-html5-coding-a-modern-website-4 https://www.liveedu.tv/elijahwass99/videos/REABM-html5-codin...
nthot 10y ago
The site appears to be broken for internet explorer 11. I am not able to follow any links.
- jordanlev 10y ago
  Yeah, looks like he's got some crazy z-index on the body tag that is causing the problem. If only there were some kind of CSS tutorial he could read to learn about this ;)
  - interneting 10y ago
    Next tutorial will be "Cross-Browser Testing Is Hard" ;)
- interneting 10y ago
  Author here. Correct! Thanks for letting me know. I believe this has been fixed (if not, please let me know again).
  - nthot 10y ago
    It's working for me now. Thank you!
jordanlev 10y ago
This is absolutely fantastic! I recently taught some "intro to web design / development" classes to college students (mostly designers, so coming to it more from a creative perspective as opposed to "coders at heart"), and this is the "textbook" I wish I had had then! The order that concepts are introduced is perfect, and I think the decisions made about what to explain vs. what to ignore are spot on. When I got to the part with hr and br tags, I was thinking to myself "tsk tsk, the closing slashes are unnecessary"... then the next paragraph explains how they're unnecessary but the rationale for using them is a good idea (in the context of learning). I also very much appreciate that it's strictly HTML and CSS and doesn't start off with all the extra mental overhead of build tools, compiled languages, server setups, etc. Really well done!
drops 10y ago
I think it would be more fair to call this "HTML & CSS" tutorial than a "web development" one.
josephjrobison 10y ago
Very awesome, look forward to digging in. As a digital marketer primarily, I've self-taught myself enough to be fairly proficient at HTML and CSS. The thorn in my side has always been javascript, which I've started and stopped many times. Look forward to seeing your lessons on javascript!
nik736 10y ago
Looks good but the scrolling is really weird and laggy for me.
- interneting 10y ago
  Browser and OS?
  - throw0213 10y ago
    It's laggy for me too. FF 45 on Debian.
  - nik736 10y ago
    Safari 10 on El Cap
heymijo 10y ago
Thank you for this. No specific critiques but I thought I'd give you some context about why this tutorial is a help to me. The last time I built a web page was probably 2001 and the fanciest it got was frames in Frontpage. Prior to that it was all html in notepad. I do not program. I am however, trying to get a website up for a new education venture I'm building. I'm using a Bootstrap framework. There's enough old stuff in there that I can figure out how to edit it, but also enough new stuff to throw me for some loops. A lot of the tutorials I've found to explain elements are either too simple or too complex. Your tutorial seems to be the sweet spot. I flipped to the part about responsive images and it answered some previously unanswered questions I harbored. When this post hit[0] HN awhile back I got excited by the template but I couldn't figure out how to edit important parts of it because it used SVG images. I didn't know what SVG was or if/how to edit/replace them. Your tutorial is the first simple explanation I've seen regarding SVGs and their place/purpose in the responsive image landscape. Much appreciated as skimming your site has already been helpful. [0] https://news.ycombinator.com/item?id=13126228 https://news.ycombinator.com/item?id=13126228
myfonj 10y ago
I can hardly judge, but that "Edit Here" "Reload Here" concept, being necessary to understand at first, seems not as necessary to keep after the point reader grasps the fact "this is source file and that is it rendered appearance". Live preview like complex Thimble [1] or simple Scratchpad [2] or Dabblet [3] seems to be far more convenient for exploring fundaments of HTML / CSS, especially for beginners. In fact I have such one "scratchpad" crammed into data:uri and bookmarked and keep regularly using it to quick test almost anything HTML / CSS / XML / SVG / JS related. (I am coder.) [1] https://thimble.mozilla.org/ https://thimble.mozilla.org/ [2] http://scratchpad.io/ http://scratchpad.io/ [3] http://dabblet.com/ http://dabblet.com/
throw0213 10y ago
They do ignore accessibility in both content and the website design itself. It's frustrating to see all those websites that are trying to teach about design, or even offer design services, but with their own websites containing illegible texts, broken layouts, invalid markup, etc. Heck, even those that claim to aim accessibility and validity often fail to achieve any. Just a few examples to demonstrate what I mean: - Grey-on-white color scheme: high brightness, leading to eye strain. - Font sizes and div widths are set in pixels. - Fails validator.w3.org validation. - Light-grey-on-white navigation links: low contrast, leading to barely legible text.
morinted 10y ago
Grammar aside: wouldn't it be internetting?
throwaway2016a 10y ago
How do we know this does not fall under the trap of not actually being friendly but only seeming friendly as viewed from the eyes of an expert / advanced user. Whenever I see these I wonder if they remembered to take someone with no subject matter knowledge and have them attempt to go through it. For all I know this site did. I'm just musing out loud,
- jordanlev 10y ago
  I've taught intro to web design / development classes before, and based on my experience this tutorial gets it right. (It pretty much follows along with the curriculum I used, although it's much more well-put-together than anything I ever made).
z3t4 10y ago
It's refreshing to see a web-dev guide that doesn't focus on a framework.
catpolice 10y ago
"HTML & CSS IS HARD" *ARE
xiaoma 10y ago
Friendly is a mistake. It should be hostile, unforgiving, difficult and hold just enough promise for one to justify continuing. Prepare people for what's ahead.
untilHellbanned 10y ago
Complete beginners don't need flexbox.
rachkovsky 10y ago
I know that black on white is not cool anymore, but a little bit more contrast would benefit the site. Grey on grey is hard to read, I want to wipe the screen cause it seem dusty.
Cowicide 10y ago
Some of the wording seems a bit too advanced to throw on a newbie right away. I would massage the content with a more relatable, visual representation: >HTML is for adding meaning to raw content by marking it up. HTML is the frame of the house. >CSS is for formatting that marked up content. CSS is the interior and exterior design of the house that's intertwined with the HTML framework. >JavaScript is for making that content and formatting interactive. JavaScript is the hardware door hinges, electrical and plumbing of the house that's also intertwined with HTML and CSS. --------- I think graphical content that reinforces the above analogies would go a long way in helping newcomers to more quickly understand and remember the basic concepts.

412 points by interneting 10y ago

exprA 10y ago

HTML, CSS and JavaScript are not hard. What's hard is being able to teach any single person them – that requires many sorts of people skills. The irony is that for people with the right mindset, learning the 3 of them, or programming in general is one of the easiest thing they could do.

jordanlev 10y ago
I disagree... they are hard. The fact that you think they are easy speaks to your own intelligence or "way your brain works" that you are able to grasp it (and/or your persistence/practice over the years of learning it). But try teaching this stuff to people with no experience, and/or people who don't have as analytical a mind as us tech folks and you will quickly discover just how hard it can be. (I recently taught a college class that was an intro to web design / development - suffice to say it really gave me a clearer picture of how far I'd come in my own professional skills over the years... it's easy to forget what it was like before you knew what you know now :)
sixQuarks 10y ago
A big problem with me learning to code is my terrible memory. I get the concepts and logic of code, but it's frustrating having to re-learn everything over and over again because I can't remember the function name, format, etc. My biggest nightmare is trying to learn another language, I took 7 years of Spanish in school and I literally can't speak a sentence of Spanish.

WA 10y ago

The graphics are nice, but I think you can polish the writing. 1. It took me probably 30 seconds to understand that the text blocks on the start page are summaries of what's in every chapter. Try to read this without knowing that this website is an online book: > The purpose of HTML, CSS, and JavaScript, the difference between frameworks and languages, and finding your way around a basic website project with Atom. This doesn't make any sense if you don't know that it describes a chapter in a book. 2. Simplify sentences. Cut adjectives. Shorten. It reads academic. Examples: > Our goal is to make it as easy as possible for complete beginners to become professional web developers, so if you’ve never written a line of HTML or CSS, but you’re contemplating a career shift, grab a cup of coffee, take a seat, and let’s get to work. This is a single sentence. It's hard to understand. Your readers aren't all native Americans. This could be turned into: -> This guide helps you to become a professional web developer, even if you've never written a single line of HTML or CSS. > They’re very closely related, but they’re also designed for very specific tasks. Understanding how they interact will go a long way towards becoming a web developer. Ctrl + F "very": Too often. A good editor might reduce the text by 25-50%. My secret tip is the Material Design Writing guide [1]. It shows how to write for apps. With apps, the user needs to get a task done as fast and efficient as possible. Write that way. [1] https://material.io/guidelines/style/writing.html https://material.io/guidelines/style/writing.html

hbharadwaj 10y ago
Are there guides similar to Material Design that you would recommend to an app developer? Looking for Dos and Don'ts. Appreciate any help in this direction!
- WA 10y ago
  Don't overthink it. The material design guidelines teach you what to look out for. The book On Writing Well helps. But most rules are simple enough: Write in the active voice, cut unnecessary words, write, then edit and revise. It's a process, it needs practice, too ;)
mcintyre1994 10y ago
To add on to point 1 here, those sentence fragments should be links (and visually distinguished as them). Currently they're not, there's just the read more link - and if you go there and ctrl-f for any of the fragments (say "purpose", "frameworks and" or "basic website" you'll get nothing. So it's impossible to go from "that part of that chapter sounds good" to reading about it unless you know enough about the topic to ctrl-f a different term.
bshimmin 10y ago
Or write in a way that's light, friendly, and engaging. Not everyone wants something that's "fast and efficient" and information-dense, perhaps especially not people taking a beginner's course on HTML and CSS.
- wruza 10y ago
  That's how I filter out turorials. If it is not fast and efficient, or involves weak analogies and too playful with terms, then I simply skip them until one is really factful, concise and to the point. I am noob, not stupid. Edit: typo
  - wruza 10y ago
    Otoh, after reading two chapters it seems that this turorial does not involve that. It is pretty good and thorough for complete beginners.

onion2k 10y ago

I think it's really good. I often wonder how people learn to make websites these days - I made my first 20 years ago when it was all a lot more straightforward. Even a basic site needs a huge amount groundwork now. The only comments I have is that it's technically "web design" rather than "web development", and there's nothing about taking the work the user has done and putting it on a server somewhere so other people can see it. It'd be a shame for someone to work through the whole thing and not have a working website at the end. Awesome work.

tbranyen 10y ago
Nothing had changed in the web stack that would prevent someone from building a webpage the same way as 20 years ago. Text editor and a browser...
- CaptSpify 10y ago
  The tutorials have. I agree with you, the same things I learned 10 years ago are still relevant. But every tutorial out there now basically preaches that you need to learn $new_hot_language, and $new_hot_framework. For a beginner that doesn't know any better, it can sound like those are necessary.
- jordanlev 10y ago
  This is true but misleading. You could make a similar statement about any field where technology improves over time. For example, "nothing has changed in the manufacturing process that would prevent someone from building an automobile the same way as 60 years ago" -- sure someone could build it that way, but it doesn't mean it would be a successful product compared to other things currently on the market. And I am not talking about using different frameworks / compiled languages / etc... I'm talking about the improved techniques we've developed over the years combined with new features in browsers, such as: * HTML5 vs. HTML4 (streamlined and more consistent syntax in a lot of places) * Float-based grid systems for layout * Flexbox(!) for alignment * media queries and picture/srcset for responsive design (heck, the whole concept of responsive design) * web fonts (not being limited to the dozen or so that are available through the OS only) * BEM methodology (having a modular mindset about styling components, combined with avoiding specificity issues by just using a class for everything) ...and that's just plain old HTML and CSS... don't even get me started about javascript (even just JS/ES5!)

tangue 10y ago

It's pretty cool,even on tricky subject like responsive images the content stays accessible. I hope he'll continue with js, filling the gap between codecademy and "first let's npm install webpack babel and gulp"

sddfd 10y ago

This is awesome, thanks! I've updated my personal homepage just a few days ago, and it was difficult to google the simplest way to make the layout responsive. This was, because answers often involved adding some overbloated framework to my homepage that was supposed to solve all problems. After two days of googling arround I arrived at very simple HTML + CSS, like you are describing, and did not need kilobytes of "CSS frameworks". The same applies to Javascript, and it is even worse there. People are using big, big frameworks everywhere, and I wonder if it would not be much easier to do it in plain Javascript. On stackoverflow it is really difficult to find an answer that does not require at least jquery. Are people aware of how to do things in plain javascript, and choosing the frameworks deliberately?

Yan_Coutinho 10y ago

Good! I also really like this one about webdev in HTML5: https://www.liveedu.tv/elijahwass99/videos/REABM-html5-coding-a-modern-website-4 https://www.liveedu.tv/elijahwass99/videos/REABM-html5-codin...

nthot 10y ago

The site appears to be broken for internet explorer 11. I am not able to follow any links.

jordanlev 10y ago
Yeah, looks like he's got some crazy z-index on the body tag that is causing the problem. If only there were some kind of CSS tutorial he could read to learn about this ;)
- interneting 10y ago
  Next tutorial will be "Cross-Browser Testing Is Hard" ;)
interneting 10y ago
Author here. Correct! Thanks for letting me know. I believe this has been fixed (if not, please let me know again).
- nthot 10y ago
  It's working for me now. Thank you!

jordanlev 10y ago

This is absolutely fantastic! I recently taught some "intro to web design / development" classes to college students (mostly designers, so coming to it more from a creative perspective as opposed to "coders at heart"), and this is the "textbook" I wish I had had then! The order that concepts are introduced is perfect, and I think the decisions made about what to explain vs. what to ignore are spot on. When I got to the part with hr and br tags, I was thinking to myself "tsk tsk, the closing slashes are unnecessary"... then the next paragraph explains how they're unnecessary but the rationale for using them is a good idea (in the context of learning). I also very much appreciate that it's strictly HTML and CSS and doesn't start off with all the extra mental overhead of build tools, compiled languages, server setups, etc. Really well done!

drops 10y ago

I think it would be more fair to call this "HTML & CSS" tutorial than a "web development" one.

josephjrobison 10y ago

Very awesome, look forward to digging in. As a digital marketer primarily, I've self-taught myself enough to be fairly proficient at HTML and CSS. The thorn in my side has always been javascript, which I've started and stopped many times. Look forward to seeing your lessons on javascript!

nik736 10y ago

Looks good but the scrolling is really weird and laggy for me.

interneting 10y ago
Browser and OS?
- throw0213 10y ago
  It's laggy for me too. FF 45 on Debian.
- nik736 10y ago
  Safari 10 on El Cap

heymijo 10y ago

Thank you for this. No specific critiques but I thought I'd give you some context about why this tutorial is a help to me. The last time I built a web page was probably 2001 and the fanciest it got was frames in Frontpage. Prior to that it was all html in notepad. I do not program. I am however, trying to get a website up for a new education venture I'm building. I'm using a Bootstrap framework. There's enough old stuff in there that I can figure out how to edit it, but also enough new stuff to throw me for some loops. A lot of the tutorials I've found to explain elements are either too simple or too complex. Your tutorial seems to be the sweet spot. I flipped to the part about responsive images and it answered some previously unanswered questions I harbored. When this post hit[0] HN awhile back I got excited by the template but I couldn't figure out how to edit important parts of it because it used SVG images. I didn't know what SVG was or if/how to edit/replace them. Your tutorial is the first simple explanation I've seen regarding SVGs and their place/purpose in the responsive image landscape. Much appreciated as skimming your site has already been helpful. [0] https://news.ycombinator.com/item?id=13126228 https://news.ycombinator.com/item?id=13126228

myfonj 10y ago

I can hardly judge, but that "Edit Here" "Reload Here" concept, being necessary to understand at first, seems not as necessary to keep after the point reader grasps the fact "this is source file and that is it rendered appearance". Live preview like complex Thimble [1] or simple Scratchpad [2] or Dabblet [3] seems to be far more convenient for exploring fundaments of HTML / CSS, especially for beginners. In fact I have such one "scratchpad" crammed into data:uri and bookmarked and keep regularly using it to quick test almost anything HTML / CSS / XML / SVG / JS related. (I am coder.) [1] https://thimble.mozilla.org/ https://thimble.mozilla.org/ [2] http://scratchpad.io/ http://scratchpad.io/ [3] http://dabblet.com/ http://dabblet.com/

throw0213 10y ago

They do ignore accessibility in both content and the website design itself. It's frustrating to see all those websites that are trying to teach about design, or even offer design services, but with their own websites containing illegible texts, broken layouts, invalid markup, etc. Heck, even those that claim to aim accessibility and validity often fail to achieve any. Just a few examples to demonstrate what I mean: - Grey-on-white color scheme: high brightness, leading to eye strain. - Font sizes and div widths are set in pixels. - Fails validator.w3.org validation. - Light-grey-on-white navigation links: low contrast, leading to barely legible text.

morinted 10y ago

Grammar aside: wouldn't it be internetting?

throwaway2016a 10y ago

How do we know this does not fall under the trap of not actually being friendly but only seeming friendly as viewed from the eyes of an expert / advanced user. Whenever I see these I wonder if they remembered to take someone with no subject matter knowledge and have them attempt to go through it. For all I know this site did. I'm just musing out loud,

jordanlev 10y ago
I've taught intro to web design / development classes before, and based on my experience this tutorial gets it right. (It pretty much follows along with the curriculum I used, although it's much more well-put-together than anything I ever made).

z3t4 10y ago

It's refreshing to see a web-dev guide that doesn't focus on a framework.

catpolice 10y ago

"HTML & CSS IS HARD" *ARE

xiaoma 10y ago

Friendly is a mistake. It should be hostile, unforgiving, difficult and hold just enough promise for one to justify continuing. Prepare people for what's ahead.

untilHellbanned 10y ago

Complete beginners don't need flexbox.

rachkovsky 10y ago

I know that black on white is not cool anymore, but a little bit more contrast would benefit the site. Grey on grey is hard to read, I want to wipe the screen cause it seem dusty.

Cowicide 10y ago

Some of the wording seems a bit too advanced to throw on a newbie right away. I would massage the content with a more relatable, visual representation: >HTML is for adding meaning to raw content by marking it up. HTML is the frame of the house. >CSS is for formatting that marked up content. CSS is the interior and exterior design of the house that's intertwined with the HTML framework. >JavaScript is for making that content and formatting interactive. JavaScript is the hardware door hinges, electrical and plumbing of the house that's also intertwined with HTML and CSS. --------- I think graphical content that reinforces the above analogies would go a long way in helping newcomers to more quickly understand and remember the basic concepts.