Week 4: 2/14 + 2/16

This week we will work on your Responsive Personal Site projects focusing on writing HTML and CSS, Responsive Design Basics and some design concepts.

JOIN LIVE SESSION

Thursday 2/16

Activity 1: CSS Grid

We will continue to look at how to Style with CSS Grid

Activity 2: 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.

Activity 3: 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/ 

Activity 4: 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.

Tuesday 2/14

PORTFOLIO BRIEF: If you have not yet submitted your Portfolio Brief, please submit it now. It is due today.

Activity 1: Project Setup

We are going to start the day by getting you set up for your project. If you have already started a repository for your project, you can copy over those files to the one we will start today.

Google Classroom

I’m going to require you to use Google Classroom to create the repository for this project. This will better allow me to track you project and give you feedback as you work on it.

JOIN LINK: because the link will allow anyone with it to join our classroom, I’m going to post it on our Profile in a forum post and in Discord.

Activity 2: Start Sitemap/Wireframes to HTML

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).
    • Keep the filenames short and understandable with no spaces in them like work.html or posterproject.html
  2. Add a basic nav element in your header. Make sure to link to all of your files. You do not have to style this yet.
  3. 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
  4. 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.

Activity 3: CSS Grid

Depending on time, we will continue looking at CSS Grid using:

I have updated the CSS Grid examples to show one that uses span. This is now the new Example 4.

Leave a comment