8 ms·

Friendly web development tutorials for complete beginners

88 points by ssijak 8y ago

praveenkumar31 8y ago
wonderful
exabrial 8y ago
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.
- tomelders 8y ago
  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."
  - xorduna 8y ago
    Give the learner some project he might be interested in. Some website he would like to see online.
- lurcio 8y ago
  perhaps these: https://javascript.info https://javascript.info http://www.learn-js.org http://www.learn-js.org http://jsforcats.com http://jsforcats.com
- Blackstone4 8y ago
  If open to JS/React, check out this course on Udemy: https://www.udemy.com/react-2nd-edition/ https://www.udemy.com/react-2nd-edition/ I did the 1st version of the course and it was amazing.
Numberwang 8y ago
Looks good. Does it have chapters on Grid as well as Flexbox?
- jfreax 8y ago
  There is at least a chapter about flexbox -> https://internetingishard.com/html-and-css/flexbox/ https://internetingishard.com/html-and-css/flexbox/
  - Numberwang 8y ago
    Yes thank you. What I meant was does it also have grid? Grid seems to be more useful than flexbox in most cases.
have_faith 8y ago
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.
- jonmb 8y ago
  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!
- jimcsharp 8y ago
  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.
  - volkk 8y ago
    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
lprd 8y ago
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.
kristerv 8y ago
I wonder what motivates creation of this as there are so many materials out there already?
exodust 8y ago
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.
FuckOffNeemo 8y ago
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.
Rzor 8y ago
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/ https://cyberneets.neocities.org/

88 points by ssijak 8y ago

wonderful

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.

tomelders 8y ago
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."
- xorduna 8y ago
  Give the learner some project he might be interested in. Some website he would like to see online.
lurcio 8y ago
perhaps these: https://javascript.info https://javascript.info http://www.learn-js.org http://www.learn-js.org http://jsforcats.com http://jsforcats.com
Blackstone4 8y ago
If open to JS/React, check out this course on Udemy: https://www.udemy.com/react-2nd-edition/ https://www.udemy.com/react-2nd-edition/ I did the 1st version of the course and it was amazing.

Numberwang 8y ago

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

jfreax 8y ago
There is at least a chapter about flexbox -> https://internetingishard.com/html-and-css/flexbox/ https://internetingishard.com/html-and-css/flexbox/
- Numberwang 8y ago
  Yes thank you. What I meant was does it also have grid? Grid seems to be more useful than flexbox in most cases.

have_faith 8y ago

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.

jonmb 8y ago
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!
jimcsharp 8y ago
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.
- volkk 8y ago
  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

lprd 8y ago

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.

kristerv 8y ago

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

exodust 8y ago

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.

FuckOffNeemo 8y ago

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.

Rzor 8y ago

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/ https://cyberneets.neocities.org/