HTML-First Web Dev Learning Path
🌶️ Warning: opinions abound and hardly edited, you may not agree, but discussion welcome.
These are super brief descriptions of things I'd teach to an aspiring web developer. More of a punch list than a descriptive outline; where the end-goal is to create a dynamic web application. I've intentionally left out specific products (like where to publish) and generalized tech choices (like back end languages).
make an HTML page (no CSS)
publish it.
to a static HTML host
with a public URL you can send to friend
now add a .jpg file and an <img>
publish again.
pick a language to generate HTML - I like Node.js and Ruby, but PHP is low overhead
depending on runtime, it is reasonable to add a 3rd party dep for a server (not a framework)
use that language to accept data submitted by a HTML <form> - like a todo item or contact
log the submitted form data to the console
echo that data back as HTML - a round trip confirmation
use the correct HTTP status code: 201
deploy it. this will require an application host; a server
connect to a database from your server - *SQL(ite) is common, low barrier, and free
use the database to create and retrieve data - INSERT and SELECT ops:
- save the form data to the db (Create) - use a primary key
idfor each data record - list the data from the db in the response (Read) - generate HTML in a loop
deploy again. with db connection
this is C and R of CRUD: create. read. update. delete.
add forms to do Update and Delete - hint: you need the row's id
this part isn’t easy and will take time; that’s ok
keep deploying.
add a <style> tag to your HTML
just some CSS niceties for layout and type (no classes)
Now, what might we want browser JS for at this point?
serious Q, not rhetorical. in lieu of new browser interactivity features, add:
- more CSS - try classes,
- mobile layout,
- more dynamic data
What else is missing from the client?
can it be done with improved HTML + styles - ie. transitions and animation
add a search <form> that sends a GET
don’t even use LIKE in the db query - Array.filter results
finally, we can add browser JS to enhance this filter form
inline <script> - form submit "event" with preventDefault()
simply hide elems where innterText doesn't match input value
without JS, it will fall back to our server request
always be deploying.
...
okay, now we can try out:
another data model with [one|many]-to-many relations,
image upload,
authentication1,
authorization (yes, this is different) + admin,
unit tests,
version control,
automatic deployment,
integration tests,
performance analysis
Only once those are done:
Can we do all of CRUD without reloading the page?
modify the DOM based on request result
and we could persist some data locally when offline
after using AJAX, maybe do it with wss
fin.
🔑 The key: deviations from this path are likely and should be explored. Variations can require more of the developer, but not of the user (or their machine, network connection, abilities).
Ideas: serverless deployment, transpiling syntax to differing runtimes, data indexing, worker queues, compression, regional availability, bundling, etc.
Any added requirement of the developer must increase real business value; not just engineering for engineering’s sake.
“Where’s accessibility?”
Glad you asked! It’s a part of the entire exercise. By default, HTML from a server is more readable by people and machines than generating a bunch of markup, yeeting it into the DOM, only to change it again a few ms later. Of course, we can always improve how it’s interpreted and this should be discussed at each stage of learning. If we’re following web standards, the baseline is accessible. That’s part of why it’s a “standard.”
1 This is not easy, resist using a provider and learn about sessions (cookies are easy, I promise) and safely storing password hashes.
from Sanity.io (130.69ms) to HTML (16.41ms)