This Website was developed for Code Institute's User Centic Front End Development Project 1 and is an advertising website of myself as photographer to promote my photography services. It's a five pages responsive website, each area is build to made easily the navigation trough the contents and to give all the info needed to the customers interested to have photography services.
This Project is to demonstrate lessons learned in this section HTML and CSS User-Centric Front End Development.
The website was build following the principle Mobile First and the UX is designed following the Bootstrap Grid system.
The idea was to build a website designed for customers that are looking for photography services and to give them a brief demonstration of my works as photographer.
I decided to divide the website into five different sections:
- Home Page
- Photobook
- Services and Prices
- Delivery & Payment Info
- Contact Us
A user that may need a photography for a competition or for personal pleasure or to share on the socials. This user will look for the indoor and ourdoor portrait jobs and info. They will be interested in book the service asking for a special printing size and asking for some request about.
As Real Estate Agency I need to attract the customer's attention on the properties I am advertising and to do this the best way is to show detailed and good quality pictures of same. A Real Estate Agency will visit the site to see my works, to read other clients review, to look the prices and all the services that I can offer. It can be interested to contact me for further info.
A family that would like to have photos for their family book during a special event. The client will go to the site to look the works and all the services offered with relative prices having a look on the review of the other clients. They will look for special offers to have more than one single shot during more hours of the day and to have more picture printed. They will be also interested to know about the payment methods and the delivery options.
A couple in holiday looking for a professional photography service. They will be interested to look the works and other clients review. They will be interested also in look about the delivery options and costs.
The basic structure of each page is the same, this to allow the user a simple navigation.
The structure is as follow:
- Navbar: a simple responsive navigation bar with a dopdown menu inside of same to divide the various services category of my website and with socials icons. The navigation bar will be showed as "Hamburger Menu" on width < 768px.
- Background Image
- Jumbotron: inspired by the Whiskey project of Code Institute's User Centic Front End Development Module, this Bootstrap based Jumbotron contain a Bootstrap sign up form with validators value, always inspired by the Whiskey Project, that allows the users to sign up and receive a discount code.
- Footer: A responsive footer in which is implemented the use of Font Awesome and Ianlunn`s Hover.css.
In addiction, to the web pages, except for the Home Page, was added a script to allow the auto scroll-down of the page, this to improve the quality of the navigation and to prevent users from thinking that the page has not changed, due to the same structure. This Javascript code was found on Stackoverflow community.
This is the original section were my idea started. The basic idea was to give a brief introduction of myself and of my best works.
In this page we can find:
- Presentation Section: Build following the responsive grid it contains a brief presentation of me as phoographer.
- Customers Review: A Bootstrap Carousel inspired form with customers review, this is important for the users to see what the people think about my services.
- Body Sections: A section with the example of the best services offered build with a responsive grid.
Link to the Home Page.
This webpage was build to give to the user a better idea of the work I do as photographer. The structure is simply and easy for the user. There is a bootstrap grid system of 3x6, three column and 6 raws for each column above the widht 1200px.
Following the principle of the Mobile First the page was build for small screen devices in first and it is possible to see how below a widht of 768px there is only one column full width gallery. Following the same principle between a width of 768px and 1200px there are 2 column and 6 rows, the third column is hidden to give to the user the best UX experience.
For this section I had inspiration from the CSS Gallery on freefrontend.com, the name of the gallery is "Image gallery with zoom" made by wunnle.
The Gallery feature are not displayed on small screens, this to give a better UX experience and because the image won't be larger than the full width that the image already have.
Link to the Photobook page.
This webpage was build with the purpose to give to the customers all the info they need about all the sevices I provide and the relatives price. In this page there is the implementation of Bootstrap`s table to allow the customers find all the the info in an in an orderly manner.
The page is full responsive and includes a inpage anchors for the special packages offered, this is to improve the users experience when they are using a smartphone to navigate through the website.
Try it on a small screen resolution and see how tapping one of the special packages you will be able to go directly to the interested package.
Link to the Services and Prices page.
This web page was build with the purpose to give to the potential customers all the info needed about the delivery and the payment methods. Like the previous webpage this one implements Bootstrap`s table and it is easy to navigate.
Link to the Delivery & Payment Info page.
This is the last webpage, I preferred to made a contact webpage to improve the user experience and made easily the navigation trought the website.
The section was build following the responsive mobile first idea and implements a full responsive contact info and a Bootstrap contact form with validators value.
In addition I implemented a Bootstrap's select menu with multiple attributes that allow the customer to select easly a service and a printing size and allow me to know for what service the customer is contacting me for.
Link to the Contact Us page.
- Implement Social Networks Link on the Social Icons
- Thank you windows after the submission of the contact form
- Thank you windows after the submission of the sign up form
- A Purchase Form to allow the user to buy a service directly by the website
- An ordered Gallery / Photography Portfolio divided in different section to show the skills for the services offered
For this project I used:
-
- The project uses HTML5 to structure the content in line with modern semantic html5.
-
- The project uses CSS3 to style the html content.
-
- The project uses Bootstrap 3.3.7 to Layout the html content on different screen sizes.
-
- The project uses FontAwesome to add icons for social media and contact forms.
-
- The project uses Hover.css to add animations.
-
- The project uses GoogleFonts to add the following fonts: Permanent Marker, Roboto, Exo, Indie Flower.
-
- I used Google Images to find the icons for my user`s review.
-
- The project uses JQuery to control scrolling and toggle features.
-
- For the project i used the free online tool ResizeImage to resize and compress the images to speed up the charging of the site.
-
- For the project i used Freefrontend resource to find an animated Gallery.
-
- For the project i used stackoverflow community to find a scroll down script for my project and other CSS and HTML iusses.
To test this project I used various browsers and devices.
- Chrome
- Safari
- Internet Samsung
- Chrome
- Firefox
- Edge
- Hp Laptop
- Asus Laptop
- Acer Laptop
- Samsung S8
- Iphone X
During testing i used Chrome Developer tools to test the responsive design on different size and the features of the page on different width.
The site was developed following the Bootstrap Grid System and the same was tested to ensure that all the elements are responsive on the following resolutions on each page:
- Width ≥1200px
- Width between 1200px and 768px
- Width ≤ 768px
During the developement of the Home Page I had an iusse with the section "Portrait". The code was not following my idea to show on small screen the image first and then the article.
To fix this problem the solution was change the column order, I had to push of 4 column the image using the code col-lg-push-4 and to pull of 8 column the article using the code col-lg-pull-8.
-
Sign Up form:
- Go to one of the page and click on the Sign Up button
- Try to submit the empty form and verify that an error message about the required fields appears
- Try to submit the form with an invalid email address and verify that a relevant error message appears
- Try to submit the form with all inputs valid.
-
Contact form:
- Go to the "Contact Us" page
- Try to submit the empty form and verify that an error message about the required fields appears
- Try to submit the form with an invalid email address and verify that a relevant error message appears
- Try to submit the form with all inputs valid.
-
Animated Gallery
- Go to the "Photobook"
- Try to move your indicator on the images and see the css transitions working.
- Try to click on one of the images and see how the image will be displayed full screen in the same page with a transition effect.
- Click again to go back on the gallery.
- Now try to set the display on a resolution of 768px or less and click on one of the images and see how the transition is not displayed.
For HTML validation testing I used "W3 Validator" which shows the html documents to be valid.
For CSS validation testing I used "W3 CSS Validator" which shows the stylesheet to be valid CSS3.
This page has been deployed to "Github Pages".
GitHub is used to host the code and publish the pages.
A new repository was created in GitHub called: first-milestone-antonio
After a final Git Add and Git commit
$git add .
$git commit -m "Final commit"
The pages were pushed to the GitHub repository
$ git push -u origin master
$Username
$Password
Under the Settings – GitHub Pages of the new repository, the master branch of the code is published to the url: https://gello94.github.io/first-milestone-antonio/
For this project I had ispiration by the Whiskey project of Code Institute's User Centic Front End Development Module.
- The icons used for the user review in the Home Page are taken from "Google Images", found using the filter "re-use rights".
- The photos used in this site are all mine, except for the images used as User Icon as mentioned above.