A few weeks ago I decided I need a web designer in my close friends circle - someone to slap together designs for my half-baked weekend project ideas.

So I took the nearest person with an eye for design and convinced her she'd be perfect for redesigning my blog. Completely out of her depth (is usually an architecture student), but after two days she learned enough inDesign to produce something we were both happy with.

Even made it all interactive and stuff!

But as every good designer guy who turns a pdf into html+css+js knows, the tough part isn't drawing pretty pictures and making the information architecture work - the hard part is making browsers understand this stuff, possibly in a cross-platform way, with a touch of responsiveness thrown in the mix.

My days of being that guy ended towards the final throes of the War Against Tables for Layout. Back when :after { content: ":" } and :first-child were the state of the art and jQuery was gaining widespread popularity.

I can implement a half-baked frontend, but turning designers' work into code is something I vowed never to do again! Soul crushingly maddening stuff that.

Time to teach my fledgling webdesigner all about html and css.

Until I started teaching @ponywithhiccups I had no idea web development was this complex. It's insane!

"Ok, so you use html for layout and then css styles it"

"Uhm ..."

"Right, well, html is an xml-like markup language; the website is organized into tags that semantically tell the browser how things fit together"

"What's a tag?"

"Oh ... hmm ... it's just this < something>content < /something> thing."

"And what does it do?"

"Well, it tells the browser whether something is a paragraph or a header ... and how things fit together ... and under certain conditions it also tells the browser what something looks like ... unless you have a css reset, then it doesn't ... oh and block elements always break into a new line, whereas inline elements do not ..."

"Bwuh ... what's a css reset?"

"Right ... well, css tells the browser how to render the page. Colours, fonts, even layout"

"But you just said html is for layout"

"Yes, well, css can rearrange that layout completely; html is really more about semantic stuff these days, but it used to be mostly for layout"

"Okay ... then what's an inline or a block element?"

"Oh you know, things like a and span are inline, but divs and headers are blocks. Blocks just mean it breaks into a new line if it needs to."

"Maybe you should just show me ..."

"Okay, just fire up a text editor ... no not notepad ... no, not wordpad either. Right ... what's a good text editor for windows anyway ..."

We settled on notepad++, I've used it before and it's got pretty good syntax highlighting for everything. Didn't want to plunge her into emacs or something :P

"Right, so now you just write some html in here ... oh and I should teach you about source control"

"What's source control?"

"Oh, that's just so you never lose your history, so you can jump back if something gets really messed up."

"Awesome! Wow, developers really think of everything, I wish I used some sort of source control elsewhere"

(I might be embelishing, but that's the gist)

Git is this super simple thing right? Everyone who does any serious work with code can think in branches and pushing and pulling and commiting and merging ... it's second nature. Muscle memory almost.

Turns out this is a pretty damn complicated part of the process.

First you need a github account (you don't, but it's the easiest way to teach a newbie about offsite backups without telling them that's what they are) ... I mean, just teach these freshlings best practices from the get go. No need to explain too many details :)

She got a github account and groked the basics of using git pretty quickly. After every few characters you press ctrl+s, after a unit of work you rescan, stage changes, commit (in a gui) and when something works you push.

Simple stuff.

A few days later I sent her the first pull request - now she knows all about social coding. She understands the value of Github is that people can see what you're doing and pitch in to help when they want to. You have to pull their code to your local repository, then you get to play with merge conflicts and finally push it all back to Github.

She can even use gh-pages!

Although in retrospect, maybe I should have told her she can check out the html locally and doesn't need to update gh-pages every time ...

The best thing about teaching someone all this stuff from scratch, is that she is a completely clean slate. No preconceptions of how code works, no idea that tables used to be for layout, no < font> tag or anything else that is absolutely atrocious.

Here is a designer that will never know the world before html5 and css3, that considers this stuff as normal, not as something new and somewhat scary.

That's a good thing!

Back when I was learning webdev the best advice for using table-less design was display: table-cell; Yup, it was!

Furthermore, I had no-one to teach me cleanly. To tell me about how the web works, that it's a stateless protocol, that you have a frontend and a backend.

Perhaps back then it wasn't even so cleanly separated, MVC backends were still an exciting new technology and AJAX only came into existence when I was already in the game for a few years.

You might think html and css are that simple thing anyone can do ... that they're just something everyone is born with at least a functioning knowledge of.

But here's the truth, that shit is hard. And that's not even getting into nginx servers, caching, http protocols, MVC backends, MVC frontends, databases, event-based stuff, multithreading and so on and on ad nauseum.

The average web developer's brain contains so much knowledge it's absolutely mindboggling! ... and a lot of companies want to pay them peanuts, because hey, that neighbour kid "does websites" and he'd do it for free.

Did you enjoy this article? 👎 👍

Published on March 12th, 2012 in Cascading Style Sheets, Education, Git, HTML, HTML element, JavaScript, jQuery, Notepad++, Text editor, Uncategorized, Web design

Learned something new?

Want to become a high value JavaScript expert? Here's how it works 👇 Leave your email and I'll send you an Interactive Modern JavaScript Cheatsheet 📖right away. After that you'll get thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over my 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths. Start with an interactive cheatsheet 📖 Then get thoughtful letters 💌 on mindsets, tactics, and technical skills for your career. "Man, love your simple writing! Yours is the only email I open from marketers and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. 👌" ~ Ashish Kumar Your Name Your Email Your Address Subscribe & Become an expert 💌 Join over 10,000 engineers just like you already improving their JS careers with my letters, workshops, courses, and talks. ✌️

Have a burning question that you think I can answer? I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

Ready to Stop copy pasting D3 examples and create data visualizations of your own? Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first 💰 on the side with ServerlessReact.Dev

Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com

By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️