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!
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.
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."
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.
[+] [-] have_faith|7 years ago|reply
> 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.
[+] [-] jimcsharp|7 years ago|reply
That's what I think of when I read 'complete beginner' - and people seem to shy away from those very important tooling concepts.
[+] [-] jonmb|7 years ago|reply
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!
[+] [-] zichy|7 years ago|reply
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.
[+] [-] exodust|7 years ago|reply
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.
[+] [-] Rzor|7 years ago|reply
¹ https://cyberneets.neocities.org/
[+] [-] exabrial|7 years ago|reply
[+] [-] tomelders|7 years ago|reply
[+] [-] Blackstone4|7 years ago|reply
I did the 1st version of the course and it was amazing.
[+] [-] lurcio|7 years ago|reply
[+] [-] lprd|7 years ago|reply
[+] [-] kristerv|7 years ago|reply
[+] [-] FuckOffNeemo|7 years ago|reply
Gorgeous looking site. I really appreciate the feel of the site, stands out in a non-obnoxious way and is strikingly unique.
[+] [-] Numberwang|7 years ago|reply
[+] [-] jfreax|7 years ago|reply
[+] [-] praveenkumar31|7 years ago|reply
[deleted]