

Ask HN: Online resources for beginner web dev/design - antoko

My stepson (19, no college) is going to explore web development and design.  He doesn&#x27;t have any prior experience.  I&#x27;m looking for free online resources for him to get some exposure.  I was thinking html,css,jQuery on codecademy to start with, and then introducing JavaScript.  What else is out there?  Is there anything similar for the design side of things?
======
briandrum
For a free, high quality introduction to HTML and CSS, take a look at
[http://learn.shayhowe.com](http://learn.shayhowe.com).

A few others I’m aware of but less familiar with:

[http://tutorials.codebar.io](http://tutorials.codebar.io)
[http://howtocodeinhtml.com](http://howtocodeinhtml.com)
[http://learnlayout.com](http://learnlayout.com)

~~~
antoko
Thanks, some nice additional resources, the advanced shayhowe lessons look
good for explaining the concepts around bootstrap which will be useful for a
novice rather than just diving straight into it.

------
lollipop25
A good place for documentation is MDN (Mozilla Developer Network)
[https://developer.mozilla.org/en-
US/docs/Web](https://developer.mozilla.org/en-US/docs/Web). They have
extensive documentation with regards to web technologies. I suggest he read up
about HTML first, getting the first few basic elements on the page. Then he
can move on to CSS to style up the page.

At this point, you can practically build basic webpages with just HTML and
CSS. From here, you can take 2 paths: A graphics designer or a front-end
developer.

A graphics designer leans more to design rather than building apps. This
requires a basic of jQuery, but mastery of Photoshop. A good place to learn is
reading articles from Smashing Magazine
[http://www.smashingmagazine.com/](http://www.smashingmagazine.com/)

A front-end developer leans more to app-building rather than design. This
requires knowledge of JavaScript libraries and best practices. For this,
select your basic set of frameworks and master them. Suggestions range from
jQuery, Bootstrap, to full-fledged frameworks like Ember and Angular.

~~~
antoko
Thanks for the smashing magazine link, should be worth exploring. While the
MDN resources are great I was looking for more interactive tutorials. I'm
hoping the gameification format used by codecademy will pull him in. Experince
tells me his enthusiasm is inversely proportional to my own, so I'm hoping he
can catch the bug without me having to walk through it with him.

~~~
lollipop25
You can provide him an IDE setup to give the errors. Sublime Text can be set
up with plugins that provide immediate feedback about code errors. Just select
a few for HTML, for CSS and for JS.

As for the gamification, [https://codecombat.com/](https://codecombat.com/)

------
AJAr
You can check out Treehouse. It's not free, but a great value for the money
since you get access to their full library.

[http://teamtreehouse.com/tracks](http://teamtreehouse.com/tracks)

~~~
antoko
Thanks, this looks good, and it is close enough to free, I was just trying to
avoid 12 week immersion code schools for $1000s. That may be an option later
but just testing the waters first.

~~~
joshschreuder
CodeSchool ([http://codeschool.com/](http://codeschool.com/)) is another
similar one to Team Treehouse.

Their HTML / CSS ones are paid, but they have a free Javascript intro one:
[https://www.codeschool.com/courses/javascript-road-trip-
part...](https://www.codeschool.com/courses/javascript-road-trip-part-1)

~~~
antoko
Thanks, this looks pretty similar to codecademy, have you done the courses?
Any reason in particular to choose this over codecademy? I guess he can try
the free ones and see if he finds additional value.

~~~
joshschreuder
I have done a number of the CodeSchool ones, they are a video tutorial
followed by an interactive code editor thing like Codecademy.

The difference is that Codecademy doesn't have the video beforehand (you read
the instructions and do the exercise), vs. CodeSchool which gives a bit more
of an in-depth explanation then you do the exercise.

I guess it comes down to which method of learning your stepson prefers.

------
tmuir
I really like www.w3schools.com They go through HTML, CSS, JS, JQuery, and a
ton of other stuff. I'm sure they're not the only site that does this, but I
found the "Try it Yourself" feature to be extremely helpful. Every single
concept has an built in editor with example code/markup, so you can see it in
action, change it, break it, whatever.

