Portfolio Project (Last Assignment)

Capstone of the Specialization "Web Design for Everybody" from University of Michigan

Introduction to the Portfolio Objectives

(Week 1 Collen's questions)

Collen's questions	My Reply
Will it be about you?	Yes
How do you want to lay out the content?	I’m planning having a landing page and more 3 main pages on the navbar: Blog, About, Contact. Has it website will include a blog I will have to have more pages, one for each post and other with a cloud tag.
What is the story you are trying to tell or the information you are trying to convey?	It will be a personal blog about my life in Bermuda. It will describe the challenges of moving to another country with a different culture and language (I'm from Portugal), also the great experiences that is living in paradise, and some tips for Expats moving to Bermuda, and tourists who are planning a visit here... I have been writing articles in a Word document for a while, so now it's time to publish it ☺
Consider the different development options: from scratch, from a template, and/or utilizing a development framework. What the one that works best for your Web Design Goals?	I’m choosing the 3rd option: Utilizing a development framework, more specific Bootstrap.

What I’m aiming?

Utilizing Bootstrap 4.0 (Beta);
All pages will be responsive for 4 unique views: Extra-small, small, medium and large screen sizes;
Use the web accessibility best practices to all pages;
Each page must validate at validator.w3.org;
To do a Parallax Website (at least on the Landing page);
Multilanguage website (EN & PT).

Inicial plan at Week1 / Week2 (Site Map)

sketch of this project schema of webpages

My Portfolio

Please note, this portofolio is a personal "real" life project, and it is undercontruction, so I did much more pages then what was asked, please for grading purpose just look to: Home, Blog, About, Contacts pages

You can see my portfolio at the following link: https://mariaproiete.github.io/web-design-project/

If you need to see my code, please visite my Git Hub repository at https://github.com/mariaproiete/web-design-project/

VERY IMPORTANT: Please use Chrome to review my website as it was the only one I teste it completly.

Portfolio Grading

1. Does the site validate? 10pts

Yes, it fully validates in W3C without any errors.

Only on the HOME page, it has 6 warnings (all the same) regarding with the details element is not supported in all browsers. I’ve tested in the new browsers on my computer (Chrome, Edge and Firefox). Only works on Chrome but, it isn’t a major problem because it shows all the text (without the effect of close the details), so I left it anyway because it doesn’t compromise the information and on Chrome (the most used browser) it works perfectly like I visually like to see…

Below the screen captures from the 4 pages validations:

1.1 Home Page Validation

screen capture from Home Page Html Checker

1.2 Blog Page Validation

screen capture from Blog Page Html Checker

1.3. About Page Validation

screen capture from About Page Html Checker

1.4. Contacts Page Validation

screen capture from Contacts Page Html Checker

2. Is the site responsive? 20pts

Yes, it is very responsive. It has 5 unique layouts/views for extra-small screens (xs), small screens (sm) medium screens (md), large (lg) and extra-large (xl).

Please see below the video showing the site responsiveness and other features (we will mention after for grading proposes):

3. Is the site well-styled? 10pts

Yes, I think so. As I try to have a homogeneous look in all pages and used CSS to do it:

At the home page the background images have a parallax effect (also as a part in Javascript);
You can hovering in each link and see the style changing;
I created a special 3D box images effect when hovering with the mouse(https://mariaproiete.github.io/web-design-project/#images-box)
The Tags Cloud’s background changes color and also its font color (https://mariaproiete.github.io/web-design-project/blog/post/visiting-st-george-town/#tag-cloud);
Used several pattern backgrounds in pure CSS (it isn't an image, the pattern is designed in CSS) - please see at Home page and About page;
The website as Sticky footer;
Created Breadcumbs to the posts navegation.

4. Are the images incorporated effectively? 5pts

Yes, as you can notice.

5. Successfully demonstrated the ability to enhance their site? 40pts

Yes, I think so. As I went beyond what we did in the four previous courses:

It has a Carrousel and doesn't start automatically (please see it at https://mariaproiete.github.io/web-design-project/blog/post/visiting-st-george-town/#myCarousel );
Incorporated a Google Map (please see it at https://mariaproiete.github.io/web-design-project/about/#bda-map);
Incorporated a Video(please see it at https://mariaproiete.github.io/web-design-project/capstone-portfolio/#my-video);
There is a sticky footer;
It is a Multilingue website;
I used Javascript to do an animation at the begining (the "flying" Welcome);
Also used Javascript to do the parallax effect style at the Jumbotrom image on the home page;
I used Jekyll as a Static Site Generator (more info: https://jekyllrb.com/);
I used SASS (Syntactically Awesome Style Sheets) as a preprocessor to CSS(more info: http://sass-lang.com/);