If you're using VS Code, you can use its Markdown preview feature to read this file in a nicely formatted way.
If you're not using VS Code, I highly recommend using Markdown Live Preview to read this file. You can copy the contents of this whole file and paste in that website, it will enhance your reading experience.
This is a website template built for a mobile app landing page. It can be used for other purposes as well, like a product landing page or a SaaS landing page after some customization.
Thanks to Tailwind CSS's configurable nature, many design elements can easily be customized including colors, typography, and spacing. This allows you to take this template anywhere you want.
To get started with the template, first navigate to the template folder in your command line and then run the following commands in your terminal, in order (note that the $ character represents your terminal prompt, don't include it if you copy the commands).
After you navigate to the template folder, install all the dependencies that this template needs:
$ npm install
This command will produce a node_modules folder in the template folder. You don't need to touch node_modules anytime.
After the dependencies are installed, start the development server by running:
$ npm run dev
This command will serve our website at http://localhost:3000. Go ahead and visit this address in your browser of choice.
After you've configured and made this template your own, it's time to build the project and publish it! To build to project, run the following command:
$ npm run build
This command will produce a dist folder in the template folder. You can take the contents of the dist folder and publish it anywhere you'd publish a static website (like Netlify).
Below is the file & folder structure of the package that you received:
- resources: Includes the Figma design file.
- nestor.fig: Figma design file that includes the high fidelity wireframes of both the desktop and mobile versions of the template.
- template: Includes source code of the template.
- public: Includes images, favicons, fonts, manifest file, and other assets that Vite will serve from root address, which is "/" .
- src: Includes JavaScript and CSS code for the template, and a vendor script to detect browser's WebP support.
- .gitignore: If you create a git repository out of the template folder, this file will tell git that it should ignore files & folders listed here.
- index.html: The main HTML file for this landing page template.
- package.json: Includes a list of direct depencencies of the template project, some browser configuration, and executable commands that can be used to build the project or start the dev server.
- package-lock.json: Describes the exact dependency tree that was generated by NPM, including all transitive dependencies. You do not need to touch this file.
- postcss.config.js: PostCSS configuration. We need this because we use Tailwind as a PostCSS plugin, among other plugins like Autoprefixer.
- tailwind.config.js: Tailwind CSS configuration.
- vite.config.js: Vite configuration. This is required because the template has multiple pages (index, blog, post, terms). If you want to use only the index.html page, then you can remove this configuration file altogether.
- blog: Includes two extra pages that you can use for your blog.
- index.html: Homepage for your app's blog.
- post.html: Single blog post page.
- terms-of-service: Includes a text-only page which you can use for many purposes: Terms of Service page, Privacy page, or FAQ page.
- index.html: Multi-purpose text-only page.
- LICENSE.md: Includes the license for this template.
- README.md: The documentation file.
Below is the tech stack used for this template with short explanations of each technology:
- HTML & CSS: Markup and styling.
- Tailwind CSS: Provides utility classes and a means to create a configurable design API that's consistent and predictable.
- JavaScript: For interacting with the DOM.
- Vite: Used as a bundler, transformer, and a dev server. I used Vite instead of other bundlers because it's very intuitive to use and requires almost zero configuration.
- PostCSS: We use several PostCSS plugins (see postcss.config.js for full list) to process our CSS file. Tailwind CSS is one of those plugins.
- Notable NPM modules:
- @srexi/purecounterjs: Provides counter logic for "Data Points" section.
- swiper: Provides swiper logic for "Testimonials" and "Pricing" sections.
- tailwind-scrollbar: Provides utility classes to customize scrollbars.
To make navigation easier, each section in index.html file includes a unique comment at the beginning of it. This comment includes the section's name as well as a @ character prepended to the section name. To navigate easier in this file, use the search functionality of your text editor and search for "@section_name". For instance to go to the CTA section you can do Ctrl+F and search for "@cta", to go to the How It Works section you can search for "@how it works", and so on. After the saerch, you'll be brought to the beginning of the section. Make sure you're searching in case insensitive mode to make the search easier.
Note that if you're using VS Code, you can collapse all the parent HTML tags of the sections, giving you a nice overview of the whole template.
Here are all the section names you can use with above information:
- Loading screen
- Navigation
- Hero
- Features
- How it works
- Data points
- Testimonials
- Pricing
- Newsletter
- CTA
- Footer
In the index.html file, other important notes are tagged with "@NOTE" comment. I recommend reading these comments before you make updates to the file as they can save you a lot of time. I wrote them in the index.html file because they are concerned with specific class names or conventions in a specific location in the file. Again, to see the imporant notes, you can search for "@NOTE" in your text editor.
Sections in script.js are separated based on which part of index.html file they are concerned with. That's why each section in script.js is separated into independent parts that are concerned with only one section in index.html. This means if you want to remove any section in index.html, you can find its corresponding section in script.js and remove it to eliminate unused code.
Same with index.html, you can search for section names in script.js in the form of "@section_name".
Each section in script.js is wrapped with #region and #endregion comments. These are special comments that VS Code understands. They allow us to collapse everything between those comments, which is very useful to get a high level overview of the whole file. As an example, here's what a section title comment looks like in script.js:
//#region @Navigation - Sticky navigation logic
It's in the format of:
//#region @section_name - section_description
-
Job Finder Ui App Kit by UI Freebies: Used inside the device mockup in Hero section. Note that you'll need to replace this image with your own app screenshot. You can do the replacement in the provided Figma file. Resource: https://www.figma.com/community/file/1095632577663801003/Job-Finder-Ui-App-Kit
-
Testimonials photos: You can swap these with photos of your customers or their brand logos if you wish:
- Photo by Emmy E: https://www.pexels.com/photo/woman-wearing-gray-notch-lapel-suit-jacket-2381069
- Photo by Andrea Piacquadio: https://www.pexels.com/photo/man-sitting-on-chair-beside-table-834863
- Photo by Mikhail Nilov: https://www.pexels.com/photo/smiling-woman-wearing-a-plaid-blazer-in-office-8101982
- Photo by Karolina Grabowska: https://www.pexels.com/photo/cheerful-woman-working-on-laptop-and-smiling-4467683
I provide free support for this template as long as one of these conditions are met:
- Part of the code is unclear.
- Something doesn't work as expected.
- A file or a snippet of code is somehow missing.
I provide paid support in all other cases, like:
- Customizing the template to match your brand identity.
- Extending the template to include new sections/functionality.
- Publishing/Deploying the template.
In either case, you can reach me at [email protected]. I will respond back in 1 business day.