WCCI Course Materials

Java Module 2

HTML/CSS Portfolio v1

Schedule A One-on-One With An Instructor and Exit Tickets

Day 1

Topics

  • Career Services
  • Intro to HTML
  • Semantic HTML

Activities

References

Evening Reading - Articles

Topic
Semantic HTML

Workshop Videos - PENDING

Day 2 - Pending

Topics

  • Intro to CSS

Activities

  • Workshop - Cascading Style Sheets and You, Part 1- Style
  • Exercise - Intro to CSS Exercise
  • Workshop - Cascading Style Sheets and You, Part 2- Layout

References

Workshop Videos

Day 3

Topics

  • CSS Grid

Activities

  • Workshop - Progressive Enhancement
  • Workshop - CSS Grid
  • Exercise - Static Grid Exercise
  • Workshop - CSS Flexible Grids
  • Exercise - Flexible Grid Exercise

References

Evening Practice

Topic
CSS Grid Garden
- OR -
MDN Playground CSS Grid

Workshop Videos

Day 4

Topics

  • Flexible Grid Review
  • CSS Flexbox

Activities

References

Evening Practice

Topic
CSS Flexbox Zombies
- OR -
The Ultimate Guide to Flexbox - Learning Through Examples

Workshop Videos

Day 5

Topics

  • Media Queries
  • Feature Queries
  • Q and A

Resources

Activities

  • Workshop - Media and Feature Queries
  • Workshop - Q & A and Review
  • Portfolio Work

Workshop Videos

Resources

HMTL

CSS

CSS Grid

CSS Flexbox

Design Resources

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

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

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: