A friendly web development tutorial for complete beginners (2017)

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.

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

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.

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.

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?

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.

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.

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.

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

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.

2018 too: https://news.ycombinator.com/item?id=17415270

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

JS is easy, JS ecosystem is not.

Didn't you just prove CSS was hard?