A friendly web development tutorial for complete beginners (2017)(internetingishard.com)
internetingishard.com
A friendly web development tutorial for complete beginners (2017)
https://internetingishard.com/
56 comments
I'd personally love a recommendation for a set of basic security guidelines for static websites. Less interested in OWASP stuff and more as you said, hosting-specific issues. This would also be a lot to cover, from using static-site deployment tools like github pages or netlify, to throwing it up on an S3 bucket and routing using Route53, to even for whatever reason configuring a VPS with nginx or apache to serve it out of a directory.
This could further be extended to static sites that want do some authentication, covering which providers are best for that, basic security for using solutions like firebase for hosting and database, etc.
This could further be extended to static sites that want do some authentication, covering which providers are best for that, basic security for using solutions like firebase for hosting and database, etc.
I mean, if you're just doing it to learn, you can use a hosted tutorial like mines here: https://codeorc.com/learn-web-development-by-programming-a-r...
It takes you step by step. Every step of the way, it can automatically sync the example code to a working running example, so you don't have to worry about setup and can just worry about learning.
It takes you step by step. Every step of the way, it can automatically sync the example code to a working running example, so you don't have to worry about setup and can just worry about learning.
All of that could be covered in a seperate course. I think the author could probably conclude this html/css course by saying to learn all of those things you mentioned to put the website online.
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.
I really need to figure this portion out.
If you refer to releasing stuff, then try Netlify to publish a HTML document and static assets online. They made it so simple that you can just drag and drop content from your desktop to the browser and it takes care of the rest.
Part of the problem is that it's become a completely different and independent body of knowledge. And you often have to learn a how a specific hosting stack (AWS, or whatever) works on top of that.
Some people find it really interesting. Personally, my eyes glaze over when I try to learn that stuff. It's literally the most boring stuff in the world to me. Oh, I'm supposed to be able to figure out why our DNS configuration is working because I also wrote some database queries 10 levels up in the stack? No thank you, I'd rather just find a new career.
Some people find it really interesting. Personally, my eyes glaze over when I try to learn that stuff. It's literally the most boring stuff in the world to me. Oh, I'm supposed to be able to figure out why our DNS configuration is working because I also wrote some database queries 10 levels up in the stack? No thank you, I'd rather just find a new career.
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.
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.
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.
How long would you need "to ask yourself how much you're willing to learn about configuring servers"? Because if it's more than a couple of hours, in that time you would already be at least half-way through solving the exercises I suggested.
The parent comment to mine specifically said this issue "limits my personal growth quite a bit. I really need to figure this portion out". I am not aware of any way of figuring this out other than to actually do it - at least once - and in the process of doing, perhaps also do some further reading, depending on how deep one wishes to go.
I never said that in the future you cannot choose one of the easier turn-key solutions, but you will have acquired an idea of how those things work behind the scenes.
The parent comment to mine specifically said this issue "limits my personal growth quite a bit. I really need to figure this portion out". I am not aware of any way of figuring this out other than to actually do it - at least once - and in the process of doing, perhaps also do some further reading, depending on how deep one wishes to go.
I never said that in the future you cannot choose one of the easier turn-key solutions, but you will have acquired an idea of how those things work behind the scenes.
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.
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.
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.
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.
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 :)
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 :)
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.
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.
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...
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...
Every shared host I've ever used would let you just SFTP your files to the server (which, for static or PHP is all you need,) and they all come with their services already configured, and tend to work out of the box. I've only ever had to deal with the CMS when viewing logs and creating email accounts.
Configuring a server may be relatively easy, but not having to is easier.
Configuring a server may be relatively easy, but not having to is easier.
[deleted]
I laughed at this, so I hope it was intended to be sarcastic.
I know how to do those things, but even so, the thought of doing all that just to get a little side project online gives me a sense of dread. It’s not what I would call fun.
I know how to do those things, but even so, the thought of doing all that just to get a little side project online gives me a sense of dread. It’s not what I would call fun.
I have trouble setting up servers and database instances while being a full-time professional developer. At work the DevOps people handle that, but still I should be able to do it on my own.
I hate to imagine how hard it is for someone who has never typed 'cd' or 'ls' in a terminal.
I hate to imagine how hard it is for someone who has never typed 'cd' or 'ls' in a terminal.
Setting up hosting is one of those tasks with way more possible downsides than upsides. The best case scenario is "it works as expected." And there a ton of ways to fall short of that.
File and directory permissions screw people up all the time. If you set them wrong, you can create security holes, keep your site from being served, break SSH logins, break TLS, break git, etc. And online forums are full of bad advice a la "I just set 777 on the directory and all the errors went away!"
File and directory permissions screw people up all the time. If you set them wrong, you can create security holes, keep your site from being served, break SSH logins, break TLS, break git, etc. And online forums are full of bad advice a la "I just set 777 on the directory and all the errors went away!"
Yeah, I'm with you. For static pages, I like gitlab. For other things, there's always google-app-engine or similar services.
> 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.
I consider this the seperating difference between a good and bad tutorial.
I consider this the seperating difference between a good and bad tutorial.
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...), but now I can rather send people to this guide :)
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?
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?
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.
The basics are not what make them hard. But they are vast in how they can be used and combined to achieve various results. Writing semantically correct, accessible, maintainable markup and CSS is websites that often have thousands of elements on a page (a separate problem, but true), made up of components authored in a CMS with who-knows-what nesting ... etc etc it’s hard. CSS favors conciseness over explicitness, so there are many properties that look like they do one thing but actually do another. That’s hard too, you have to learn not to assume the obvious interpretation of a property name is the correct one.
What often happens is developers duct tape complicated user interfaces together using the basics (because CSS and HTML are considered “easy”) and end up painting themselves into a corner where it’s increasing difficult to manage the code and assistive technology has no idea what’s going on.
For me, letting new developers know that good HTML and CSS is hard helps them to respect the huge surface area involved and be patient with themselves when they struggle. Telling people those things are “easy” makes them feel stupid when they can’t get something working right away.
I guess you cover this by saying advanced features require some learning - but I feel like people hit the hard part of CSS very early on when trying to implement basic patterns that are on most websites.
What often happens is developers duct tape complicated user interfaces together using the basics (because CSS and HTML are considered “easy”) and end up painting themselves into a corner where it’s increasing difficult to manage the code and assistive technology has no idea what’s going on.
For me, letting new developers know that good HTML and CSS is hard helps them to respect the huge surface area involved and be patient with themselves when they struggle. Telling people those things are “easy” makes them feel stupid when they can’t get something working right away.
I guess you cover this by saying advanced features require some learning - but I feel like people hit the hard part of CSS very early on when trying to implement basic patterns that are on most websites.
CSS/Html has a lot of tricky corners, where you spend 1 hour to understand why things are not as you expect. My latest issue was with a webpage that when I print it to PDf the tables font was different, the cause was that for some reason the browsers rendered that page in quirks mode(I could not figureout why since I had the correct header) but not when printing to pdf.
In quirks mode the tables font styles except the font family are not cascading from the parent, I did not knew that.
In other case I remember I had to add a min-width:0 to a rule because the layout engine has a large number of paths it can take and adding that rule would push it in the correct path.
The current project I work was not started by me so please don't say I should have used X, I can't now just put a reset css in the project, it could break 100 things all over the place.
Other issue I hit sometimes is aligning checkboxes,radio buttons and labels in all browsers, I get asked to pixel perfect align them, the bootstrap css we use does not do it, so we have to add rules with padding, min-heights and other things to get the result done ,
I use flexbox for the new layouts I create but working with old css that uses float,possition:relative is a pain for me.
I have a solution, have an html6 css4 thing , that is not backward compatible, make it so if you do a stupid thing like have 2 elements with the same ID the page won't render,drop html elements that we do not need. drop all old css crap, like float should work only for floating text and images not for layout, have only 1 way to layout things, 1 way to center things, 1 way to put gap between children... at least the lucky ones that start from zero can have less problems . We still keep the old html5 for compatibility reasons.
In quirks mode the tables font styles except the font family are not cascading from the parent, I did not knew that.
In other case I remember I had to add a min-width:0 to a rule because the layout engine has a large number of paths it can take and adding that rule would push it in the correct path.
The current project I work was not started by me so please don't say I should have used X, I can't now just put a reset css in the project, it could break 100 things all over the place.
Other issue I hit sometimes is aligning checkboxes,radio buttons and labels in all browsers, I get asked to pixel perfect align them, the bootstrap css we use does not do it, so we have to add rules with padding, min-heights and other things to get the result done ,
I use flexbox for the new layouts I create but working with old css that uses float,possition:relative is a pain for me.
I have a solution, have an html6 css4 thing , that is not backward compatible, make it so if you do a stupid thing like have 2 elements with the same ID the page won't render,drop html elements that we do not need. drop all old css crap, like float should work only for floating text and images not for layout, have only 1 way to layout things, 1 way to center things, 1 way to put gap between children... at least the lucky ones that start from zero can have less problems . We still keep the old html5 for compatibility reasons.
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.
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.
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.
>CSS and especially HTML are famous for their simplicity
I think that's accurate as for basic example use cases like writing an HTML file with an H1 and some text along with some minimal styling, but CSS and HTML can get surprisingly complex after a few steps.
It's not at all immediately clear what the advantages or disadvantages of say centering something are via the myriad of methods to do so, what methods work together and what don't, etc.
It's the old tutorial problem that I see all the time. "Yeah this tutorial shows how simple this thing is, but that's not how anyone does it, there's always more..."
I think that's accurate as for basic example use cases like writing an HTML file with an H1 and some text along with some minimal styling, but CSS and HTML can get surprisingly complex after a few steps.
It's not at all immediately clear what the advantages or disadvantages of say centering something are via the myriad of methods to do so, what methods work together and what don't, etc.
It's the old tutorial problem that I see all the time. "Yeah this tutorial shows how simple this thing is, but that's not how anyone does it, there's always more..."
I went to a technical college on Multimedia Development. Classes were anything from video editing to object oriented programming. One of the first programming class was HTML&CSS and the other one was JS. A lot of people would understand JS but get stuck in HTML&CSS. I already knew the basics so I helped a lot of people. Unless you understand it at first sight, it's hard to grok.
And then it's very hard to master. Complex responsive layouts are hard to get right.
And then it's very hard to master. Complex responsive layouts are hard to get right.
All technologies aim to make some certain aspects of things "simple". But all technologies end up being hard once your problem space gets bigger than the space the technology has successfully made simple. And real world situations are always bigger problem spaces than any technology can map to a simple solution.
Sure, HTML and CSS are very simple to get started with, but they get complicated and hard pretty quickly. Just like almost every technology. I think maybe the one class of technologies that this doesn't apply to is academically functional programming languages. I don't think they are simple to get started with. But once you do obtain proficiency with them, the difference between basic and advanced usage isn't as large.
Sure, HTML and CSS are very simple to get started with, but they get complicated and hard pretty quickly. Just like almost every technology. I think maybe the one class of technologies that this doesn't apply to is academically functional programming languages. I don't think they are simple to get started with. But once you do obtain proficiency with them, the difference between basic and advanced usage isn't as large.
2017 Discussion: https://news.ycombinator.com/item?id=13634363
I wish I was a good html programmer...
This is great, it's more than a tutorial, more a comprehensive guide.
My favorite tutorial of all time: https://tutorial.djangogirls.org/en/
Hats off to you for putting up with such brilliancy and simplicity in explanation
Beautiful content. Thanks for sharing.
this is really really newbie friendly and useful, thank you for your contribution to all of us!
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.
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.
JS is easy, JS ecosystem is not.
Good point. But I don't think a complete beginner would use complex JS frameworks.
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.
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.
Yes of course, like in any other programming languages.
I would say JS is simple, but it’s not easy. :)
I love the language - it is earning me a comfortable income and I am very productive in it, but it requires experience and iron code discipline not to let it bite you!
I love the language - it is earning me a comfortable income and I am very productive in it, but it requires experience and iron code discipline not to let it bite you!
Don't you mean that it's easy, but not simple?
No, otherwise I would have written it that way. ;)
Well, then I strongly disagree. Modern JS is very easy to write, but extremely complex because of all the leftover cruft. For example, a beginner can declare a varible with let, const, var or (what could be easier) nothing at all. The resulting scoping rules, however, are anything but simple.
I don't think it's complex at all. The scoping rules are very simple. Block scoping just added another piece.
The difficulty is that there are many simple things like this to learn and to combine in a safe and maintainable manner for anything other than trivial programs. Out of the box, the language does nothing to discourage bad coding practices (some might say it even encourages them). It's the flip-side of being such an accessible language.
It is possible write JS in a way that avoids a lot of the complexity, but it requires experience and discipline and some tooling, just to be sure. The code will look simple but it is not an easy thing to do.
The difficulty is that there are many simple things like this to learn and to combine in a safe and maintainable manner for anything other than trivial programs. Out of the box, the language does nothing to discourage bad coding practices (some might say it even encourages them). It's the flip-side of being such an accessible language.
It is possible write JS in a way that avoids a lot of the complexity, but it requires experience and discipline and some tooling, just to be sure. The code will look simple but it is not an easy thing to do.
Programming is mostly the practice of reading code rather than writing, and this is where the complexity is felt.
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
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
Didn't you just prove CSS was hard?
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.