Skip to content

Week 5 2/20

This week we will continue to work on your Portfolio Sites. We will start with a review of the portfolio brief and then give you some time to work on your pages.

NOTE: there is no class on Thursday, 2/22. The College will run on an Monday Schedule that day so attend your Monday classes instead.

Activity 1: Portfolio Brief Review

You should have feedback on your Portfolio Brief if you submitted it to Blackboard. I will give some time at the start of class for you to go over that feedback and ask questions.

ACTIVITY 2: START Converting Sitemaps and Wireframes to HTML

We will start with checking in that you have set up a repository in GitHub for the Portfolio Project. After you get things set up, we will start the process of creating the files for your project. For this you will

  1. Create an .html file for each of the pages of your site (as outlined in your site map).
    • The home page MUST be named: index.html
    • For other pages, keep the filenames short and understandable with no spaces in them like work.html or posterproject.html.
    • Type ! then tab to give you the base HTML for the page.
  2. Make sure each page has the three major elements:
    • header
    • main
    • footer
  3. Put the page title in the main element. Make sure each page has a unique title. You may change this later (especially on the home page) but you want to have the name of each page clearly visible while you’re building.
  4. Add a basic nav element in your header on the home page. Make sure to add links to all of your files. You do not have to style this yet.
  5. Once the nav works, copy and paste it to each page of the site
  7. Begin to add page section elements to your pages. Use your wireframes as a guide and remember to use these elements to start
    • header
    • main
    • footer
    • nav
    • article
    • section
    • aside
    • div
    • address
  8. Add as much content as you can and appropriate to the pages you have.

You will continue this work outside of class as you build your site. Today the main point is to get started so you are comfortable adding more as you build your site.

Resources for Building Your Site

We will look at these resources if there is time and interest. If we don’t get to all of these today, we will cover them in the next week.

Responsive Web Design Concepts

Responsive Web Design was coined by Ethan Marcotte in a blog post for the A List Apart web site in 2010. With CSS Grid and other developments, the CSS in that post is out-of-date, but the concepts remain:

  1. Fluid Grid: The width of the containing elements on your site is fluid. This normally means the width of the elements are in units like % or fr (what we will use with CSS Grid).
  2. Flexible Media: the images and other media used on a page can adjust their size to fit the fluid grid as it changes with the browser size.
  3. Responsive Layout (media queries): The site layout changes to match the width of the browser being used to view it (mobile, laptop, desktop etc). Media queries are what is typically used to do this. There are some other options you can also use that we will explore

We will discuss the first two today and Responsive Layout more on Thursday.

  • Responsive Images and Video: the CSS used in this post is in the style.css file for your Responsive Site project. This post explains that styling in more detail.

Fluid Grid And Layout Discussion

We will use these examples to talk more about fluid grid and different ways that the width of the containing elements can be flexible.

  1. Fixed vs Fluid: https://codepen.io/profstein/pen/vYZRrpp 
  2. Float vs Flex vs Grid: https://codepen.io/profstein/pen/mdwxajO 
  3. 1 Line Layouts: https://openlab.bmcc.cuny.edu/mmp-350-spring23/topics/css/one-line-layouts/ 

Media Queries

Media queries are a big part of how you will accomplish the Responsive Layout part of Responsive Web Design.

To look at them in a hands-on way we will look at this Media Queries post