Friendly web development tutorials for complete beginners | Hacker News Reader

Friendly web development tutorials for complete beginners

internetingishard.com

88 pointsssijak19 comments

I'd be interested in your definition of complete beginner? As I think some of the language could be simplified further. For instance:

> Think of HTML as the abstract text and images behind a web page, CSS as the page that actually gets displayed

Is actually quite a nuanced way of looking at a webpage. What does 'abstract text' mean to an absolute beginner? And it makes CSS sound like what I imagine people intuitively would think HTML is. As in HTML is the content that gets displayed and CSS is what adds colour, structure, design etc. It also sounds like images are HTML, but maybe I'm nitpicking a bit too much.

Regardless, it's a good effort and no doubt a useful resource for the right learner.

I had similar thoughts. Another example: the illustrations on the home page are pretty, but they're using terms like "elements", "selectors", "classes". A true beginner has no idea what these are.

I take it these were just a sample that was taken from one of the lessons, but I wonder if there are better beginner-friendly illustrations to start off with on the landing page.

Just a minor suggestion. Otherwise, this looks like a great resource!

When I was a complete beginner, in childhood, I didn't understand why the code I copied from a random library book into WordPerfect was not 'running'.

That's what I think of when I read 'complete beginner' - and people seem to shy away from those very important tooling concepts.

Exactly. My girlfriend always wonders what i actually do at work (she's a fashion designer) and she can't even comprehend what code is nor how its run.

Common questions include: "So do you just sit there all day and type code?", "would you be able to code facebook?", "Can you please use your code skills and fix the TV? (it was set on a different HDMI input after I finished playing PS4 and forgot to switch it back)"

It's cute, but a complete beginner literally can't even fathom what a computer loosely does inside/how it runs code aside from utter magic

Ah, yes, good ol' could you code facebook.

Exactly what I was thinking.

Another thing: The illustrations are nice to look at, but why not show your readers what the code is actually going look like? Use editable embeds or something like that. Let them play around. That's why Codecademy has a well-balanced learning curve for absolute beginners.

While there's some good basic stuff here, I'm not a fan of the layout. They talk about responsive design, but use a very thin column for the main content, leaving an ocean of blank white space on either side, at least on desktop.

I'm also taking issue with their advice to "disable viewport zoom" for mobile sites, which is not cool. There is no need to disable zooming for your responsive site to load and display correctly. Taking away the user's right to pinch and zoom is an accessibility issue.

If you're learning HTML and CSS, I would suggest you ignore their advice to disable zoom. Your viewport meta tag should be something like <meta name="viewport" content="width=device-width, initial-scale=1" /> but you shouldn't be adding "maximum-scale=1.0" to that, because it prevents pinch and zoom.

As a beginner currently going through this tutorial, grasping the how is vastly less difficult than knowing when to use. I noticed last night that I was spending too much time going through the tutorial (and the examples) without actually practicing what I was learning. I realized that I wasn't exactly sure when to use Flexbox in this simple page¹, or why to use it at all, if I should stick to directly customizing elements or how to divide divs (header, presentation, button). The editor tells me that the universal selector (*) is slow, what should I use then? I want to use best practices, but I have no reference since it seems that CSS has many ways to achieve the same result. Well, I think I'll have to grok it for now.

¹ https://cyberneets.neocities.org/

Anyone have something similar for js/angular? I have a buddy that's extremely motivated (works in the sun all day every day), but wants to change his fortunes to something that's a bit less sweat inducing.

The best advice you can give to someone staring out from scratch is "Don't try to learn programming. It's boring, frustrating, and pointless. Instead, think of something you want to make, and learn how to make that. Start small though."

Give the learner some project he might be interested in. Some website he would like to see online.

perhaps these: https://javascript.info http://www.learn-js.org http://jsforcats.com

If open to JS/React, check out this course on Udemy: https://www.udemy.com/react-2nd-edition/

I did the 1st version of the course and it was amazing.

This looks really neat and well designed. Looks like they only cover HTML and CSS at the moment. I'm curious if they will add some (basic) modern Javascript in the future.

I wonder what motivates creation of this as there are so many materials out there already?

OP, is this your site? Oliver James?

Gorgeous looking site. I really appreciate the feel of the site, stands out in a non-obnoxious way and is strikingly unique.

Looks good. Does it have chapters on Grid as well as Flexbox?

There is at least a chapter about flexbox -> https://internetingishard.com/html-and-css/flexbox/

Yes thank you. What I meant was does it also have grid? Grid seems to be more useful than flexbox in most cases.

Reply on news.ycombinator.com