Skip to content

Week 7

This week we will finish up our responsive sites.

Thursday, March 8

Activity 1: Project Check-in

We will do a check-in on where you are with your Responsive Portfolio Site projects first thing.

Activity 2: GitHub Pages

We will learn how to make your web site available through Github pages.

  1. Go to your Repository
    • If you don’t remember how to find it then: 1) sign in to GitHub, 2) Go to your Repository list in settings: https://github.com/settings/repositories, Scroll down and look for your project under stein-bmcc. The name will be like : stein-bmcc/responsive-portfolio-project-yourUsername
  2. Click on Settings
    • screenshot of github repo home page with settings link highlighted
  3. Click on Pages
    • screenshot of github settings area with pages link highlighted
  4. Choose Main branch to deploy and click save button
    • screenshot of github Settings > pages with main branch selected and save button highlighted
  5. Then you have to wait a couple of minutes while it gets your site ready
  6. Refresh the page after a few minutes. When it is ready it will show the URL for your site.
    • screenshot of URL for github pages in the Pages settings
    • The URL will be in the format: https://yourUsername.github.io/yourprojectname

Activity 3: Designing Cards

We will use a codepen to look at card design and layout.

https://codepen.io/profstein/pen/YzYQKvJ

Activity 4: Card Flip

We will look at how you might go about making a card that shows and image and then reveals the title and description when the image is hovered.

Tuesday, March 5

Activity 1: Responsive Site Review

I will first show the progress I expect at this point.

Then I will put you into breakout rooms for you to go over each other’s progress.

Then we will debrief and see where you are.

site map diagram next to screenshot of files in Codespaces showing one-to-one relationship between a page in the site map and an html file.

Activity 2: Navigation

People wanted to go over some of the Navigation ideas.

Activity 3: Typography

We will go a bit more into typography and make sure that you can include Google Fonts.