Intro to Web Developement [Halloween Edition]

Overview
Basics

HTML
CSS
CSS for positioning
Javascript


Build our spooky app

Design
Finished Code


Browsers
References

What you need

What you need

Requirements:

• Computer (doesn't matter mac/windows/linux/etc.)
• text editor (prefer a code editor like VSCode)

How dope is that? you literally only need a computer and a code editor. The reason why is because in web development, we run/test all of our code in the browser which comes default on every personal computer. In fact, you could probably even use a phone for this (super not recommended though.. do it for the memes)

Soft requirements:

For your IDE (Integrated Developer Environment, aka code editor), would highly recommend VSCode. This is (as of 2024) the industry standard and I'd estimate 90% of web developers in silicon valley use it. I've seen others: webstorm, vi/vim but would say VSCode is probably your choice to start off with.

For browsers, would prefer if you had chrome/firefox (tbh chrome probably better). This is for three main reasons: 1. they have the best developer environment, 2. they have the largest market share (safari is important to test on but their dev ex is not the best) and 3. they have the most support for common web standards.

You can read the browsers section down below for more information.

Overview

Overview

This workshop is geared for folks who are interested in web development (...or even those not interested tbh...) and have little to no experience in this field. Ideally, having taken one or two coding classes may help you pick up the Javascript portion of this but it's doesn't mean it's impossible or anything. What we're gonna do is go over the basic concepts behind each web development language, and use these to build a quick halloween themed application.

Basics

Basics

Phew. Ok let's get started. All web development is done in three language: HTML, CSS, and Javascript (JS). Now, before you get too spooked (no pun intended), it's not really three entire languages you have to learn... each language is like 1/3 of the entire "web development language" and this actually makes things easier. If you take nothing away from this entire workshop, I'd want you to at least remember these quick one line zingers I use:

1. HTML denotes the content and structure of a website.
2. CSS makes things pretty
3. JS provides interactivity to the webpage

That's it. Knowing these will let you know exactly which languages you need to work in to get the job done.

I have a slightly condensed version below but it's probably better to read this instead

HTML

HTML

Once again, HTML (HyperText Markup Language) denotes the content and structure of a website. What does this mean? Essentially, you can think of HTML as a sort of glorified PDF or word document. When I say that HTML denotes the content, that means that whatever we put on the HTML, will show up on the website.

index.html

It will look like this:

I also mentioned that HTML denotes the structure - notice how the text shows up in the exact order as I put in the code. Similarly, only the content I put between the <a> anchor tags (what we use to make a link clickable) has the blue highlight and can be clicked.

With these tags and the ability to place content before, after, and inside, we are able to structure every website design in the world.

CSS

CSS

Of the three web development languages, CSS (Cascading Style Sheets) is the easiest to learn but arguably one of the hardest to master. Remember how I said CSS makes things pretty? All CSS does is that it allows users to change individual styling properties of every item on a webpage. An example of a property here could be the color of the text, or the size of the text, or a border - whether it's a dashed/solid/dotted border, etc.. and the syntax is really simple. Each CSS block is split into two parts: a selector and a set of rules. Each rule can also be broken down into two parts: a property and a value. Let's see it in action:

styles.css

CSS for positioning

CSS for positioning

CSS is used to position items as well as style them. Although you might think, "hey, I thought HTML was supposed to denote structure". Well yes, but HTML only really says what goes first, second, etc. - CSS is what you use to decide if it should be a 1 or 2 column format or maybe a scrollable 1 dimensional list for example. A common practice is to use CSS Flexbox for 1-dimensional positining (think navbars) and CSS Grid for 2D placement (think grid formats) - although personally, I tend to prefer using CSS Grid for all of my positioning.

You should use a dedicated CSS Grid tutorial to learn how to use it but just as an example:

grid example (index.html)

grid example (styles.css)

which results in:

JS

JS

Javascript provides interactivity for our website. It's event driven - meaning that it's usually executed in response to some sort of event (user mouse click, website finishes loading, user hovers over something, etc.). It's capable of interacting with the HTML itself -> dynamicallly adding and removing HTML elements -> and can pull information from the website (user types into an text input, for example).

Build our spooky app

Build our spooky app

Now, let's put all of these together to see what it looks like to build a quick web app.

Design

Design

This isn't part of the coding process but normally you'd want to have some designs prepared - maybe sketch out on a piece of paper or prototype on some design software like Figma.

Our home page is gonna just be a list of horror movies:

and when you click on one of them, you'll get this popup to help read more about it to see if you're interested

Finished Code

Finished Code

The most important thing here if you want to copy and paste and try running it is to add a keys.js file and add the following:

keys.js

where you can find your API key in your dashboard of the TMDB website: https://www.themoviedb.org/settings/api which looks like this once you create a free account:

OR... if you're too lazy to do that, you can just uncomment line 25 in the script.js file and and comment out lines 18-23 which will swap out the API call with a hardcoded response that I saved from making the call earlier.

File Structure
spoopy-app
index.html
styles.css
script.js
keys.js

index.html

styles.css

script.js

Browsers

Browsers

(I added this portion earlier but idr a good place to put it so i'm just leaving it here oops...)

Browsers are lowk one of the bigger pain points of web development. There are like 3 main browsers out there (chrome/firefox/safari) and quite literally, they each have a different rendering engine. What that means is your code can actually run differently if your users have different browsers. Not only that, different browsers have different version and are even different on different devices (yikes!!).

Firefox/Chrome on an iOS device is actually running the same rendering engine as Safari which means that you're actually abiding by Safari limitations. Some browsers like Arc and Brave have some market share but they all use the webkit based rendering engine underneach -> which is known as Chromium and is thus similar to Chrome. There's so much extra information on this that I could probably write up an entire article on this but until you start writing production level applications, you can ignore this part for now.

References

References

Using custom fonts How to find free fonts, import them, and use them in your website.

Basic Javascript events Listening to button clicks, getting user text inputs, getting keyboard events

Quick API call lesson I reference this article earlier but to recap, it teaches you how I ended with the code for that fetch call to get data from an online resource like an API.

Host your website Once you're done with your website, learn how to put it online for everyone to see for free!