This week we will start turning the wireframes from your Portfolio Brief into actual HTML and CSS.
Before Class: LEARN
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:
- Git Book: https://www.git-tower.com/learn/git/ebook/
- Videos: https://www.git-tower.com/learn/git/videos/
- Videos 4–7 cover the basics of working on a repository
In Class: EXPLORE
Session 1: Course Plan and HTML
Monday, Sep. 20
Today we are going to dive into Web Layout
Topics and Links for Monday
- Next Project: Responsive Portfolio Site.
- Web Layout Presentation
- Grid layout examples
- Fixed vs Fluid: https://codepen.io/profstein/pen/vYZRrpp
- Float vs Flex vs Grid: https://codepen.io/profstein/pen/mdwxajO
- Prof Stein CSS Grid Examples: https://profstein.github.io/css-grid-basic-examples/
- 1 Line Layouts: https://openlab.bmcc.cuny.edu/mmp-350-fall-21/topics/css/one-line-layouts/
- CodePen: create a pen with 9 boxes like https://miro.com/app/board/o9J_lzKHzGc=/
- Grid Layout Practice Breakout rooms:
- Fork my pen
- Try to create an actual layout that uses CSS Grid to layout the 9 boxes according to the rules.
- Share what you do with your breakout room companion
- Paste a link by your design on the miro board.
- 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
- Content Sectioning (MDN)
- CSS Grid Post
- Gestalt Practice Miro Board
- CodePen Starter
- Sign in and fork this
- Portfolio Brief to HTML
- Discussion of Portfolio Brief Feedback
- VS Code Discussion
- Emmet Cheat Sheet
- Git Clone
- HTML Starter
- CSS Starter
- Work in Breakout rooms