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.
The Web, from scratch
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)
To the github
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 ...
Teaching afresh
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.
Barely scratching the surface
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.
Continue reading about Webdevs, you have no idea how much you know
Semantically similar articles hand-picked by GPT-4
- WebPutty will make your CSS cry virgin unicorn tears of awesome
- Skype does not an IDE make
- The web moves fast, how do you keep up?
- Freelance teaching is great, or why C/Java/etc. are horrible teaching tools
- Why everything must change every five years
Learned something new?
Read more Software Engineering Lessons from Production
I write articles with real insight into the career and skills of a modern software engineer. "Raw and honest from the heart!" as one reader described them. Fueled by lessons learned over 20 years of building production code for side-projects, small businesses, and hyper growth startups. Both successful and not.
Subscribe below 👇
Software Engineering Lessons from Production
Join Swizec's Newsletter and get insightful emails 💌 on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.
"Man, love your simple writing! Yours is the only newsletter I open 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. 👌"
Have a burning question that you think I can answer? Hit me up on twitter and I'll do my best.
Who am I and who do I help? I'm Swizec Teller and I turn coders into engineers with "Raw and honest from the heart!" writing. No bullshit. Real insights into the career and skills of a modern software engineer.
Want to become a true senior engineer? Take ownership, have autonomy, and be a force multiplier on your team. The Senior Engineer Mindset ebook can help 👉 swizec.com/senior-mindset. These are the shifts in mindset that unlocked my career.
Curious about Serverless and the modern backend? Check out Serverless Handbook, for frontend engineers 👉 ServerlessHandbook.dev
Want to Stop copy pasting D3 examples and create data visualizations of your own? Learn how to build scalable dataviz React components your whole team can understand with React for Data Visualization
Want to get my best emails on JavaScript, React, Serverless, Fullstack Web, or Indie Hacking? Check out swizec.com/collections
Did someone amazing share this letter with you? Wonderful! You can sign up for my weekly letters for software engineers on their path to greatness, here: swizec.com/blog
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 ❤️