Taylor Beseda

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:

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:

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 DynamoDB (8.2ms) to HTML (1.6ms) in 9.9ms