A friendly web development tutorial for complete beginners (2017)(internetingishard.com) |
A friendly web development tutorial for complete beginners (2017)(internetingishard.com) |
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.
I really need to figure this portion out.
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.
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.
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.
I consider this the seperating difference between a good and bad tutorial.
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 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.
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.
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!
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
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.
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.
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..."
And then it's very hard to master. Complex responsive layouts are hard to get right.
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.
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.
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.
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.
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.
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.
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.
Configuring a server may be relatively easy, but not having to is easier.
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 hate to imagine how hard it is for someone who has never typed 'cd' or 'ls' in a terminal.
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!"
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 :)
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.
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...