
A friendly web development tutorial for complete beginners (2017) - IRLIamOffline
https://internetingishard.com/
======
temporaryvector
This is a very well done and pretty comprehensive tutorial.

However, there are plenty of pretty good basic web development tutorials out
there, and few, if any of them address what I think is crucial. Once you have
all your HTML and CSS and JavaScript all ready to go, how do you actually got
about putting that webpage online the right way for the modern internet,
including basic security best practices.

As the website name says "interneting is hard," but I think the hardest part
for an absolute beginner isn't throwing some HTML but actually getting it
online. Googling around will present one with a lot of choices and advice for
what to do, at various levels of complexity and it's not at all clear what
applies to their particular case. Questions that often need answers are things
like:

\- What's a domain and how to get one? \- What kind of hosting solutions are
there and how do I decide which is right for me? \- How do I point my domain
to my server? \- What's a certificate, do I need one and how do I set one up?
\- How do I make sure I don't get hacked by a script kiddie?

For an absolute beginner web developer, learning HTML and CSS is pretty
accessible, they can write, test and iterate on their machine and they can
pretty much figure what questions to ask of google and quickly see if the
answer works, but when it comes to actually hosting their site, it can be hard
to even know what kind of questions to google, much less how to choose the
correct answer.

If someone were to ask me to recommend then a tutorial for making a website,
I'd probably link to this or one of the other similar tutorials online, but at
this point I'm not sure if there's a similar authoritative, modern "How to get
your website online" tutorial, although I admit I haven't looked all that
hard.

~~~
varrock
This is the crux to my imposter syndrome. Luckily, I work with people that
specialize in this, but it limits my personal growth quite a bit.

I really need to figure this portion out.

~~~
radiator
Yeah, just rent a VPS for a month for $5, install an OS, install a (software)
web server on it, acquire a subdomain for free (or buy your own domain) then
edit the configuration of the web server to respond to requests for different
domains and to enable HTTPS.

~~~
CM30
I think you've explained rather succintly while many new web developers find
the whole hosting thing a confusing mess. The assumption (especially on tech
forums like this one) seems to be that everyone should learn server management
to get a website off the ground.

But that's a bit of a jump to make. Learning how to install a web server or
edit a server's configuration isn't always the most straight forward thing in
the world, and something like Digital Ocean isn't the best solution for
someone who's just starting out and wants to put a few pages online.

So really, my advice for someone wanting to know where to get hosting wouldn't
be to setup a VPS, but to ask yourself how much you're willing to learn about
configuring servers, and to pick a managed solution or simple shared host if
you're not interested in that side of things overall.

~~~
Xelbair
I would disagree - configuring nginx/apache/whatever to just display a static
site is really easy - and honestly - it dosen't take much time.

Honestly, i had more trouble helping my friend with 'simple shared hosting'
CMS to setup his webpage correctly, than with setting up nginx on ubuntu for
the first time.

~~~
taytus
You are missing the point. We are talking about absolute beginners.

They finished their basic markup, now they want to put it online, and you came
up with Nginx and Apache? That is called out of touch.

Step back. Of course, it is easy, of course, there are bazillions of
tutorials, but these people do not know any of that.

I'm a sysadmin, but once, I had no clue about anything and people commenting
like you weren't helpful at all.

~~~
alexashka
If you're an absolute beginner - you don't need things to be online, just
stick with local.

What do you need it to be online for?

If we want people who know web programming, basic server management on a 5$/mo
VPS is something they'll need to learn, sorry.

If people want to dabble, stick with local.

If people want a business result with minimal friction - stick to instagram,
facebook, medium, shopify etc. Existing platforms cover 99% of people's needs
when they think they want a website. They're either trying to sell or promote
something - existing platforms cover those needs very well - a website is
something that fewer and fewer people will ever need to have as time goes on.
This begs the question - what are people learning html/css for? Tell them the
truth - we'll need fewer 'coders' in the next 30 years, either go get a real
computer science degree or look for a different line of work. Just my opinion
of course :)

~~~
ACow_Adonis
I need it to be online because that was the underlying motivation for me
starting the tutorial in the first place, and if you haven't shown me that,
your tutorial failed to address the actual purpose.

Growing up, there was nothing worse than the tutorials or classes that didn't
actually do the thing you wanted: "learn to program a game! *will not actually
be able to have a game anyone can play at end of tutorial".

And since computer science isn't about the web, and university is a pretty bad
place to learn programming, respectfully your advice is the opposite of mine.

~~~
alexashka
University is a bad place to learn programming, if you want free education via
paid internships, a high starting salary and opportunity to work for a giant
corps in the future or even straight out of school.

A tutorial about making games is about as sensible as a tutorial about making
airplanes. Go to school... Tutorials are good for fixing a leaky faucet...

------
lpellis
This looks pretty good. I had a lot of people tell me they get stuck following
most basic tutorials since they all assume some level of basic knowledge that
you forget you even have if you work in the field (stuff like 'where to put
these files', or even that you can view your file in a browser by
doubleclicking it). I even wrote a very basic getting started guide myself
([https://medium.com/@lpellis/getting-started-with-web-
develop...](https://medium.com/@lpellis/getting-started-with-web-
development-85a742e09c84)), but now I can rather send people to this guide :)

~~~
linuxftw
Yes, we used to call these 'basic computer skills' but many people don't have
them.

Do you think you could buy a car that needed new piston rings and replace them
successfully if you've only ever driven a car? Someone can give you the
manual, but you'll be like "What's a torque wrench?" Why should PCs be any
different?

------
ktpsns
I'm not a native speaker and maybe overstress my understanding of "being
hard", but CSS and especially HTML are famous for their simplicity. One can
start basic markupped text with a basic text editor in minutes. Of course any
advanced features require some learning. But I don't like people calling basic
web publishing technologies (which are decades old) to be "hard". Because they
are designed to be simple and that's one reason of their huge success.

~~~
tiborsaas
That got me thinking as well. Is it simple for me because the years of
experience or is it really not that simple?

I would say that HTML and CSS is not hard, but complex. It's not the same
thing. If something is hard, then the learning curve is very shallow but if
it's complex then you can gain solid knowledge bit by bit.

So "html & css is complex" would be a better fitting title.

~~~
rimliu
I think for some people CSS is frontend's "C pointers". For some it clicks for
other it does not. This and also misleading notion that "CSS and HTML are
simple" leads to many developers not actually learning these technologies and
only having an vague understanding. And that's where the problems start.

------
konz
2017 Discussion:
[https://news.ycombinator.com/item?id=13634363](https://news.ycombinator.com/item?id=13634363)

~~~
dang
2018 too:
[https://news.ycombinator.com/item?id=17415270](https://news.ycombinator.com/item?id=17415270)

------
mseidl
I wish I was a good html programmer...

------
manbearpiggy
This is great, it's more than a tutorial, more a comprehensive guide.

------
mushufasa
My favorite tutorial of all time:
[https://tutorial.djangogirls.org/en/](https://tutorial.djangogirls.org/en/)

------
Stevvo
I'd take out the floats section and replace it with grid; floats are
completely obselete

~~~
asciimo
True, but as soon as you get a job involving any legacy HTML, you'll have to
wrestle with them.

------
freakynit
Hats off to you for putting up with such brilliancy and simplicity in
explanation

------
pjmlp
Beautiful content. Thanks for sharing.

------
terrycody
this is really really newbie friendly and useful, thank you for your
contribution to all of us!

------
bibyte
Pretty good website. But why Atom ? A plain text editor would work just as
well and would be even easier.

I am not sure I agree that developing for the web is hard. In fact because it
is so easy JavaScript is so popular right now.

~~~
gbugniot
JS is easy, JS ecosystem is not.

~~~
tonyedgecombe
There are plenty of sharp edges in JavaScript to cut yourself on. For that
reason I'd argue it isn't easy.

Compare it to something like C# where you could start pushing out code on day
one. It might not be pretty or the most efficient code but there won't be any
surprises, it will do what you expect.

~~~
gbugniot
Yes of course, like in any other programming languages.

------
wruza
Html and css are not hard; at least I’m aware of each topic listed at this
site and either know it or know where the good reference is. The problem is
that they are full of legacy, incompatibility, sometimes irrationality, they
lack details and proper isolation.

For one simple example, give body 100vw 100vh and gray, vue #app 100%. You
have just a gray page, right? Pretty trivial. Okay, now add h1 into #app. Page
suddenly gets a vertical scroll of ~10px and a white bar of the same height
appears above body. Why?

Because h1’s margin leaks through two parents up to the document’s top,
document pushes body down that count of pixels, but retains its 100vh height.
That’s completely absurd and entire html/css is drenched with this absurdness.
You cannot find this behavior in layout systems of traditional desktop
frameworks. And this one is just a trivial case leading to a problem. IRL a
production-ready site is a tetris-inspired pack of properties set on
:first/last-childs, 1-2px fixups for baselines, borders, etc that correspond
to required design. Changing parts of it without messing up is so hard that
css guys who I know always try to fix design at the beginning and cringe every
time changes are made. They also try to apply rules only on specific divs and
clear it for childs, trying to isolate effects. And then I read “CSS is
Awesome” in yet another popular blog post and something dies in me at that
moment.

I look forward on things like gss, manual positioning via js, etc. But then
comes seo and tells that he requires wordpress and semantic cr%p and that
google will not give a damn about pages built my way. /rant

~~~
cameronbrown
Didn't you just prove CSS was hard?

