Week 5: 9/27 + 9/29

This week we will be doing more work on the Portfolios, writing the HTML and CSS to turn your wireframes into actual web pages. We will also talk about design and work on color and typography for the sites. Along the way you will learn some Git basics and work with GitHub.

Before Class: LEARN

DO THIS:

Have a Git Repository set up on your computer for the project. It should include the basic files and folders for your site:

  • index.html file
  • css folder
    • style.css file inside of the css folder
  • images folder
  • js folder

Last week we ended with quickly showing how to create a GitHub repository and clone it on your local computer. It was kind of quick so I’ve made some videos about the process to help with the items above. It’s one long video cut up into some shorter ones so you can view what you need:

  1. Installing VS Code and Git [5m 40s]
    1. If you already have them installed you don’t have to watch this one
  2. Creating a Repository on GitHub and cloning it in VS Code [4m 25s]
  3. Adding basic files and folders [3m 32s]
    1. this shows how to do what’s in the bullet points above.
  4. Starting to convert wireframes to HTML and CSS [11m 49s]
    1. This is optional. We’ll be working on this on Monday, but you can get started ahead of time.

In Class: EXPLORE

DO THIS:

The Join link is the same for all live sessions. There is a registration form and a waiting room to help avoid bombing. View Live Sessions below for more info

Live Sessions

JOIN LIVE SESSION

Session 1: Convert Wireframe to HTML and CSS

Monday, Sept. 27 at 7:30p–9:10p

This class will focus on converting the wireframes to HTML and CSS. We will also go over CSS Grid and Flex more to help with the layout for your projects.

Topics for Class Session
  • Intro (class videos)
  • Example Wireframe to HTML/CSS
  • Breakout Rooms to Work on Projects
  • Git Basics: Miro Board on Git Daily Process

Session 2: Responsive Design

Wednesday, Sep. 29 at 7:30p–9:10p

We will keep working on your Portfolio Sites and go over VS Code Extensions, Responsive Design including media queries. .

Topics for Class Session

After Class:

After Wednesday

Before next week’s class please do the following:

  • Fill out the Project Status Form
  • Work on your project. Roughly in this order
    1. wireframes complete
    2. create HTML for each page of your site. Focus on elmeents for the major sections of your page. It’s OK if you don’t get all of the paragraphs, lists etc.
    3. Make sure to determine your sitewide header and footer. You can put off the navigation for now, but leave at least a <nav> element.
    4. write the CSS for the small (mobile) layout from you wireframes
    5. use media queries to create the other layouts
    6. Complete the content for each page.

After Monday

Before Wednesday’s class, make sure that you’ve

  1. Created wireframes for all of your page types
  2. Setup your project including
    • VS Code and Git installed on your computer
    • GitHub Repository created for your portfolio project
    • Cloned the GitHub repository to your local computer
    • Installed the following extensions to VS Code:
      • Git History
      • Git Lens
      • Prettier or Beautify
      • Live Server
  3. Started the process of converting the wireframes to HTML and CSS
  4. Created a Git Commit AFTER saving your files.

Leave a comment