Project

Landing Page for a SaaS App

Design and implement an elegant-looking, responsive landing page for an applicant tracking system SaaS app.

Frontend
</>
HTML/CSS
3-5 hours

Sign Up

About This Project

Instructions

Based on the provided design mockups, your landing page will highlight StellarHire's key features, showcase customer testimonials, feature "trusted by" badges from reputable companies, and incorporate subtle scroll fade-in effects to enrich user interaction.

You may use any tools you wish in order to build the frontend.

Make sure the design looks great on both desktop and mobile devices. You may wish to leverage a CSS framework like Tailwind or Bootstrap to take advantage of utility classes and some helpful defaults.

Objectives

  • Craft a Responsive Landing Page: Employ HTML, CSS, and JavaScript to develop a landing page that adjusts perfectly across desktops, tablets, and mobile devices.
  • Showcase StellarHire Features: Clearly and effectively present the unique features of StellarHire's ATS to articulate its value proposition to potential customers.
  • Incorporate Customer Testimonials: Integrate feedback from existing users to lend credibility and provide insights into the product's impact.
  • Display Trusted Company Badges: Enhance trust in StellarHire by displaying badges from well-known companies that use the ATS.
  • Enhance with Scroll Fade-in Effect: Implement scroll fade-in animations to make the page more dynamic and engaging.

User Stories

  1. Seamless Responsiveness: As a potential customer, I want the landing page to adapt seamlessly to any device, ensuring I can explore StellarHire's offerings anytime, anywhere.
  2. Understanding Product Features: As a potential customer, I'm interested in a straightforward breakdown of features to assess how StellarHire fits into my hiring workflow.
  3. Valuing Customer Testimonials: As a potential customer, testimonials from current users are crucial for me to understand the product's real-world effectiveness. I should be able to see testimonials at a glance and dig deeper into case studies to learn how the product has helped other companies.
  4. Recognizing Trusted Brands: As a potential customer, seeing StellarHire's adoption by reputable companies significantly boosts my confidence in choosing the ATS.

Stretch Goals

To go above and beyond, consider choosing one or more of the following objectives:

  • Optimize Performance: Prioritize the landing page's performance by optimizing images, employing lazy loading techniques, and minimizing the size of CSS and JavaScript files.
  • RSVP Functionality: Allow users to RSVP to events directly from the card and display a visual confirmation of the RSVP status.
  • Incorporate SEO Principles: Apply foundational SEO strategies, including effective use of headings, meta tags, and alt text for images, to improve the landing page's search engine visibility.

Starter Materials

To help you get started, you're equipped with the following assets:

  • Project Images: Necessary image files, including Buggsy's logo and icons, are provided. The files are in svg format to improve performance.
  • Style Guide: A comprehensive guide provided by Buggsy, detailing color schemes, fonts, and other design elements to align your navigation menu with the brand's aesthetic.
  • Preview Images: Visual benchmarks to guide your design to completion.
  • Figma File: Leverage design files in Figma as a blueprint for your development efforts.

Let's Start Building!

This project and many others like it are available with a Curricular account. Get started today.

Sign Up

Already have an account? Sign In

Includes

  • Detailed User Stories
  • Figma Design File
  • Image files of the target layout
  • Starter Code and README file

Skills Practiced

  • HTML & CSS Expertise: Translate design mockups into a fully responsive webpage using the latest HTML5 and CSS3 techniques, focusing on semantic markup and responsive styling.
  • JavaScript Dynamics: Leverage JavaScript to activate scroll fade-in effects, adding interactivity and visual appeal to the landing page.
  • Layout Mastery with Flexbox/Grid: Utilize CSS Flexbox and Grid systems to structure an adaptable layout that gracefully responds to various display environments.
  • Accessibility & Best Practices: Ensure the landing page adheres to accessibility standards and follows established web development best practices, offering an inclusive user experience.

FAQ

Why should I build this project instead of one from scratch?

In a professional context, you're rarely starting from scratch. Curricular Projects are designed to give you a constrained real world problem so you can focus on practicing the essential skills you'll use as a professional developer, and to surface specific areas to continue studying.

Can I get help if I'm stuck on a project?

Our projects are designed to be a real world assessment of your skills, like the take home assignment during a job interview. Getting yourself unstuck is part of the skills measured. As a result, we offer very little help and direction.

However, if you encounter issues with the setup, or if you find something isn't working right that should be working, you can contact us at support@curricular.dev and we'll help you out.

Do you provide official solutions to projects?

We do not provide official solutions to projects. There are many ways to solve each of our projects. Coding is a journey, so our goal isn't for you to get the "right answer." Instead, our projects are about you flexing your skills to arrive at a solution, practicing talking about your code, and giving you helpful feedback on ways to improve.

Can I get feedback on my work?

Currently, we only provide feedback on capstone projects, through our Code Review service.

The Code Review is a premium service available as an add-on purchase, combining an in-depth review of your code and a practice interview. If your project passes the review and meets all specifications, you'll receive a certificate of completion.

Where can I ask a question that isn't answered here?

Email us at support@curricular.dev or chat with us.

It's Time to Level Up

Start Building