NinaKWelch/ninas-portfolio-site

Project 2 - Build a Portfolio Site

Nina's Portfolio Site

Udacity Front-End Web Development Nanodegree Project 2 - Build a Responsive Portfolio Site

Website

https://ninakwelch.github.io/ninas-portfolio-site

Screenshots

Built with

• Flexbox
• Google Fonts
• Font Awesome
• Normalize.css

Image Processing

• Image Magick
• Grunt Responsive Images

Formatting and Validating

• Sublime Text
• Markup Validator
• CSS Validator
• HTML Beautifier & Formatter
• CSS Formatter
• javaScript Formatter
• Autoprefixer

Testing

• Can I use? Cross Browser Tesing
• Do I use? CSS and HTML Testing
• Firefox Developer Tools
• Chrome Developer Tools

Missing Browser Support

• Flexible Box Layout Module (Flexbox)
  • IE (8,10,11), Android Browser (4.2-4.3), IE Mobile (10), UC Browser for Android (9.9)
• CSS3 Media Queries
  • IE (8)
• Calc() as CSS unit value
  • IE (8), Opera (12.1), Opera Mini (5.0-8.0), Android Browser (4.2-4.3,4.4,4.4.3-4.4.4), UC Browser for Android (9.9)
• :last-of-type CSS psuedo selctor
  • IE (8)
• Viewport units: vw, vh, vmin, vmax
  • IE (8,10,11), Edge (12,13), Opera (12.1), Opera Mini (5.0-8.0), Android Browser (4.2-4.3), IE Mobile (10,11), UC Browser for Android (9.9)
• SVG files
  • IE9-11 desktop & mobile don't properly scale SVG files

TODO

• Try Modernizer for older browser support
• Decide if it is better to use icons instead of SVG images.
  • At the moment the SVG images are inline so they can be styled for hover states
• Make the transition for anchor links smoother
• The banner image loads too slowly