Week 2: 1/30 + 2/1

This week we are going to look at portfolios and do some review of HTML and CSS.

Accounts:

• Create GitHub account. If you already have one, make sure you remember the login info.
• We will also work with CodePen this week. You should use your GitHub account to log in to Codepen.

Software

In addition to GitHub and CodePen you will need:

• A browser, I will be using Chrome as an example. It is possible to use others.
• A way to screenshot your browser window. I will use the Chrome Extension Awesome Screen Recorder & Screenshot
  • https://chromewebstore.google.com/detail/awesome-screen-recorder-s/nlipoenfbbikpbjkfpfillcgkoblgpmj

Thursday 2/1: Container Elements and Layout

Container Elements

We will use this HTML+CSS+Layout Miro Board to talk about HTML elements in general and those that contain other elements in particular. We will also use the Miro to look at how to analyze a site to determine where the major content areas of the page are and which elements should be used for them. The Container Elements post is a resource.

CSS Grid Layout

We will also go over CSS Grid Layout. This time we are stating with basic, equal column width layouts. The CSS Grid Basics post is a resource.

Assignment

In class we will talk about and give examples of how to complete the first assignment: Assignment 1: Portfolio Page Structure

Tuesday 1/30: Portfolios and HTML

Portfolios

We will spend a lot of the course working on your portfolios (both as responsive web sites and using a static site generator named Eleventy). To kick things off and get our heads into web design, you will split into groups and look for a good portfolio.

Find an Example of a Portfolio

You will do this in your groups. You will find a portfolio and then evaluate it. Here are some sites and direct links to portfolios to help you get started:

• https://www.ruhsona.com/ (BMCC alum)
• https://renzoesposito.com (BMCC alum)
• https://mikhailwilliams.com (BMCC alum)
• http://zaradrei.com/
• https://www.verachen.me/
• https://www.brandonviney.com
• https://www.marco.fyi/
• https://www.elsaamri.com/
• https://danielautry.com/
• https://portfolio.adobe.com/examples/

Components of a Good Portfolio

Evaluate the portfolio you choose and be prepared to talk about how the portfolio you chose has the following:

1. CLARITY: Makes it clear what kind of work the person does (design, web dev, illustrator etc).
   1. Ideally, you should also know who their audience is (clients, employers, customers etc).
2. EXAMPLES: Shows examples of work and process.
   1. What is the example
   2. What were the goals/deliverables
   3. What the person did (credit others if applicable)
   4. Their process in working on it
   5. software/tools/platforms used if applicable
3. WHO ARE THEY: Gives you a sense of the person
   1. something to show their personality and help you remember them like: picture of them, unique visuals, unique style of writing, bits of personal info.

HTML

---

We will look at this in class (you can watch the video on your own) in a more interactive way.

There are some other HTML resources we will use that you can see on the HTML page.