Build a Portfolio Site

Project 1: Build a Portfolio Site (70 hrs) ~ Udacity Front-End Web Developer Nanodegree Program

I replicated a design mockup in HTML and CSS. Once successfully replicated, I continued making customizations to the design to personalize it. I decided to take this opportunity to practice using Flexbox.

VIEW PORTFOLIO PAGE HERE

Usage

1. Clone this repository
2. Navigate to your local copy of index.html through your web browser

Technologies Used

Flexbox, responsive images (srcset & sizes), CSS calc(), Gulp, Unsplash images, Modernizr, PictureFill, Normalize, Google Fonts, HTML5 (structure, syntax and semantics) and SMACSS (divided CSS rules into Base Rules, Layout Rules, Module Rules, State Rules, and Theme Rules).

Style Guide Used

Udacity Front-End Style Guide

Resources

• Udacity Supporting Courses: Intro Intro to HTML and CSS, Responsive Web Design Fundamentals, Responsive Images, Git & Github, Hosting your Website on Github, & Web Tooling & Automation
• Lynda.com: HTML5: Structure, Syntax, and Semantics, Advanced Responsive Layouts with CSS Flexbox, CSS: Advanced Typographic Techniques - Modernizr Basics, Responsive Images (Also explains Picturefill)
• Treehouse: npm Basics, Deploy Your App to Github Pages with Gulp, CSS Best Practices (SMACSS, OOCSS, and more), Responsive Images, CSS Flexbox Layout
• A Couple of Use Cases for Calc()
• Getting Started With CSS calc ()
• CSS Tricks - Guide To Flexbox
• Flexbox Playground
• HTML5 Element Flowchart
• 23 steps to the perfect website layout
• CSS Comb
• Favicon Generator.

• Ǡ from http://unicode-table.com/en/

  • Many times you don’t need to use an image or icon fonts, but can use a unicode character from that site. They have a lot of amazing characters and it helps increase page load times to not have to download an image or icon font library.
• Images from https://unsplash.com/, an amazing source of royalty-free images.