Push & Pedal Inc. is an imaginary company that sells bicycles and wants to have an online presence. The idea was creating a page that could be an institutional company website to promote their brand, and a base for an e-commerce store.

This project is part one of the four milestone project of Code Institute Full Stack Developer course, and aims to show a responsive website using only HTML5 and CCS3. It also uses the Bootstrap framework and Font Awesome icons for a better layout and user experience.

Access the website here: Push & Pedal Inc.

• User Experience
• Design Process
• Features
• Technologies Used
• Testing
• Deployment
• Credits
• Acknowledgments

• Promote the Push & Pedal bicycle brand on the internet, with a responsive website.
• To get people interested in the events hosted by Push & Pedal, where the user can be part of their community.
• Promote their products, where the user can access their page on Amazon to purchase.
• Show the sponsored athletes.
• Have their company info accessible.
• Make it easier to get in contact.

• I’m a enthusiast looking for a new bicycle on the internet.
• I know the brand and I’m looking for their website
• Participating on events is something that would interest me
• I’d like to get in touch with Push & Pedal

• I want to know more about Push & Pedal products, and maybe buy a new one.
• I’d like to know more about their events and maybe book my participation.
• I have a question and would like to get in touch with Push & Pedal.

• As the owner of this company, I’d like to have an online presence by having a website where I can promote my brand (product, athletes and events).
• I’d like a simple website where it is easy to find information with any device.

The objective of this website is to promote the brand, so was decided to separate it in three main parts: Products, Events and Riders (how athletes are called by this company). Due to that, on the strategic plane of this project we thought about how to reinforce that promotion through the website, and that was the starting point.

It was decided that some key features need to be attended on this project, where any user could:

• Any customer could access the website from any device, providing a smooth navigation.
• Find all products provided by the company
• Promote their events, since it is a important part of their business
• Promote their sponsored Riders, as it might be important to some users.
• Make it easy to get in contact with the company.
• Provided that company history and goals.

Developing the wireframes was decided to have a simple website, having one separated page for each key feature the company wanted to promote, and having the more important features also promoted in a specific section in the homepage.

The wireframes were created using Figma, where the base layout of each page was decided. The main decision at this stage was to use Cards on some pages that could be rearranged depending on the screen size.

The project wireframes can be accesed clicking here.

Mobile:

Tablet:

Laptop / Desktop:

.

The color scheme was decided to have an earthy and natural vibe, providing enough contrast to attract the user's attention.

In the typography area, it was decided to use Google Font Roboto, as it is already largely used and well accepted by users. In case that font can’t be loaded, the fall back is Sans Serif as it will always be loaded correctly.

The imagery of this web site was collected on Unsplash, Burst and Pure Cycles. The images selected aim to attract users, and set the company feeling as a casual and inviting brand.

On the layout, it was decided to have all page links on the header to make them easily accessible in any part of the website. The navigation links were also added to the Footer, to let the navigation smooth on the mobile view, not needing to scroll all the page up.

The Homepage was divided into sections, each one focuses on promoting the main key features of this project. In the Products, Events and Riders page each content was displayed in a card, so the page can be fully responsive.

All features of this project can be accessed through an specific webpage linked on the navigation bar on the page Header, or through the navigation links on the page Footer.

• Header with company logo and navigation bar, which shrinks on smaller screens and shows a hamburger menu with a dropdown menu.
• Footer with navigation links, company information and social links that gets rearranged on smaller screens, for a better user experience.

• The first section is an Image slider created with Bootstrap, where the first image invites the user to know about the company products, and the second slide promotes their events.
• Following there is a section showing their products with a button linking to the Products page.
• The next section promotes their events with a call to action button to know more about it.
• The last section promotes their sponsor riders, where there is also a button to access the corresponding webpage.

• Each product is displayed on a card that can be rearranged depending on the screen size.
• The card has the product name, price, tax and shipping information, and a brief description.
• Each product has also a call to action button for purchase, that could be linked to a marketplace page where the product gets sold.

• Each event is displays on a responsive card
• For each one, on the card is informed the event: date, time, organizer, level and a brief description
• There is a call to action button to book your participation on the specific event, where the company can gather some user information.

• Each rider is displayed in a card, that can be rearranged depending on the screen size
• Their card has their speciality, since when they are sponsored and a personal quote.

• A brief description on the company and its goals. Aslo an explanation of how the company was created and an invitation to get in touch.

• A contact form created with Bootstrap to gather user information, and provided an easy way to contact Push & Pedal Inc.

• An image gallery for each event, and make possible for users to comment.
• More products displayed, and an in site ecommerce experience.
• A more detailed description of each sponsored Rider, with their social media links.

• HTML5 - To create and add content to the website.
• CSS3 - To style the website content and provide responsiveness.
• JavaScript - Used on the hamburger menu, as part of the Bootstrap navigation bar.
• Bootstrap - This framework was used to style some parts of the website, and to add some components (navigation bar, image slider and contact form).
• Gitpod - The development tool used to write the website code
• GitHub - d Used for version control, host files and deploy website.

• Figma - To create website wireframes.
• Unsplash - Images
• Burst - Images
• Pure Cycles - Images
• Google Fonts - Primary website font
• Canva - Used to create company logo
• Font Awesome - Icons on Events and Riders page.

• CSS Tricks- Mainly used as a resource to help with Flexbox positioning

• New user:
  • Looking for a new bicycle on the internet, I found Push & Pedal website. I could find their products easily, since the first banner and link directs me to their product page.
• Returning user:
  • I bought a Push & Pedal bicycle and have some questions about the necessary maintenance. I’m commuting to my work, and had only my smartphone to access their website, and the contact information and form was very easy to find and access.
• Business owner:
  • I’m pleased with the consistency of the design on different devices. Having a banner inviting to join our event helped the promotion and to increase the number of participants.

• All HTML files validated with W3C Markup Validation Service - No Errors Found
• CSS file validated with W3C CSS Validation Service - No Errors Found

Website tested on the following browsers manually, no error found

• Chrome
• Safari
• Mozilla Firefox
• Microsoft Edge

Website tested on the following devices manually or using Chrome Developer Tools, no error found

• Iphone X
• Ipad Pro
• Google Pixel
• Macbook Pro 16”
• Desktop Monitor Philips 25”

The code of this project was written using Gitpod and deployed and hosted on GitHub Pages, following the below steps:

1. Opened GitHub page and signed in
2. Accessed the repository user-centric-FED-project
3. Go to Settings
4. On the GitHub Pages sections selected on the dropdown menu 'Master Branch' > '/root'
5. Clicked on Save
6. Website is live now here GitHub Pages

1. Be sure to have GIT instaççed
2. Clone this repository
3. Follow the steps above to deploy your project on GitHub Pages

This website was developed using the Code Institute project templated that can be found on this repository.

The Read.me file was based on Code Institute readme-template and the README.md file created by my fellow colleague Jack Sheehy. Thank you so much for the inspiration.

The base code from the sections: Header navbar, Hero slide and Contact form were based on the linked documentation from Bootstrap.

All images were taken online on Unsplash, Burst and Pure Cycles website. Really appreciated that support.

I’d like to thank the Code Institute tutors and support staff. Their support definitely helped me to achieve all my goals on this project.

Thanks to Mark Railton, my mentor, that also supported me during this project.