Manage Landing Page - Frontend Mentor Challenge Project

A responsive website built using the Tailwind CSS Framework and HTML5 for a fictional company as part of the 'Manage landing page' challenge by Frontend Mentor and demonstrated by Traversy Media.

✔️ Features

• Interface with as close resemblance to the mockup
• Form validation using JS Regex
• Responsive testimonial slider*
• Accessible elements
• Full responsiveness
• Optimised for the web

*PLEASE SEE NOTES BELOW

🤓 Stacks Used

🔗 Links

• Manage Landing Page
• Frontend Mentor Challenge
• Tailwind Crash Course - Traversy Media

🖋️ Notes

RESPONSIVENESS

The designs of this site have remained faithful to the breakpoints used in the mockups for mobile and laptop (375px and 1440px respectively.) To adjust these on a global scale, you can either amend the breakpoints in the tailwind.config.js file (the most convenient option with classes remaining intact) or adjust the inline-classes accordingly on a specific, case-by-case basis.

The slider uses the breakpoints provided in the src files of the project to choose the number of testimonial cards to display at any one time. These can easily be adjusted in the /src/js/testimonial-slider.js file.

FRONT END DELIVERY

This repo has been deployed client site using Vercel. As such, Vercel handles the server-side optimisations, security and performance metrics, incl. caching, WebP delivery, headers and compression (Gzip and Brotli). Adjustments to these, and others, can be made by creating a vercel.json file. See Vercel's documentation for further details. The repo owner has also left the WebP versions of the images in the /src dist should you require them for client-side builds.

FORK/CLONING PERMISSIONS

Forking/cloning this repo to work on yourself is welcomed. Before doing so however, the repo owner strongly advises reading the following:

• Please keep the author in the package.json unchanged unless you are creating it entirely from scratch. If not, you are welcome to add your details as a contributor.
• Please keep the build screenshots in the main directory unchanged (incl. file names and repo username) unless you are changing it and subsequently the screenshots will be different (Frontend Mentor encourage different approaches and thus differentiations. By attempting it yourself, you will have a different approach where the end result will differ and should therefore be compared.)

As well as this, please read below.

PRODUCTION BUILD & DEPLOYMENT

While the app has the Tailwind CSS CDN integrated for browser-side deployment, it is highly recommended to run this locally and install Tailwind via npm as follows:

• Clone the repo to your local computer
• In the project directory, run npm install -D tailwindcss via your chosen CLI
• Run npm run watch-css to begin the live watch (using existing config)

N.B. This assumes you keep the structure incl. /public and /src dirs and tailwind.config.js file exactly as seen in the repo files. If you wish to change this, you will either need to change the source and output dirs and config file as necessary or generate a new one via npx tailwindcss init and adjust it accordingly. For any other information regarding Tailwind installation and configuration please visit the Official Documentation.

SOURCE ASSETS

All assets used deemed relevant for this project to be used client-side and cloned to a local computer have been added in their respective directories. Below are a list of key source files which, if modified for any customisations, will need to be amended respectively. This list is not meant to be exhaustive and may be updated at any one time.

• The Fonts are locally hosted and can be found in the src directory under /fonts Any changes to these will subsequently need to be made in the input.css stylesheet in order for Tailwind to compile it correctly to the output.css
• The 'attribution' section in the footer will need to be altered to reflect the new owner (being yourself) for any changes that have been made. This would include both the name and the link appended to it (which currently points to this repo)
• Deployment for a cloned/forked repo to a third-party hosting will subsequently need the link present in the Links changed respectively to reflect the different repo created

PULL REQUESTS

While the repo owner is open to new/alternative approaches to the code leveraged in this repo, please kindly note he is only considering PRs pertaining to the following:

• Improved functionality,
• Improvements to accessibility
• Improvements to stability

PRs therefore pertaining to design or aesthetics will not be considered at this time. If you would like to discuss these separately, the repo owner will happily do so. You may contact him either via email or via LinkedIn.