Week 6: 3/7 + 3/9

This week we will focus on working on your Responsive Site projects.

Monday 3/7

Activity 1: Checkin and Poll

We will do a quick general checkin and have a chance to see how you’re feeling about your projects.

General Poll:

https://app.sli.do/event/whKFvY1QyuDdEowYKZirCJ

Responsive Site Poll

https://app.sli.do/event/rUWi8mqokMjdE4PoVRgcVM

Activity 2: Git Workflow

I will go over some of the core git workflow concepts. I will use this presentation:

https://www.dropbox.com/scl/fi/dm6mosba009sp5nwf0mlk/GitBasics.pptx?dl=0&rlkey=x8iw22c2k9ndn5juf62k49cwb

The presentation will probably change a bit after today and I am only presenting part of it. We will revisit it and Git concepts throughout the course and build on this.

Using GitPod

We will answer questions and look more at how to use GitPod.

Live Preview with GitPod

Here are some steps to open a live preview server in gitpod.

  1. Open GitPod workspace
  2. Open terminal
  3. copy this
    1. python -m http.server 8000
  4. paste it in the Terminal and press enter
  5. A message will appear near the bottom of the screen.
  6. click either
    1. Open Preview
    2. Open Browser

You can get back to either of these through the Remote Explorer tab.

Activity 3: Work on Projects

We will leave time at the end of class for you to work on your projects.

We will take some time on Wednesday to share your progress in pairs.

Some things to focus on (in order).

You should be on number 4 or 5 by Wednesday and have started on 6 by the end of class Wednesday.

  1. GitHub Repository Created.
  2. Base HTML done which includes
    1. the elements that must be included: doctype, html, head, body
    2. The meta tags needed in the head for the site to be responsive
    3. You can use the index.html from the base Responsive Site repository as an example. Most of you used this already to start your projects
  3. Site wide elements
    1. Header with navigation that goes on each page.
    2. Footer for each page
  4. Page specific content:
    1. Use the Page Structure elements first to define the content areas of the page (Prof Stein Periodic Table of Elements, then click on Page Structure filter).
    2. Then add in content to those structure areas
  5. Page layout
    1. CSS Grid
    2. then other layout techniques as needed
  6. Visual Design
    1. Typography and Typographic Hierarchy
    2. Images
    3. Color

Wednesday 3/9

In the last class we vote to work on:

  1. Layout
  2. Media Queries

We also talked about navigation.

Mobile First Layout

We’re going to try to do a walkthrough of mobile first layout in class.

When determining which element you should use you can refer to my Periodic Table of Elements

We will go over these steps:

  1. Planning the Layout
    1. Wireframes: it all starts here. Your wireframes should tell you what content is on the page and the layout of that content on mobile/medium/large screen sizes.
  2. Content Boxes
    1. All of the content needs one or more elements (boxes) on the page.
    2. It is important that you add these in the order they should appear in your mobile layout.
    3. Most of the time these are one of the core text (p, h1-h6, ul/ol/li) or core mediacore media (img, figure, video) elements.
  3. Layout Boxes
    1. These are the boxes that go around your content. You will apply the CSS Grid or CSS Flexbox to these elements. They should be one of the page structure elements:
      1. header
      2. nav
      3. main
      4. footer
      5. article
      6. section
      7. aside
      8. div
      9. address
  4. CSS
    1. Once you have your HTML then you can go in and add your CSS Grid for the layout.

In Class Example

Here is the example codepen we worked on in class:

See the Pen Untitled by Christopher Stein (@profstein) on CodePen.

Navigation

I have a post with some example navigations that you can use: Responsive Navigation Examples.