Web Development Portfolio Site

Completed: Last updated on December 14,2018

This portfolio site is the capstone project for the Coursera Specialization Web Desing for Everybody (Basics of Web Development and Coding).

I chose to design and implement a single-page web development portfolio site using Bootstrap 4.

Objectives

1. Create at least two different wireframes for the site, one for mobile view and one for a larger screen.

2. Generate original content.

3. Use the proper semantic and syntactic HTML tags to display the content.

4. Apply CSS to the content to create a well-styled and accessible site.

5. Write media queries and/or use a framework to create a responsive site.

6. Implement four advanced features that demonstrate the ability to apply web design theory or practice (JavaScript, plugins, accessibility features, animation, etc.).

7. Deploy the site (optional).

Requirements

• The site has at least three pages or sections and links to each page or section.

• Each page or section has at least two semantic html tags.

• Each page validates at validator.w3.org. (Warnings are acceptable.)

• Each page is responsive, has at least two different views, one for mobile and one for a larger screen, and a unique layout for each view.

• One of the pages has at least four images.

• Each page has a layout that is easy to follow and uses a variety of colors and fonts. The site has a unique style sheet with at least nine unique CSS rules, even if a template or framework is used.

• The site has four features that go beyond what was covered in the four previous courses of the Specialization.

Options

The capstone course gives students three options:

• Build your site from scratch,
• Build your site from a template, or
• Build your site using a framework.

I chose to build my site using Bootstrap 4 as a framework.

Advanced Features

• Add a Carousel with four images.

• Add a fixed navbar to the top of the page.

• Add icons to social media links.

• Enhance the accessibility of the site using WebAIM's WAVE web accessibility evaluation tool.

Submission

The project has to be submitted for peer grading in the form of a screen capture video and/or a written description. Deploying the site is not required and therefore posting a link to the deployed website is optional.

The submission should include clear evidence that the site is:

• w3 validator compliant (either through screen shots or demo),
• responsive (either through screen shots or demo), and
• well-styled (e.g. by showing the CSS files).

The submission should also define and/or demonstrate the four advanced features of the site.