/build-portfolio-site

Project building a portfolio site for the front-end developer nanodegree program assignment in udacity.

Primary LanguageHTML

Build portfolio site

This is a project building a portfolio site for the front-end developer nanodegree program assignment in udacity.

Objectives

  1. Complete the project

  2. Make a site only using CSS, HTML without libraries (i.e. Bootstrap or Foundation)

  3. Learn responsive layout

Checklist

Design

Required Elements

  • at least 4 images
  • title text
  • regular text
  • a logo

Sematic HTML

  • HTML5 semantic tags such as <header>, <footer>, <article>, <section> etc. are used to add meaning to the code.
  • No <div> or <section> tags are without a CSS class or id

Custom Design

  • Customize images and text
  • Customize placement of the elements on the page (grid layout) with HTML, CSS or both.
  • Customize CSS styles applied at minimum to paragraph and heading elements.

Grid-Based Layout

  • Page utilizes a grid-based layout with styles making use of the flexbox layout or a framework like Bootstrap, Foundation, etc.

Responsiveness

Cross-Device Compatibility

  • All content is responsive and displays on all display sizes.

Provide All Content

  • All content is rendered on all three devices. No content should be hidden on mobile devices.

Viewport meta Tag

  • Viewport meta tag is included in HTML. (i.e. <meta name=”viewport” …)

Responsive Images

  • If a CSS framework is used, classes provided by the CSS framework are used to make images responsive, otherwise media-queries are used to ensure responsiveness of images.

Separation of Concerns

Styles Separated From HTML

  • Portfolio completely separates structure (HTML) from design/style (CSS)

File structure

  • Files are organized with a directory structure that separates files based on functionality

Code Quality

  • HTML Formatting rules

  • HTML Style Rules

  • CSS Formatting Rules

  • CSS Style Rules

  • General Meta Rules

Style Guide

Validation

Lessons learned

  1. Need my own layout process making site from the mockup.

  2. Think smaller first, larger last.

  3. Layout first, styling last.