This website built to demonstrate my skills in HTML CSS & Bootstrap as the firest milestone project User-Centric Frontend Development in Code Institute Full Stack developer Program.

Z-Analytics is a hypothetical Digital Marketing Agency that provides three types of Analytics services for websites & E-Commerce owners.

The website's goals are to be informative and encourage engagement in order to generate leads for the agency. checkout Z-Analytics website

The z-analytics website designed to be simple and trusted, starting from the blue color and white background with orange action color. fonts used are Taviraj & Lato along with the dashboard image to make a professional impression.

Initial mockup

Final Design

website users are online businesses that are looking for an analysis service.

the website designed to encourage users to go through levels of interactions to achieve the website goal.

by visiting the home page the user will find an inspirational quote from an industry leader and informative content about why you need to analyze your website traffic. by the End of this section, User will find a CTA button Our Services lead them to the second stage if scroll down the user will also go to the 2nd stage.

in OurServices section the user will find our services packages with CTA button for each service to learn more about it. if he scrolled down he will find about me section with a personal photo and social media links for more social proof. below that the contact me section and the footer with contact info . In this stage of the website, the conversion to the next stage will be if the user clicked to learn more about one of our services

Google Analytics

Google Tag Manager

Z-Analytics Package

By Clicking to learn more a user will go to the detailed service section and find more details about the service. by the end of this section a CTA button to Contact Me . The User will be on a services page which gives him the opportunity to scroll up and down to read more about the other services without the need to back to the homepage. by clicking the Contact Me button the user successfully goes to the next stage.

The Contact Me Section designed with a Marketing sentence and Contact Me button that open a form in modal. The modal here designed to measure the conversion rate rather than a normal form. by opening the form the user successfully will go to the final stage.

The website's main goal is to generate leads, once the user filled the form and submit his contact info along with package needed the website successfully achieved the target.

They are key features in this website

• Home page

Responsive home page with collapse Navigation Bar & Banner Area And introduction Section with the company logo.

• Home page Services section

Services Cards with an image and cards body including summary, list of service features & CTA button.

• About Me

My photo along with about me paragraph, also social media icons.

• Contact Me.

Marketing Sentance and CTA button that will open a modal form.

• Form

a pop-up form with the contact info section to be submitted.

• Footer

Contact information and Social Media links, also a copyright statement.

• Service Section

a detailed Service section with a service card includes image and features and CTA button.

In this section, you should go over the different parts of your project, and describe each in a sentence or so.

• Testimonial section with javascript animation.
• Youtube Video explaining more about the company.

• HTML5
• CSS
• Bootstrap 4
• Font Awesome
• Google fonts
• CSS matic box shadows generator
• Canva to design the Z-Analytics logo
• Gitpod as an IDE

The code has been validated using:

• W3C Mark-up Validation Service HTML Validator
• W3C CSS Validation Service CSS Validator

Also, the Website manually tested in different browsers and in different screen sizes with different media query breakpoints to provide the best user experience. Navigation through different links also manually tested.

The site was developed using GitHub pages in the link Z-analytics. Steps to Deployment :

1. from page https://github.com/mmhashim139/z-analytics go to the setting.
2. in the setting section scroll down to GitHub Pages.
3. in the source section select master branch then save
4. deployed link will appear.

• Why analyze your traffic - Serpstat https://serpstat.com/blog/website-traffic-analysis-beginners-guide/

• About Google Analytics - Wikipedia https://en.wikipedia.org/wiki/Google_Analytics

• About Google Tag Manager - Wikipedia https://en.wikipedia.org/wiki/Tag_management_system

• Full Digital Marketing Analytics Services - Wikipedia https://en.wikipedia.org/wiki/Web_analytics

• dashboard Image

Pexels dashboard image was taken by @negativespace and Free to use License.

• The code Insitute example of love running for banner image animation.

Special thanks to my mentor Maranatha Ilesanmi , Code Institute community in #slack & stack overflow community where I found many of my questions answered there.

And for my wife and her support in my journey to learn coding while having a full-time job.

The content of this website is for educational purposes only.