Portfolio Website
Project Summary
This is the first project as part of my Front-End Web Development Nanodegree. It is a portfolio website. To practice HTML and CSS, I didn't use bootstrap or any other framework. I started from scratch and used flex boxes and media queries to achieve responsiveness. The website changes the layout from 4 columns, to 2 columns, and to 1 column as the screen size gets smaller. The website is fully responsive and has optimized media queries for mobile (portrait and landscape) and iPad (portrait and landscape). I've tested the website on IE 11, Edge, Chrome, and Firefox. I've also paid attention to accessibility best practices. You can visit the website here.
Things to Improve
Following are some notes and things that could be improved:
-
There would be some compatibility issues with older versions of IE due to the use of rgba colors in CSS without a fallback hex or rgb(Added fallback colors for rgba, as there was some issues when testing with actual android devices) -
More optimized image sizes/sources for the hero section
-
More optimized image sizes/sources for tablets (hero and project pictures)
-
A bigger logo size and source image for tablets
-
Consider bigger icons in footer for mobiles and tablets
-
Consider listing only the used tags instead of "*" universal selector for the CSS rule about box sizing
References and Credits
Following are some articles, links, , and tools that were very helpful for me while completing the project work:
-
Using svg for icons - Sara Soueidan
-
Accessibility check list - A11Y Project
-
Fontello - Font Awesome
-
Smooth Scrolling - Article with JS code on CSS Tricks
-
Source of the hero image - Pexels (Photographer: picjumbo.com)