by dpapathanasiou on 2/6/16, 4:43 PM with 65 comments
Which books and/or online resources would HN recommend for a person with a non-technical background?
by metasean on 2/6/16, 5:14 PM
It (a) assumes no knowledge coming in, (b) provides a linear progression from no knowledge to a portfolio of web applications, (c) lets you move as fast or slow as you want, (d) lets you skip lessons and topics you're already familiar with, and (e) has phenomenal online support. (EDIT: and it's free)
Once your friend has the fundamentals, I'd also suggest checking out http://flukeout.github.io/ and http://flexboxfroggy.com/ . They're fun little games to introduce lots of css and flexbox features.
by jwdunne on 2/6/16, 6:34 PM
- choose a small project. Something that creates discomfort but not crippling anxiety (this will require self-awareness - too small, you won't learn much, too big, you may give up and take a confident hit).
- split the project into parts so you have a bunch of questions. 'How do I build a site in HTML/CSS?' is fairly broad. Perhaps "how do I build a header?" is too. Break it down until you either know how or you can find the answer quickly, i.e 'how do I insert an image?' or 'how do I set a width, background colour and consistent space inside the edges of a box?'
- have someone who you can call upon to answer questions or help convert what you are trying to do into a phrase that uses industry terminology for which you can find ample resources. Forums/IRC can help here - there are some jerks who will kick off about you not using google but many will be understanding if you explain you are new and still need to pick up terminology to make searching easier
- repeat the above endlessly, expanding your skills and integrating new discoveries
An interesting example of this is of someone who built 200 or so Rails projects over a year. I may have got the numbers wrong.
Good books can help get started and reading certainly helps but making the process multi-modal by reading from many sources, listening (such as videos or a local web meet), doing via projects and experiments and seeing your results will be most effective.
I don't have recommendations for books - the only thing about HTML I read in a book was a small section of a cheap internet guide that got me started when I was a kid. This wasn't required when training an apprentice but probably useful.
by sergiotapia on 2/6/16, 4:49 PM
http://htmldog.com/guides/html/beginner/gettingstarted/
He will get context on what HTML is, and how it interacts with the browser. It's much easier to internalize knowledge with this website than it is elsewhere.
by saluki on 2/6/16, 6:34 PM
http://headfirstlabs.com/books/hfhtml/
It will give them a good foundation and confidence to setup a website from scratch.
http://headfirstlabs.com/books/hfhtml/
Have them purchase a domain and setup a simple shared hosting account to publish a website. Shared hosting like hostgator is good enough to start, learn the basics, use FTP (recommend, MAMP/WAMP, sublime text, filezilla).
Then they can move on to more advanced topics.
by jxm262 on 2/6/16, 5:35 PM
It has alot of good resources and a wealth of information. As a seasoned web developer, this is still one of my go-to sites for documentation on web related stuff.
by revorad on 2/6/16, 9:32 PM
1. Check out Jennifer Dewalt's project 180 websites in 180 days - http://jenniferdewalt.com
2. Free Code Camp is quite good (but the focus is more on coding rather than design) - http://www.freecodecamp.com
3. Nathan Barry's books are great - http://nathanbarry.com/books
4. [Plug] - I'm starting a new site for online courses and need beta testers for some HTML and CSS courses which go from scratch to pro level. Happy to give your friend early access for free - http://learnetto.com
by dolguldur on 2/6/16, 5:39 PM
Or is it like with LaTeX that you just start and on-demand google the pieces?
by thomasjbradley on 2/6/16, 6:48 PM
All the tutorials & videos are available there as well as the curriculum and assignments for each week.
by jonhmchan on 2/6/16, 4:52 PM
https://www.bento.io/tracks/front-end - front end track
https://www.bento.io/grid/ - all their tutorial recommendations
They hand-pick some of the best free tutorials for each of the technologies you might need (including the other ones mentioned here) and even have curated tracks for front end.
by mcbetz on 2/6/16, 4:52 PM
Best online resource: http://learn.shayhowe.com/
by superplussed on 2/6/16, 5:28 PM
by AdmiralAsshat on 2/7/16, 1:54 AM
I've read several HTML/CSS books and gone through half a dozen courses. I'm comfortable with your basic HTML/CSS page, have a basic handle on Javascript (assuming I'm not doing anything more complicated than using getElementById to change some attributes on a click), and I can use jQuery/Bootstrap when I need to.
Right now the biggest hump for me is figuring out how to make mobile-friendly sites WITHOUT resorting to a framework. I feel like the vast majority of books or e-courses right now will go the following route:
1) Teach basic HTML/CSS for barebones basic and legacy pages
2) Introduce HTML5 syntax
3) Briefly show how to do a "pure" mobile-friendly page using viewports, flexbox, and media queries.
4) Spend fifteen minutes on the above, and then say, "But that's too much work. So now we're gonna use Bootstrap and never do Step #3 again!"
That above has happened consistently, and it disappoints me. I can do Bootstrap, but frankly I hate writing it. I feel like I have to go five or six div's in deep before I'm actually writing any text that's going to be visible to the end-user.
I'd really like to find more resources on making a mobile-friendly webpage that doesn't rely on Javascript to resize itself. In particular, I've got a few webpages that I built as past projects or coding exercises that I otherwise think look fine, and I'd like to figure out how to easily retro-fit them so that, say, the images don't stretch more than 100% of the screen width without having to rewrite the entire page using jQuery.
Anyone have any suggested resources for building mobile-friendly pure HTML/CSS sites?
by d0m on 2/6/16, 4:51 PM
It's not always the case but for html/css, learning by doing is amazing.
by TheAceOfHearts on 2/6/16, 11:13 PM
I found it very helpful to look at how other people implemented certain components.
by jmagaro88 on 2/6/16, 5:46 PM
by SerLava on 2/7/16, 10:24 AM
The videos spell things out nice and slow, sometimes a bit too slow but you can fast forward if you already know a section.
It's meant for web designers, so I'd imagine it would work for your friend. The site also has courses for a few web programming languages and Wordpress etc.
Anyone else used this?
by baby on 2/6/16, 6:43 PM
Imo it is the best editor you can use to learn HTML and CSS.
by jonesb6 on 2/6/16, 9:41 PM
It is my opinion that this leaves a large gap in ones education, and so supplemental / lower-leveled resources should be sought out if one wants to have an "expert-level" understanding of HTML and CSS.
by petecooper on 2/6/16, 4:50 PM
by imh on 2/6/16, 5:13 PM
by ausjke on 2/6/16, 5:55 PM
by tremendo on 2/6/16, 5:41 PM
by Theodores on 2/6/16, 7:48 PM
There is not a lot of utility in HTML + CSS on its own, unless you want 1996 style web pages that are static.
Knowing HTML is one thing, being able to build something in Wordpress will be far more CV worthy.
by pen2l on 2/6/16, 6:07 PM
don't! Just use boostrap studio ( https://bootstrapstudio.io ) or something (there exist free alternatives if you don't like paying 25 bucks) :)
by fibo on 2/6/16, 6:09 PM
by err4nt on 2/7/16, 4:55 AM
The web is built using three technologies: HTML, CSS, and JavaScript. Literally every other technology that gets used with the web has to interface to one or more of these three, so focus your learning on the foundational technologies. If you try to learn React and Bootstrap and Flux and Grunt and Parse and Node and SASS and everything else you’ll get worn out just trying to get started. By learning the foundational technologies you can quickly adopt any tool you truly need to use, but you could never keep up with all the tools available out there.
Here are some simple rules and attitude changes I adopted in my own discipline that resulted in rapid learning in CSS, then HTML, then JavaScript:
- when building new projects, don’t automatically include bootstrap, or other libraries. Only include what you need AS you need it
- don’t look at other people’s code before trying to write your own solution first, this helps you clarify your needs!
- when you do look at other people’s code, NEVER copy/paste it, read and earn and rewrite what you need
- only ever copy/paste code you have personally written in the past
- don’t be afraid to rewrite code at any time
- code is expendable, and the more code you write the better you will write code
- avoid preprocessors and compilers, they create extra work
- anything that can be built depending on a library can be built more efficiently without it
HTML Questions for Learning:
- can I still do it without that containing <div> as a wrapper?
- is there any HTML like <div style=clear:both></div> trying to solve CSS problems using markup?
- how could this be rewritten without using any classes at all?
- what’s the fewest amount of tags I would need to mark up this design from scratch?
- what’s the most relevant or correct HTML5 tag for this ([and there are a lot of them!) https://developer.mozilla.org/en/docs/Web/HTML/Element
CSS Questions for Learning:
- how could I write this CSS without using any classes at all?
- if I remove this line, does anything break?
- what styles can this element inherit from other CSS rules?
JS Questions for Learning:
- if jQuery does this, what regular JavaScript does jQuery use internally to do this?
- if jQuery didn't exist, what would the solution designed to meet my needs look like?
And in addition to that, all I can say is that the more you do it the better you will get! Create some basic templates and get used to creating throwaway HTML pages to test one thing, or check something. Don’t get invested in and finesse and polish every project or page you build or you’ll have a very shallow level of skill and spend too much time on too few pieces.
One good habit would be to start pushing code to Github. You can view the traffic there, so if people are viewing and using your code you can be motivated by that.
Also, CodePen is like a social front-end coding playground. I would highly recommend you check that out and get the habit of testing and trying things out in the open.
The other last thing I will say is this: simplify! in 2013 my idea of a barebones HTML page was a whole site template like this: https://github.com/tomhodgins/5keleton
By 2015 I had it pared down to this: https://gist.github.com/tomhodgins/c09dd6f9485d77d14e55
But that was still so heavy it was slowing down my learning. Now when I want to test something here’s the HTML snippet I pop into a new text file:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title></title>
<style></style>
</head>
<body>
<script></script>
</body>
</html>
Resources:
- Mozilla Developer Network for CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference, and JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... Reference
- HTML5 Specification for HTML reference: https://www.w3.org/TR/html5
- You Might Not Need jQuery for learning JS: http://youmightnotneedjquery.com
- Ditching jQuery for learning JavaScript basics: http://gomakethings.com/ditching-jquery
by jcoffland on 2/6/16, 8:07 PM
by S4M on 2/6/16, 6:01 PM
by trumbitta2 on 2/10/16, 9:10 AM
by hypertexthero on 2/6/16, 5:18 PM
Here's a blog post I wrote about learning web design: http://hypertexthero.com/logbook/2012/04/web-design-where-to...
by deepakkarki on 2/6/16, 5:16 PM
Plus the website is also open source :)
by chetanahuja on 2/7/16, 1:13 AM
by hanniabu on 2/6/16, 8:35 PM
by walterstucco on 2/6/16, 5:28 PM