Schedule A One-on-One With An Instructor

• Meet With Cliff

Group Project

• Virtual Pets Amok

Day 1

Topics

• Career Services
• Intro to HTML
• Semantic HTML
• Group project VirtualPetAmok Overview

Activities

• Workshop - Career Services
• Workshop - HTML
• Afternoon Breakout Sessions - VirtualPetAmok
• Holiday Break Graded Exercise - Personal Professional Portfolio

References

• HTML - Workshop Slides
• Mozilla Developer Network HTML Tutorials
• W3 Schools HTML Tutorials
• Semantic HTML
• Semantic HTML Flowchart

Evening Reading - Articles

Evening Homework Exercise

• Semantic HTML

Workshop Videos

• HTML Basics

Day 2

Topics

• Intro to CSS

Activities

• Workshop - Cascading Style Sheets and You, Part 1- Style
• Workshop - Cascading Style Sheets and You, Part 2- Layout
• Afternoon Breakout Sessions - VirtualPetAmok

References

• Workshop Slides - CSS Styling
• Workshop Slides - CSS Layout
• MDN CSS Tutorials/Reference
• W3 Schools CSS Tutorials/Reference
• Colors - Color Scheme Generator
• Adobe Color Wheel
• Google Fonts
• Bring it all together at Codepen.io

Evening Homework Exercise

• Intro to CSS Exercise

Workshop Videos

• CSS Basics

Day 3

Topics

• Media Queries
• Feature Queries
• CSS Flexbox

Activities

• Workshop - Progressive Enhancement
• Workshop - CSS Flexbox
• Afternoon Breakout Sessions - VirtualPetAmok

References

• Workshop Slides - Progressive Enhancement
• Workshop Slides - CSS Flexbox
• MDN Using Media Queries
• W3 Schools Media Queries Documentation
• A Visual Reference for CSS Flexbox

Evening Practice

Evening Homework Exercise

• Flexbox Practice

Workshop Videos

• More CSS

Day 4

Topics

• CSS Grid

Activities

• Workshop - CSS Grid
• Workshop - CSS Flexible Grids
• Afternoon Breakout Sessions - VirtualPetAmok

References

• Workshop Slides - CSS Grid
• Grid by Example
• A Visual Reference for CSS Grid

Evening Practice

Evening Homework Exercise

• Static Grid Exercise

Workshop Videos

• Even More CSS

Day 5

Topics

• Feature Queries
• Flexible Grid Review
• Q and A

Activities

• Workshop - Q and A and Review
• Portfolio Work
• Afternoon Breakout Sessions - VirtualPetAmok

Workshop Videos

• PENDING

Resources

HMTL

• HTML
• MDN HTML Tutorials
• W3 Schools Learn HTML Tutorials

CSS

• CSS: Intro
• W3 Schools Learn CSS Tutorials
• CSS: Progressive Enhancement

CSS Grid

• CSS: Grid
• Grid Garden

CSS Flexbox

• CSS: Flexbox
• FlexBox Zombies

Design Resources

Listed below are a few of the many websites that can help you improve your website design:

• Google Fonts
• Adobe Color

When you use images, please filter on those that have no copyright restrictions and are labelled for reuse:

• Flickr
• Google Images
• Unsplash

Module 2 Project - Professional Portfolio w/ HTML and CSS Requirements

Create a portfolio site highlighting your work that can be shared with potential employers. Focus first on building a good structure, then later style and lay out with with CSS.

Skills Required

In order to deliver this webpage solution, you will need the following skills and knowledge.

• HTML
• CSS
• CSS Grid
• CSS Flexbox

Tasks

First, set up your username.github.io site as per the instructions at https://pages.github.com.

Build the document structure

• Create a main page (index.html) representing a professional portfolio, including the following:

  • an appropriate <header> element

  • a <nav> element linking to each of the sections

  • an <h1> element with your page title (there can be only one)

  • a <section> element for each of the following, each of which should contain an appropriate heading element:

  • About Me, consisting of:

    • brief biographical information
    • photo
    • contact information
    • links to your professional networking site profiles, including at least GitHub and LinkedIn
    • list of skills

    Include whatever other information you consider pertinent.

  • Projects, consisting of at least three, each represented as an <article>

    • name of project, linked to GitHub repository or the repository/project's GitHub Pages
    • screenshot
    • skills / technologies used

    Don't worry that your available projects are limited now. You'll have time to increase the size of your portfolio.

  • an appropriate <footer> element

Lay out and style your portfolio

• Assign ids/classes to sections/etc, then use css grid to lay out your page. Reference MDN and this tutorial to work out how to use grid: http://cssgridgarden.com/
• To contain the elements of your grid, you will want to create a <div>, something like <div id="container">...</div>.
• Create CSS rules to style page elements appropriately.

Using online resources

Any resources (images, etc) you use should be:

• free for non-commercial use
• copied to your repository and referenced there rather than via a uri pointing to another site

Tips

• Section ids can be used to create anchors linking to those sections inside the page.

• See the appropriate Mozilla Developer Network reference pages for guidance regarding tag usage:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <footer>