Week 3: 2/7 + 2/9

Thursday 2/9

Activity 1: Portfolio Wireframes

We will use a Miro (I will share the link in class as you can edit it) to get you started on your wireframes for your portfolios. After you have some time to work on your wireframes we will break into pairs to review and then look at as a group.

We can also talk more about the Portfolio Brief assignment that is due on Tuesday 2/14.

Activity 2: HTML Box Model

Layout and Box Model

We will look at a Layout Presentation and talk about the box model.

There is also a HTML Box Model Quizlet we will look at.

Activity 3: CSS Grid Hands-on

In this part of the class we will look at

• CSS Grid Basic Examples
• CSS Trick’s Complete Guide to CSS Grid

and you will fork and extend the grid examples in CodePen.

Tuesday 2/7

Activity 1: Portfolio Brief

We will start the class looking at the Portfolio Brief assignment. We will go over it and do some breakout room work where you can discuss your ideas with a classmate.

1. Portfolio Brief
2. Submitting the Portfolio Brief

In class I will show some examples of prior student projects. These will not be available for download, you will need to be in class or watch the recording.

The brief is due on Tuesday, February 14. The Responsive Portfolio Site Project will be due on Tuesday, February 28.

Here is the Headshot Tutorial I talked about.

Activity 2: CSS Layout

We will pick up where we left off with doing a basic recreation of Ru’s Projects page. We will start with looking at the Page Section Assignment that is due and based off of last week’s work.

We will also get more into CSS layout and how to use Codespaces/VS Code. During this part some of the things we will look at:

• How to add extensions to VS Code / Codespaces
• How to preview when using Codespaces
• How to use Prettier/Beautify extension to clean up code

ACTIVITY 3: CSS GRID INTRODUCTION

We are going to start to learn CSS Grid today. We will look at the following resources:

• CSS Grid Post
• CSS Games
• Prof Stein’s CSS Grid Examples

After we look at some of the links in the CSS Grid Post, we will try the CSS Grid Game. Finally, we will go through as many of the examples in my CSS Grid Examples as we can get through before the end of class.

Those examples will use CodePen. Use GitHub account to log in to Codepen.

After Class:

Do Your Portfolio Brief

Work on your Portfolio Brief. It’s due Tuesday, February 14.