Alfa Romeo 4C a future classic.

About the Alfa 4C and why it is a future classic.

User Experience

User Experience (UX)

Project Goals

To create a website that gives insight into why the Alfa Romeo 4C will be a future classic and the history behind why it was built.
Clean easy navigation.
4 pages of Contents.
Responsive on all devices.
Lightweight but good quality images maybe use webp for speed.

Website Owner Goals

To show and display responsive and well organised and commented code.
Demonstrate Bootstrap skills.
Demonstrate native CSS skills.
To communicate to users about the story of the 4C and why it is different from modern day sports cars.

User Goals

Research and find information about facts and colours the car can be configured with.
find a video which can be used to give an entertaining honest review on the car.
find copyright free images and make sure they're of the right size page speed isn't effected and also credit the photographer within the project.
Contact site owner by submitting a form with input fields to capture contact reason we have to put validation on the fields to stop spam.

User Stories

As an Alfa Romeo fan and a user I would like:

I want to navigate quickly and easily.
I want to see colours that the car can be configured with.
I want to know what type of chassis does the car have.
I want facts and relative details.
I want a video/review about the car.
I may need to contact to ask for help on the car.

Design Thoughts

When thinking about the design choices for this website I decided that going for the Alfa Romeo hex colours would be a good idea so it would be familiar to an Alfa Romeo fan but I decided to go with a different type of font to Alfa to make it unique but also familiar I picked this through Google Fonts for my font choices see here . I intend on giving the website an Alfa Romeo feel.

When designing and building the website there were elements and parts which made sense in my head and on the wireframes however didn't maybe work as well when in HTML therefore I decided to change some elements to suit the website better.

Alfa Romeo Hex Colours:

I plan on using #C22636 for icons, SVGS, borders.
I plan on using #3a3a4a for the text this will be easy to see against a white background.
I plan on using #FFFFFF for the background this will make the #C22636 stand out and make #3a3a4a easy to read.
I plan on using 1B2441 for the footer background to give some more Alfa Romeo feel with #FFFFFF to stand out.

Website Font Choices

The font's that I picked are because I feel like they have a modern and sleek feel and will look right with the colours I have picked with the website. When implementing these font's I may find that they aren't what I want and could be subject to change. For bold text and links I have picked Dosis and for headings I chose Barlow Condensed

Requirements and Expectations

Requirements

As the Site owner browse the website through the sicky header with ease.
As the Site owner have facts and figures.
As the Site owner have good quality and lightweight images.
As the Site owner present a way to contact through a form.
As the Site owner to include a video and review.
As the Site Owner include the 4C brochure.

Expectations

Relevant facts and figures and not that have the option to go into more depth with a read me button.
Easy intuitive navigation and design.
A responsive website for mobile devices, desktop and tablet.
Contact form fields work and validate correctly.
4C Brochure opens in a new tab.

Features & Functionalities

Sticky Header/Navbar scrolls with you.
Navbar link icons.
Parallax image.
Short hero video which is just a plain image to save load times on mobile.
Interactive mobile menu through Hamburger icon.
Footer with menu links and social links
Image with text section and button
Telephone button
About Us Page

Dependencies, languages and resources

So far whilst coding my project the Bootstrap docs have been essential to finding out the classes for changing margin, applying flex containers, mobile classes to show elements based upon screen width for implementing the navbar dropdown I recommend when using Bootstrap to search through there docs as there will most likely already be a class already defined in there somewhere.

I have also referred to W3Schools, StackOverflow and other forums for making the parallax section on the home page these are resources that come in handy no matter how skilled of a developer if there's something you're stuck on it helps to ask.

Additionally I have also used Slack to help with my project as I encountered a problem with the license expiring for Balsamiq which meant I couldn't edit my wireframes for my project but thanks to Slack I managed to resolve it.

For writing some of the content I have used my own thoughts and opinions around the car however for some facts and more statistical numbers I have used the Alfa 4C.

Dependencies

Google Fonts (Chosen Fonts from here)
Bootstrap (Quick and easy to use framework which helps create a responsive website)
Font Awesome

Languages/Softwares

HTML
CSS
JS
JQuery
Font Awesome
Popper
Git

Resources

Balsamiq Wireframes
Canva
Unsplash (For uncopyrighted imagery)
Facebook 4C Owners club pages
Pexels
Pixibay
W3 Schools
Slack

Wireframes

I decided to use Balsamiq Wireframes as the wireframing tool for my project this is because of the simplistic but easy to use software allows for wireframing projects quickly and easily. It offers a selection of icons which are great for demonstrating how the project woTestinguld look on smaller screens. There are other software out there which can be used for Wireframing such as Adobe XD, Wireframe.cc and more. I decided to use Balsamiq on this project.

I should note as these are just wireframes that the final project may look different. I have created a wireframe for each page Home, About, Contact and Gallery with a wireframe for each device Desktop, Mobile and Tablet.

To see all my wireframes they are here.

Here is the Home page wireframe:

Testing

I have only doing a small amount of testing so far but I have used Chrome Dev Tools a-lot by using the elements tab and mobile button to see how the header has interacted with mobile. I have opted to have two headers one that shows on Desktop and one which will show on mobile.

Chrome Dev tools allowed me to create developments first to try and eradicate and bugs when code was deployed and pushed to my project. Chrome Dev tools isn't the only thing I have used to make sure my project is well organised and put together well. I use a IDE Code editor called Atom and with some packages installed such as beautify this code editor allows code to be written simply but also organised and formatted in a easy to read and professional way.

Dev Tools allowed me to minimize bugs and to make my deployed code the best it could be, there are scenarios however where it is beneficial to also use a device such as a mobile instead of just setting the window to a set size this is because browsers work differently on other devices for example I experienced an issue where the parallax doesn't.
For bugs and problems I encountered whilst testing through Dev Tools I stored expected outcomes, actual outcomes and unexpected outcomes inside a spreadsheet which I could go through and tick off once I was happy with the bug/problem.
I have tried to use a few different browsers like Google Chrome, Safari, Edge to see how my website acted as there can be changes to the way certain elements work this allowed me to eradicate any errors or bugs which I wouldn't have seen if I only used one browser.
W3 HTML5 Validator I have used this to identify areas within documents where I may of accidentally missed an alt tag. This validator will flag up anything that may be yield negative results to your website a few things flagged up for mine such as:
- Href attribute not allowed for button
- The button role is not necessary for button elements
- Stray end tag (This can be fixed by using beautify)
I have used CSS Validator to validate my CSS.

Bug fixing

There are always bugs which you try to account for but may require deployment to a local development in order for you to see in practice how your code works I used a local preview and chrome Dev Tools to check on different screen sizes, console errors and to see if CSS was

Wrong Bootstrap styles applied for Mobile and Desktop navigation bars meant navbars was showing on wrong screen sizes

Recognition and credits

For my README header image thanks to Alexander Schimmeck For images used through out my website thanks to:
Slideshow home page image: Rolf Vandewal
Exotic image home page: Brandon Atchison
Carbon fibre lightweight image home page Struffel Productions
Elegant home page image Nicolas Peyrol
About Alfa Romeo Caliper/Alloy image Adam Niescioruk
About Alfa Romeo Carbon Steering wheel image Łukasz Nieścioruk

code-institute-submissions / alfa4c-m1 Goto Github PK

alfa4c-m1's Introduction