
Introduction to Web Development (2018) - henning
https://btholt.github.io/intro-to-web-dev-v2/
======
chrisweekly
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. The linked materials are also
problematic in their one-sided and outdated perspective on "separation of
concerns", claiming CSS belongs exclusively in external stylesheets. Which
ignores completely the emergence and widespread adoption of modern component-
based architecture. Not just in frameworks like React and Vue, but also
standards like Web Components. 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](https://every-layout.dev) for its much more rigorous, up-to-date,
"first-principles"-based, expert treatment of this thorny subject.

~~~
temporallobe
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.

~~~
tomnipotent
> a single, efficient, well-organized standard CSS

I still haven't seen a single, efficient, well-organized standard CSS file in
20 years, so I think I'll stick to the well-proven SCSS/SASS build pipelines
that add considerably more upside than downside. If you're a paid
professional, there's no excuse to be doing things the "old way" in 2019.

~~~
jachee
There are dozens of them at
[http://www.csszengarden.com](http://www.csszengarden.com).

Enjoy!

~~~
meerita
CSS Zen Garden was, in my opinion, one of the best experiments on web
development to demonstrate the flexibility of development that existed in HTML
and CSS, but not to demonstrate that you would never again need to touch up
your HTML code whatever the project. In 2003 –when this project was born– the
average weight of the CSS files was 6KB. Today (2019) we are at an average of
~500KB, so using the CSS Garden argument card is, in my opinion, wrong. First,
because it never adapts to the reality of developments, second because the
difference in code size required is higher when new development parameters are
taken, based mostly on philosophies such as BEM or others. CSS Garden is an
HTML doc, with just 54 CSS classes, against more than 2000 classes that can be
found in other modern projects.

~~~
shantly
> Today (2019) we are at an average of ~500KB

This. Stuff like this is why the modern web feels so slow and eats absurd
amounts of memory. Think how big that is in memory once it's turned into some
data structure that can be queried & modified by Javascript, and re-
calculated, and consulted again as screen size changes, and so on. And think
how much memory has to be allocated to effect that transformation in the first
place. And cycles burned actually doing it.

Well, that and no-one cares about shipping massive media files with the
initial page anymore (remember thumbnails? Anyone? No?)

And, you know, just _all of Javascript_.

But still. This is a problem.

I think when your CSS passes short-story length you maybe need to re-evaluate
what you're doing. Consider sitting down to write a short story, like a
5,000-10,000 word thing you could sell to a genre mag. It's _not_ all that
short. It's a fuckload of text, actually, if you are facing having to write
it. That's a _lot_ of CSS. So much any sane person would hate to have to sit
down and read it beginning to end. Should be more than enough, even for
complex layouts, even for fancy pages, even for responsive. 500K is almost
half a _Moby Dick_ , for comparison. There's no possible way your team even
knows what most of it does.

~~~
meerita
That's the way it is. I have found examples with CSS that exceed 2MB. That
makes it literally impossible to change the design, maintenance or
understanding of the architecture itself. That's why functionally programming
CSS eliminates all those problems. Almost 2020 and we have not yet evolved to
this style of development.

------
aquilaFiera
Hey friends! This is Brian Holt, the author of course. Finding this on the
front page of HN is an unexpected delight.

Just wanted to let you all know that the accompanying videos for this are free
too[1] (you just have to create an account.)

[1]: [https://frontendmasters.com/courses/web-
development-v2/](https://frontendmasters.com/courses/web-development-v2/)

~~~
burke_holland
I’m your biggest fan!

~~~
filmgirlcw
Suck up. :D

~~~
filmgirlcw
I got downvoted for this. Burke is my worker... Holy is too.

------
filmgirlcw
Hail Holy!

Inside-jokes from the group chat aside, this is very good content. Holy's
videos on Frontend Masters[1] are excellent as well.

[1]: [https://frontendmasters.com/teachers/brian-
holt/](https://frontendmasters.com/teachers/brian-holt/)

------
keithnz
Very minor quibble in the final thoughts... "Google everything. Then Google it
again when you forget it"

Maybe a nice opportunity to break people out of the google bubble and give
other search engine options

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

~~~
bananamerica
On the other hand, Google frequently leads to relevant official documentation.

------
artyomavanesov
The ROI of learning web development has never been higher. With modern-day
frameworks and tools like Firebase anyone with knowledge of javascript can
build apps. Exciting times.

~~~
bigmit37
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.

~~~
overcast
It is a mess, but that's usually because those easy to use frameworks make
them a mess. Big site inevitably are going to be filled with a lot of JS that
for things you're not going to implement anyhow. Start small, build upon
previous knowledge, incrementally.

------
duxup
As a noob I've really enjoyed Frontend Masters courses. Brian's courses are
great, and it sounds cliche but the JavaScript the hard parts by Will Sentence
really changed how I think about how JavaScript actually works.

------
mesaframe
I have gone past the introduction a long time ago. Currently, I am trying very
hard to find a book/video which teaches how to create UI in CSS.

~~~
enhdless
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.

~~~
mesaframe
I'm talking about best practices. I can always create a div hell but I believe
there is an art in creating proper UI using HTML/CSS.

------
mattgerstman
I wish all courses were this thorough! Thanks Mr Holt!

------
zyl1n
I did a quick glance but didn't find a section covering basics of HTTP...
maybe there should be one before AJAX or node.js sections

------
rob_b
“vi Oh boy. Here we go. Type vi index.html. This going to open vim which is an
editor that's all in the command line.”

Not to sound pedantic, but vi is not vim. While vim was designed as vi-
improved, instructing users of vi to use vim direction is not going to be a
complete match and may cause confusion for those not familiar with it.

~~~
jachee
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.

~~~
rob_b
That is not always the case. Clearly, you’ve never encountered “vim: command
not found” but found vi to work without a problem.

~~~
jachee
Not in at _least_ ten years. Except for on BusyBox systems.

~~~
tstrimple
That's the default behavior on Raspbian as well.

------
r3dpony
Wow, it does help a loot!

