Signed in as
Much like Figma, this is going to be a day when students are introduced to a new piece of software: their text editor. Depending on the type of devices your school uses, how your IT department has set things up, and what permissions are available to students with their devices, this could be a difficult day. All we're trying to do is get them to crack open your editor of choice and get something organized and rendered by the end of class.
You need to make some decisions for students, such as which text editor they'll be using. Why? You want to create as uniform of a development experience as possible to keep yourself sane and from having to debug/troubleshoot on different kinds of machines running different software. If you're looking for easy-to-use options that have little set up, consider having all students use a (free) service like replit. Going for a choice like this offers less customization, but shorter time for students getting their first lines of code up and running.
A text editor is a tool used for a specific purpose. We don't often think about the problems common software was built to solve, but it helps to give students an idea of why they're using this special software and what exactly sets it apart. Give them this prompt: We commonly use tools like Word, PowerPoint, and Excel on a daily basis. What specific purpose does each of these serve? What features separate them from each other?
Spend some time discussing their answers, but help them to understand the features within these pieces of software were developed to help users solve certain problems and complete specific tasks. Their text editor was built the same way!
Walk students through setting up their first project. Paces will vary and not everyone will move through uniformly. As such, encourage them to follow along with the video provided in this lesson and help them to troubleshoot if they get stuck. If you're not planning on using VS Code, consider making your own set of tutorial videos specific to your school's dev environment.
Take the formative assessment at the end of class. Work towards mastery.
With our site designed, it's time to turn vision into code. Over the next two weeks, we'll use a slew of tools to create a polished version of our site that runs on desktop and mobile browsers; looks like you envisioned in your design phase; and is scaffolded out with semantic, high-quality HTML.
When developing a website, we'll use a tool called a text editor. In reality, you could open Notepad on Windows or TextEdit on a Mac and write HTML. However, text editors enhance our development experience through a series of features that make development more efficient. Text editors, like Visual Studio Code and Atom are great free options.
These tools are great thanks to features like:
Syntax Highlighting - this makes it easier by highlighting certain keywords and components of our code. Visually, it makes it more efficient to skim through our codebase and see different elements.
Intelligent Code Completion - there are lot of common patterns in development. In fact, programming languages are built on predictability. As such, most text editors offer an option for helping to predict or suggest what should come next as you're writing code.
Snippets - Like the suggestions of code completion, snippets are pieces of code that you commonly reach for; these can be designated to a macro, or series of keystrokes, that will produce a larger block of code. This takes care of what we commonly refer to as boilerplate, or repetitive pieces of code with little, if any, variation.
Extensions - Most editors are, to some degree, open source, meaning their codebase can be extended or edited by end-users. Developers commonly create extensions that aid to make their workflow more efficient or just more enjoyable.
To start our site, it will be helpful to scaffold out our entire project. There are plenty of opinions as how best to organize your files and folders, but the important thing is to actually be organized. Have a plan!
Let's begin by creating a new directory, or folder, that will hold all our site's information.
1+--my_site
Notice how we're using spacing without gaps; this will be important as we want to limit paths to files that have whitespace. Above, we're using a technique called snake-casing.
There's also:
camelCasing where the first word's first letter is lowercase, followed by an uppercase on each new word's first letter.
kabob-casing where we skewer the words together.
PascalCasing where each new word, including the first, utilizes an uppercase.
Different languages have their preferences. However, your choice shouldn't affect the usability of your code. Consistency is important for readability, though.
Now let's add in a few sub-folders and some example files. Note: you don't need all of these! They're just examples. At the very least, make sure to include the assets folder with main.css and the index.html file in the root of your directory.
1+--my_site 2| +--index.html 3| +--about.html 4| +--assets 5| +--main.css 6| +--img 7| +--cool_image.webp
Once we have our structure set up, we can begin writing the skeleton of our site. A great extension baked into Visual Studio Code, and available via an extension to other text editors, is Emmett. With it, you can simply open an HTML file, hit the exclamation point + tab and be given a simple boilerplate for an HTML file! It will produce this:
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Document</title> 8 </head> 9 <body></body> 10</html>
With this we can start writing out the HTML for each of our pages. Inside the head element, be sure to add this line so, in our next lesson, you can reach for you css and make sure it's included in our HTML files.
1<link rel="stylesheet" href="path/to/css_file" />
Once our boilerplate is complete, we can repeat this process for each of the other files in our project. In reality, we can just copy the file, paste it, and rename it to the needed filename, like about.html.
As we write larger and larger HTML documents, the nested structure of our site can be hard to keep organized. One of the most popular extensions in many editors is Prettier. With it, you can set it up to prettify your files on save so they're structured in a uniform and human-readable way.
Our HTML files are easily viewable in the browser. However, as we're developing, we want to be as efficient as possible. A great extension of many editors is called Live Server. This starts a small server that's listening for changes and saves as we work. When we save our work, the changes will automatically be rendered to the browser. This sounds like a small benefit, but once you use it you won't go back!
As you finish this lesson, you'll have built out your personal site's main skeleton and structure. Before moving onto the next piece, our styling, make sure you have a robust site full of the content that you'll eventually want to style.
Client site: Scaffold