Introduction to Web Development (2018)

On a related note, CSS is indeed harder than most think. That being said, I’ve been using CSS going on 20 years now and have seen a lot trends cone and go. One current trend is that there seems to be a lot of unnecessary complexity. SCSS, for example, is indeed powerful, but most sites and web apps I’ve worked on don’t need it and could basically have the entire component-based layout structure rewritten with a single, efficient, well-organized standard CSS file that doesn’t need to be built from 30-odd separate SCSS files. The same goes for so-called transpiled Javascript “languages” such as Coffeescript and Typescript. These, for the most part, add unnecessary layers of abstraction and complexity, making it far more difficult to debug. By using these abstractions, we developers are also doing ourselves a big disfavor because we are often not learning the underlying technology that the browser actually understands. Of course I get that there are domain-specific problems that these tools are trying to solve, but they are often inappropriately employed simply because they’re trendy. With some apps I’ve worked on, it’s anbalagous to using a farm tractor when all you really needed was a lawnmower.

>Maybe an unfair criticism given it's "introductory"... but I'd urge anyone who seeks a better grasp of the power of CSS to look instead to the axioms and layout examples on https://every-layout.dev for its much more rigorous, up-to-date, "first-principles"-based, expert treatment of this thorny subject.

Yes, https://every-layout.dev is eye-opening in terms of taking advantage of the power of CSS and using it as it was intended vs. trying to turn into… something else entirely.

Highly recommended.

While I agree that stating opinions as obvious best practices is problematic at any level, I do appreciate a lot that this guide seems (I only skimmed it) to keep things basic and to the essentials.

From a lot of resources floating around and talking to people interested in getting into web development, I feel that the entry-level tooling and techniques you supposedly need to know has gotten like 10x more complex compared to 10 years ago, whereas I'm not convinced that the majority of people is solving significantly harder problems.

Don't get me wrong, most of the modern tooling and techniques are immensely helpful for aspects that were a massive pain in the past, but they can also create a at least perceived unnecessarily high barrier of entry into the field. E.g. I had absolute beginners asking me questions about problems with their docker setup, errors in their build chain or their confusions with things like redux, etc.

> Some of the opinions reflected in the linked materials are presented as if they were obvious best practices, statements like "never do X". While it may be initially helpful to beginners for someone to provide guidance in such absolute terms, it can also lead to adoption of cargo-cult approaches and impede deeper understanding and growth.

I don't think you need to worry about the likelihood of anyone doing web development, even (especially) as a student, losing sight of the fact that there are a thousand different ways to do anything and no definitive best practices.

Thanks, I just forwarded all of this over to a family member who is currently trying to learn web development!

I am currently trying to improve my web development skills and this is helping a lot. Thanks

I’m your biggest fan!

The placepuppy images on basic-html are dead, I think.

I would say it’s a better opportunity to encourage users to use the corresponding language documentation to help ensure more accurate understanding.

Excluding privacy, political and philosophical concerns, why should I not use Google? It’s vastly superior to the alternatives.

Do you mind giving examples of what type of sites apps have gotten easy to build?

Something like Stackoverflow easy to build these days? What about marketplaces?

I’m still intimidated by webpages when I “Inspect” them with browser tools.

CSS especially looks a mess to me and it puts me off from learning web development.

Any user interface is simply a combination of smaller components.

For example, using your basic HTML/CSS skills, you can create a button. Then, create an input field. Then, put those together in a div and use a few lines of flexbox layout css to arrange the two pieces. Maybe you want something below it, which responds to what you input? Create another div below this input/button div, and then put this whole thing in another div to contain it all.

Try thinking of user interfaces in terms of rows and columns. More complex user interfaces are simply rows of columns of rows of columns! Start with small, basic pieces and put them together.

On any given *nix system that's current today, `vi` is a symlink to `vim`.

You can check yourself with `ls -l $(which vi)` in bash.