/fem-manage-landing-page

This is a challenge on Frontend Mentor

Primary LanguageCSS

Frontend Mentor - Manage landing page solution

This is a solution to the Manage landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • See all testimonials in a horizontal slider
  • Receive an error message when the newsletter sign up form is submitted if:
    • The input field is empty
    • The email address is not formatted correctly

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Vite - JS Generated starter template using vanilla Javascript

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.

To see how you can add code snippets, see below:

<h1>Some HTML code I'm proud of</h1>
.proud-of-this-css {
	color: papayawhip;
}
const proudOfThisFunc = () => {
	console.log("🎉");
};

If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.

Note: Delete this note and the content within this section and replace with your own learnings.

Useful resources

  • Vite - This can help setup your development environment. Can run vanilla Javascript and Typescript or use your favorite framework.
  • Google Fonts - Embed the font you need easily.
  • Modern CSS Reset - Not needed but a big help to reset CSS default values.
  • SVG Sprite - Can help you create an SVG file that contains multiple images, ideal for social media icons.
  • A11Y Slider - Can help you create slider section on your website.
  • Kevin Powell Tutorial - Very helpful for beginners or those who want to improve their CSS skills and build responsive website.

Acknowledgments

Credits to Kevin Powell Youtube tutorial. See the link in the Useful resources