Getting Started

This post outlines the steps to take to get a basic web site project ready to do. These are the things you do BEFORE you start writing HTML and CSS. You should also do these AFTER you have created a project brief with a sitemap and wireframes so you know what you’re going to make.

Git Repository

For our projects we will use Git as our version control system and GitHub will help to keep an online backup and deploy our site on the web. There are two ways to create a Git Repository that is linked to a remote Git Repository on GitHub.

Create a GitHub Repository First

1. Go to GitHub.com. Make sure you’re logged in.
2. Click the + sign at the top of the page to create a new repository.
3. Give the repository a name. For projects that you will deploy as github pages keep the name short and to the point. For example “portfolio” and NOT “my MMP 350 portfolio project”
4. Check the “add a Readme” box (if there are no files in your repository you won’t be able to clone it.
   1. If this is a project that will have personal content that you don’t want other people using DON’T click to add a license.
5. Click to finish creating a repository
6. Clone the repository. There are two ways
   1. Do it all through the terminal: some instructions from GitHub.
   2. Copy the repository clone link and use a more visual VSCode process: my Miro on Git Clone and Fork covers this in more detail

Create Your Folder and Files First

1. Create a folder on your computer for your files. Make sure to name it like you would name your repository on GitHub. For projects that you will deploy as github pages keep the name short and to the point. For example “portfolio” and NOT “my MMP 350 portfolio project”
   1. Note, you will need at least one file in the repository in order to publish it.
2. Click on the Source Control Icon
3. Click on the Publish Repository to GitHub button
4. It ask you for a name with your folder name already there. Change that to change the name (I suggest you don’t so the folder is the same name on your computer and GitHub).
5. Click Publish to GitHub public repository. If it’s not public then you won’t be able to publish with GitHub Pages or Netlify.

That’s it. You will also get a prompt to open the GitHub repository you just created which you can do to double check.

Here’s a video showing how to do the Folder and Files First method: view on Dropbox.

Folder Structure

All of your project files should be in one folder (you can and should have sub-folders inside of it). For the Responsive Site project I am requiring the following structure:

• main-project-folder
  • css folder
    • all .css files inside
  • js folder
    • all JavaScript files inside (you can leave out if no js files)
  • images folder
    • all image files inside
  • index.html (all projects need this)
  • all other .html files at the same level as the index.html

Here is a visual example

For the Eleventy project on Netlify we will use a different structure but still have one folder for everything.