Project URL: View live project
-
-
- As a First Time Visitor, I want to understand the site's primary purpose quickly.
- As a First Time Visitor, I want to easily navigate throughout the site to find the content the organization sent me to see.
- As a first-time visitor, I want to look for things that make the site trustworthy.
-
- As a Returning Visitor, I want to show family & friends the shoes.
- As a Returning Visitor, I want to share the website with people on social media.
-
-
-
- The two main colors used are black
#000000 and white 
#FFFFFF with two sub-colors light blue 
#2196F3 and light green 
#337A88.
- The two main colors used are black
-
- The Titillium Web font is the main font used throughout the whole website, with Arial, Helvetica, and Sans Serif as the fallback font in the case, for any reason, the font isn't being imported into the site correctly. Titillium Web is a clean font and pleasant font to read. I decided to host the font locally for performance.
-
- Imagery & video is important. The large background hero image is designed to be serious and catch the user's attention with the headline on the forefront. It is modern and sleek.
-
-
-
Mockflow.com was used to design the initial layout for desktop and mobile-sized screens.
Desktop Mobile Home-Page Home-Page Images-Page Images-Page Contact-Page Contact-Page
-
The homepage will greet the visitor with a big header and a headline containing a background image to understand what the website is all about quickly—the horizontal navbar just below the header, with spaced links for easy navigation.
As the visitor scrolls down, a video appears showcasing the product with two calls to action, either going to the external shop page or the internal images page. The images page displays the product in more detail with snippets of text encouraging to purchase the product and leaving an overall superior feeling.
Below, these content blocks appear with snippets of text and images to continue the hype and build anticipation.
Scrolling further down below the blocks of content, the visitor will reach the bottom. An "available sizes" table is displayed with a call to action yet again with a transparent goal to lead the visitor to the external product page to pick a size and purchase the product.
The contact page features a contact form and a couple of bullet points speaking about the member benefits.
A final invitation to join Nike membership at the bottom of the page to build more trust and connect with the visitor.
A footer at the absolute bottom of all pages appears.
The colors used to produce the website are White, Black, Light Blue, and Green. The chosen font for the website is Google font Titillium Web, which gives a pleasant reading experience.
The header and footer are the same throughout the website. The pitch of the website is clear and to the point as it is priority #1.
The header has a different background image for each page; the header has a dark overlay color set to 60% to make the h1 heading stand out.
The navbar with 3-links which on "hover" and the current page highlights. The website incorporates a simple CSS method to highlight the links.
The footer is very simple, with a copyright symbol and the website name to the left. To the right, there are three links just as the navbar but does not highlight the current page.
The website targets English-speaking women and reads from left to right. The construct of the navigation is in a linear flow for precise and easy navigation.
The body of the website includes simple one, two, and three columns of text and media without being crowded yet informative.
The website's features showcase the product with images, videos, and text to provide a positive vision and ideas. If the need comes up, a contact form is available.
The Metcon 7 project is a website promoting one specific product targeted toward women between 20-38 years old who do fitness, bodybuilding, or CrossFit training and know the importance of and appreciate quality training shoes.
Based on the real world, Nike Metcon 7 training shoes. The website showcases the shoes with videos and images and leads the visitor to the product page to purchase the shoes.
The website gives people information in more detail focused on the specific product without distraction for better judgment and ultimately to purchase the product.
- Google Fonts:
- I used Google fonts to download the 'Titillium Web' to the assets folder and called upon it in the style-minified.css file, which appears on all pages throughout the project.
- Git
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
- GitHub:
- GitHub is used to store the project's code after being pushed from Git.
- Mockflow:
- Mockflow was used to create the wireframes during the design process.
The website is purely in HTML and CSS technologies, with no Javascript. The website is very lightweight and uses next-gen images and videos.
The website uses tags such as <header> <nav> <main> <article> <section> <aside> <footer> <div> <form> <input> <table> <tbody> <tr> <td> <span> <h1> <h2> <h3> <h4> and <p>.
The "Keep It Simple" mindset heavily influenced the development of the website without any use of JS and unnecessary tags, i.e., divs.
The website's content utilizes the CSS grid property for cleaner code and uses the whole column, with the "grid-column" property set to 1 / -1, which makes the element take up 100% of the column area.
I cleaned up a couple of lines of CSS code after using the grid layout module, which ultimately saves data to transfer and the code being cleaner.
I added critical CSS to the <head> of the HTML files inside the <style> tag to load the website quickly with minimal blocking time. I then removed the added CSS from the stylesheet style-minified.css to save even more and remove any dups.
Thanks to Demian Renzulli at web.dev for providing this code below for loading the stylesheet as non-blocking.
Images live inside the <picture> tag within the <figure> tag and use the next-gen images such as avif and webp with a fallback to png or jpg.
The header does not utilize the <picture> tag as I set the background image with CSS instead merely for educational purposes. If I wanted to use next-gen images, I would use the Modernizr JS library to check which features the visitor's browser has. Then dynamically inject classes based on the information retrieved and target those classes with CSS for either next-gen or classic image types.
The video on the front page has a poster for two things;
- controlling the first view.
- on mobile, the video won't load as on desktop, and a genetic circle with a play button would appear.
| Poster HTML Attribute | Video Poster Image |
|---|---|
 |
 |
Adding a poster attribute to the <video> tag will fix this issue and show an image for all screens for consistency. The video on images.html does not have this issue because of the autoplay attribute set.
The simple table at the bottom of the page has overflow-x set to auto so that a scrollbar appears on mobile devices, which otherwise would add whitespace to the right of the page and not fill the whole browser width, as seen below.
On the contact.html page, there's a form, nothing special; a bit of styling to make it look appropriate and aligned with the website as a whole. The <input>s do not have labels; instead, use the placeholder attribute to make it look smarter and cleaner. The form has the email field set to required and checks for the "@" symbol in the email address entered to check if valid or not. The text area is set to required as well.
| Form | Placeholder |
|---|---|
 |
 |
Throughout the website development, I've done intensive testing in every possible way to my ability to spot and quickly, with no delay, correct the bugs as fast as possible. With every new feature or code added, I would go back and test. Test the old as the new, take a step back, contemplate, and do more testing, and the result is a clean, lightweight website that I am pleased with.
Although I am currently pleased, it can always be better, like, for example, the navbar. Maybe making the navbar with GRID or Flexbox instead of using inline-block would make more sense.
Things like align-content: space-around or justify-content: space-between and align-items: center make life much easier and consistent on different devices.
The grid layout module in CSS is fascinating and indeed worth exploring more in-depth.
Lighthouse Mobile
| Home Page | Images Page | Contact Page |
|---|---|---|
 |
 |
 |
Digging further, Chrome's dev tool states there are no unused CSS declarations.
The website was produced with accessibility in mind and made sure the website is user friendly as much as it can be. I tested the website in Chrome's Lighthouse and on a11y Color Contrast Accessibility Validator.
| Results |
|---|
 |
 |
 |
I mistakenly added loading and alt attributes to <source> while writing as I went on in the moment of heat, writing the HTML code. When I checked with the HTML validator, I got errors, as seen below.
I removed the attributes and voilá, errors gone. Having these attributes in <source> duplicates the <img> attributes, which has these anyway.
There were four errors for the Instagram embed code on the contact page and had nothing to do with the website. I removed the embed code from Instagram altogether as it was bulky and shifted the layout too much. I tried to minimize the layout shift as much as possible, but with the errors still there, I removed it.
Thanks to @Stephen_5p_lead on slack for pointing out the small CSS error on the @media query with 425px and below, where I edited the main style selector with an ID added and overwrote the media queries below it.
I added the same ID to the media queries; that resolved the issue.
No errors are displayed when passed through the official W3C validator of all three pages.
No errors are displayed when passed through the official W3C Jigsaw validator of all three pages.
How to fork this repository:
- Log in to GitHub and navigate to this repository.
- You'll see a button called Fork on the top right side of the page. Click the button to create a copy of this repository to your own GitHub account.
How to clone this project:
- Under the repository’s name, click on the Code button.
- In the HTTPS tap, click on the clipboard icon to copy the given URL.
- In your IDE of choice, open git bash.
- Change the current working directory to where you want the cloned directory to be.
- Type git clone, paste the URL copied from GitHub - https://github.com/MTraveller/mt-product-promo.git.
- Press enter, and you are done.
How to deploy this project:
- In the GitHub repository, navigate to the Settings tab.
- Once in Settings, navigate to the Pages tab on the left vertical menu.
- Under Source, select the branch to Main/Master, then click Save.
- Once you've selected the master branch, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
I took all content, images, and videos for the product from the brand's actual product page of their website. The author (I) of this project and the brand is not connected/affiliated or corporated with one another in any way, and all content, images, and videos are the brand's intellectual properties only.
I have no right to any content, images, and videos used for this project. All ownership of these assets is of www.nike.com only.
https://www.toptal.com/developers/cssminifier/
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
https://css-tricks.com/almanac/properties/f/font-display/
https://web.dev/defer-non-critical-css/
https://drafts.csswg.org/css-grid/
This project is part of the "Full Stack Software Developer Diploma" at Code Institute.
Mahmoud Tantouri 2021.