Week 4: 9/20 + 9/22

This week we will start turning the wireframes from your Portfolio Brief into actual HTML and CSS.

Before Class: LEARN

DO THIS:

  1. Portfolio Brief

If you have not yet submitted your brief, please submit it now. It was due on Tuesday, September 14.

2. Visual Studio Code and Git

On Wednesday we will use VS Code and Git. You may want to take a look at some Git resources from the people who make Git Tower to prepare:

In Class: EXPLORE

Live Sessions

JOIN LIVE SESSION

Session 1: Course Plan and HTML

Monday, Sep. 20

Today we are going to dive into Web Layout

Topics and Links for Monday
  1. Introductions
  2. Next Project: Responsive Portfolio Site.
  3. Web Layout Presentation
  4. Grid layout examples
    1. Fixed vs Fluid: https://codepen.io/profstein/pen/vYZRrpp 
    2. Float vs Flex vs Grid: https://codepen.io/profstein/pen/mdwxajO 
    3. Prof Stein CSS Grid Examples: https://profstein.github.io/css-grid-basic-examples/ 
    4. 1 Line Layouts: https://openlab.bmcc.cuny.edu/mmp-350-fall-21/topics/css/one-line-layouts/ 
  5. CodePen: create a pen with 9 boxes like https://miro.com/app/board/o9J_lzKHzGc=/
  6. Grid Layout Practice Breakout rooms:
    1. Fork my pen
    2. Try to create an actual layout that uses CSS Grid to layout the 9 boxes according to the rules. 
    3. Share what you do with your breakout room companion
    4. Paste a link by your design on the miro board.
    5. If you do that quickly then pick one of your Portfolio wireframes and try that (new Pen on Codeine). Or try using some of the 1 Line Layouts.

Session 2: None

Wednesday, Sep. 22

Wednesday we will open up Visual Studio Code, look at Git and start converting your wireframes into HTML and CSS.

Topics and Links for Wednesday

Leave a comment