Back to: Create a Static Student Website
Have fun and add some temporary inline CSS in the head of your index.html file
Before we start officially learning the essentials and best practices of HTML and CSS, let’s take a short break and have some fun by quickly adding a little style to the home page.
Warning: in this lesson, we are going to adding CSS directly into the HTML file as a temporary styling exercise. Please note that this is not a recommended practice. While there are several use cases for inline CSS, in this class we are going to eventually place all CSS in its own, separate file (style.css). But not yet. First, let’s take a quick detour and have some fun.
Pre-requisites
This exercise assumes the following:
- You should already have a Github “studentsite” repo (e.g. https://github.com/yourusername/studentsite/) with Github pages already setup.
- You should have already established a local dev environment (e.g. already cloned your Github repo to your local computer. If not, please refer to the previous lessons).
- You should already have a bare-bones, minimal index.html file already created.
Step
1
In VS Code, open up your bare-bones, initial start of the home page (index.html)
Launch your text editor, VS Code, and open your index.html file.
<html>
<head>
<title>John Doe</title>
</head>
<body>
<h2>Hi, I'm John.</h2>
<p>I'm an interface design student. This site is currently under construction. Soon it will contain links to featured portfolio projects and coursework for my classes at KCC within the New Media Arts program.</p>
</body>
</html>Within the head, add opening and closing style tags, then add the following CSS in between them:
<html>
<head>
<title>John Doe</title>
<style>
body {
background: red;
font-family: sans-serif;
text-align: center;
display: grid;
align-content: center;
min-height: 100vh;
}
h1 {
font-size: 48px;
text-transform: uppercase;
margin: 0;
}
p {
color: white;
}
</style>
</head>
...Write One (1) Line of Code at a Time
Do not try to code all of the css at once. Instead, get in the habit of coding one line at a time, hitting save, then viewing your changes locally in the browser. To do this quickly and efficiently, be sure to have two windows/apps open: 1) your editor (VS Code) and 2) your browser (viewing your local index.html file). Then follow the 2-step “one-line-at-a-time” local coding process.
The 2-Step local coding process:
- In VS Code, write one (1) line of code at a time, then hit Save
- In your browser, hit Refresh to see your changes.
- Repeat (go back to step 1).
Repeat this process until you are done. The final code should look like this:
Have fun!
Now is a good time to start experimenting with CSS. Start by changing the colors. Then maybe adjust the text. What else would you like to try to do? Soon, we are going to remove this inline CSS, so for now, why not go for it and play around for a few minutes learning CSS? Don’t worry, you won’t break anything. Have fun!
Step
3
Save (add + commit) your local changes to the source code server (GitHub)
By now you should know the drill: in VS Code, navigate to the “Source Control” (a.k.a. “Git”) tab on the left, then do a stage & commit (with a comment of your change) followed by a push (sync).
The Git Commit + Push-to-Main Process
- Stage & Commit: add a descriptive comment then hit the checkmark icon (the checkmark will save the changes via a combined git “add” + “commit”)
- Push: at the bottom of the interface, hit the sync icon (this sync icon will upload the changes via a git “push”)
- Enter your username and password if/when prompted
Test your live site
Whenever you push changes to your main branch of your GitHub repo (previously named the “master” branch), be sure to test your live site hosted on Github pages. Congratulations! It’s starting to look good. Having fun yet?