Udacity FSND Project - Build a Portfolio

Link to my project

A portfolio website project for the Full Stack Web Developer Nanodegree (or FSND) Program course.

Goals:

• Replicate the design in HTML and CSS provided by the Udacity Project.
• Develop a responsive website that display images, descriptions and links to each of the portfolio projects.
• Use responsive images, media queries, Bootstrap.

Project structure

- index.html - main page of the website
- main.css - in css folder contains custom css styles
- fonts - folder with fonts required by Bootstrap
- img - responsive images
- img_src - original images
- js - JavaScript libraries
- Gruntfile.js contains a script to create different sizes/qualities of the images
- README.md

Prerequisites

This project requires:

• Web Browser
• Bootstrap
• jQuery
• nodejs
• Grunt
• npm

Technologies

I have used several technologies in this project.

Gruntjs Gruntjs is a taskrunner that I've used to automate sizes and quality for my photos.

Bootstrap Bootstrap is an HTML5/CSS3 framework that I've used to help structure my website.

Prepare images

1. Install nodejs by following instructions from nodejs
2. Update npm by running following command: npm install npm@latest -g
3. Install grunt by following instructions from grunt
4. To prepare responsive images run Granjs by typing grunt in the command line.

Run the webpage

To run the webpage: open index.html in your internet browser.