HTML & CSS Blog Setup

Learning Competencies

By the end of this primer, you should be able to:

  • Understand the purpose of your blog
  • Add a blog directory with template HTML
  • Link your CSS file to your HTML file

Summary

This sprint is about building your blog using HTML and CSS while honing your GitHub and command line skills. You'll be learning HTML and CSS through online resources and applying what you learn to your blog website.

Time Box

ActivityTime
Setup40 minutes
Reflect10 minutes

Overview

In the last sprint, you set up your GitHub Pages blog (USERNAME.github.io). You'll be expanding this with HTML, CSS and JavaScript as you apply your learning throughout the sprints.

Your blog is a practical way to apply your learning and it will go towards your Foundations assessment. Take special note that you will not be judged on your design application. We don't mind what your blog looks like, but rather:

  • how you engaged with the material
  • the quality of your reflections
  • how you identified obstacles and overcame them
  • if you can demonstrate an understanding of the concepts and learning objectives; and
  • how frequently you engaged and staged commits.

What your Blog is: A space where you demonstrate your skills in problem-solving and reflections.

What your Blog is not: A fancy looking, perfectly put together interface.

We will, however, introduce you to the important aspects of design thinking and hope that you can incorporate those into your blog.

Throughout the sprints, you'll be presented with many ways to learn HTML, CSS, and JS building blocks.

Some of the resources we point you towards will be media-rich with audio and video. Others, like freeCodeCamp, will look more like a code editor and terminal window.

This is your journey, and it is up to you to discern how you learn best.

Our role is to help facilitate your critical thinking: in other words, help you identify and take ownership for where your knowledge gaps are and to assist you in figuring out how to fill those gaps. In web development, your problem-solving skillset is your greatest asset. As a result of this method, the step-by-step instructions (like those below) will become intentionally less detailed as you move through the curriculum.

In all instances, follow the timeboxing prompts, attend the Homegroups/check-ins, keep to the learning objectives, and reflect.

Introduction

  • In the previous challenge, you started a GitHub pages repository: USERNAME.github.io.
  • In this exercise you will create a blog directory/folder in your repository.
  • Each sprint, inside the blog folder, you will create a new blog post using HTML, CSS, and JavaScript.
  • Blogs will follow the naming convention topic-name.html e.g. identity-values.html and javascript-basics.html.

Add HTML

This step adds an HTML template as a placeholder.

Pro-tip-1: You can create many common file types (e.g. .html, .css) the same way you create .txt and .md files (hint: touch).

Pro-tip-2: If adding a new file to a new directory, remember to navigate INTO new file directory after making it.

  1. Navigate to the directory where you saved your USERNAME.github.io repo
  2. Inside of the USERNAME.github.io directory, create a new directory called blog (hint: mkdir)
  3. Inside of the blog directory, create a file te-houtaewa-template.html (hint: touch).
  4. Open te-houtaewa-template.html in your code editor (hint code)
  5. Follow this link, then copy and paste the template contents into te-houtaewa-template.html.
  6. Add and commit your changes with a good commit message
  7. Push your changes
  8. Visit your page on your web browser USERNAME.github.io/blog/te-houtaewa-template.html

Add CSS

This step setups the directory structure for your CSS.

  1. Navigate to the directory where you saved your USERNAME.github.io repo
  2. Inside of the USERNAME.github.io directory, create a new directory named styles
  3. Inside of the styles directory, create a new file named main.css (this is a standard naming convention, almost all websites have a file named main.css).

Link HTML and CSS

Each HTML file needs to be explicitly linked to a CSS file. In this step, you'll remove the placeholder link in your HTML file and link the main.css file you just created.

  1. Navigate to your te-houtaewa-template.html file
  2. Replace the placeholder as shown below 
Old
...
<link href="your-stylesheet-link-here.css" rel="stylesheet" type="text/css">
...


New
...
<link href="../styles/main.css" rel="stylesheet" type="text/css">
...

If stuck, This video demo's linking CSS to HTML at 5.08

Opening Your Changes in a Browser

You don't have to push your changes to GitHub to see how the changes you've made in your file would look in the browser. You can open the HTML file, and your local copy will show in your browser so you can check it out before you push it and make it go live. To do this, run npx vite, and visit http://localhost:5173/ in your browser.

GitHub

Stage, commit, and push your work to GitHub. Then go to your USERNAME.github.io repo and double check it has the structure shown below. If it doesn't, you'll need to change it so it does:

diagram of blog set up file and folder structure

Reflect

Use the terminal to navigate to your my-reflections-sprint-2 file and add your reflections from this challenge. The questions are under the heading Your Blog.

Stage, commit and push to GitHub.

Previous
Tech
Next
Learn HTML & CSS