This site is an interactive presentation for a middle school career day. In it, I present a still-unfinished site and we go through adding some basic HTML, CSS, and JavaScript code to it.
Visit careerday.johnmatu.la for a hosted example of the finished product.
I rely on the website as my presentation. One of my goals is to show how easy it is to start playing around with HTML and CSS, so my site is mostly finished with some gaps to fill.
Since I only have 30 minutes for this presentation plus questions, I have to be restrained in how much content and code I cover. The HTML and CSS covered is very basic stuff—hopefully with enough covered to entice people to learn more. (It feels kind of like the Frontend Cooking Show. 😅)
Just like the presentation, then, there are two directories in this project: an unfinished one for the site that I start out with, and a finished one for what I end up with. The finished one includes extra comments to call out any spots where I had to compromise a bit (so that I wasn’t jumping around files so much).
I use the site to describe a little bit of what I do, how I got to my current professional spot, and how those just starting out can start to build up their own website skills.
All of the subject matter is pretty simple, but only so I can juggle the balance of writing and pasting HTML with describing my career and why I find it exciting. With that said, I’m encouraging the kids who are interested to use the links to learn more on their own.
- Basic HTML tags and how they act as signals for content
- Title with
<h1> - Linking with
<a href="…">tag - Adding a list with
<ul>and<li> - Adding an image with
<img src="…" /> <iframe>to show a simple way to include other HTML content (both my simple “first site” and a simple game)
- Title with
- CSS used for styling in a broad-to-specific way
- Styling links
- Changing the font used
- Simple JavaScript to show interactivity on a page
- Adding a
<button>with itsonclickevent specified in HTML
- Adding a
Reflecting after the fact, I was pretty surprised how much the students already knew about websites and getting content online. (Surprising to see how much becomes common knowledge in 15 years.) This meant that many of the questions were beyond what I expected to discuss. I covered a little bit of CSS and some basic markup, but a lot more was focused around publishing content and understanding the role of WYSIWYG content builders (like Squarespace, Weebly, or Wix).
It might also have been a good idea to show a simpler game that had clearer attributes to share. Granted, this was a late addition into my overall plan, but it was easy to see that the kids were captivated by this. I’m sure having some game development background would especially help this.