Overview:

This unit was about styling pages. It’s always exciting for me to make something beautiful. It was challenging for me to make the pages responsive using only CSS as there are other third party libraries such as bootstrap. I had to make some changes to my html tags during styling as I could only figure out what my code was doing after I applied styling.

I made a sticky navigation bar with a toggle for a responsive site.  For this I followed a tutorial that guided me through each step of the way to make the navigation bar responsive and effective.

Here is the link of the tutorial : www.youtube.com/watch?v=8QKOaTYvYUA

For most styling I used the help of https://www.w3schools.com/

I have made a stylish form in my Booking page for the styling of this form I have followed the tutorial of : https://www.hongkiat.com/blog/creating-responsive-form-with-css3-html5/

All the icons and images that are Included in the page are taken from https://www.Pexels.com.  and https://www.flaticon.com. I have also mentioned this in my footer of every page.

I have kept my styling simple as this is a business website that I am creating so I am not adding crazy styles to it.

While Designing a website it is important to understand.
1. How people perceive.
2. How people remember .
3.  How people act to pursue goals.

Considering the above three thing I have tried to design my website Jakob Nielson’s 10 Heuristics https://www.nngroup.com/articles/ten-usability-heuristics/.

 One of the important thing that I have maintained is consistency in every website.

Learning Outcome:

This unit was all about styling a webpage. My css styles are well structured and easily maintainable. All of the code is standard-compliant. I learned how to use classes and ids for different scenarios.

What Went Well:

I maintained effective navigation between the pages by adding a sticky navigation bar that not is visible all the time but it is also responsive to different screen sizes.  I added a toggle button for a mobile version. 

What didn’t go well:

It was hard for me to make a responsive button that would stick to the image but I managed and now it’s mostly resizing on almost every screen.  It’s always hard to find icons and images that are free. To avoid plagiarism, I have added the sites name where I got the images from.   The images that I have added take longer time to load on the campus server.

Styling pages according to personas:

I have taken my personas into consideration while styling my pages.  I have added a stylish Booking button on every page so that it is more appealing for them to click on that button.
 I have also made my website responsive as most of my personas use different gadgets to surf the web. I have added stylish and appealing images and I have also made the font appealing by applying styles to them as Carlos likes to stay on the pages that are more stylish and appealing.  For Jateen I have added a stylish button and a number in the middle of the page so that he can book by calling.  I have added more information about the company and how it deals with its customers for Carol. I have also added an article of green cleaning and services for Beata.

Here is a link to my website: http://student.athabascau.ca/~mohamedye/

Below is the attached .zip file of the source code for this unit: