Free
1 - Beginner
Coming Soon Page
Coming soon page with an email input and product cards
📝 Overview
Create a sleek and modern "Coming Soon" page that's perfect for showcasing a new project or product launch.
This beginner-friendly challenge focuses on building a single-page layout with:
• A stylish email input and submit button.
• Social media links (Facebook, Instagram, YouTube, X).
• A collage of UI cards (profile, credit card, review, and tweet cards).
You’ll practice essential front-end skills like layout creation and styling with CSS or Tailwind. 🖥️💡
🎓 Learnings
- 🖼️ Creating layouts using Flexbox or Grid for a two-column design.
- 📧 Styling a basic email input with a submit button.
- 🔗 Adding and positioning social media icons.
- 🗂️ Arranging and displaying a collage of UI cards.
- 📌 Using absolute positioning with CSS or Tailwind for precise element placement.
✅ Project Checklist
Page is structured into 2 columns using Flexbox or Grid.
Title and tagline are present in the left column.
An email input and submit button are placed below the title.
Social media icons (Facebook, Instagram, YouTube, X) are aligned in the left column.
A collage of profile card, credit card, review card, and tweet card are present in the right column using absolute positioning.
🎓 Learnings
- 🖼️ Creating layouts using Flexbox or Grid for a two-column design.
- 📧 Styling a basic email input with a submit button.
- 🔗 Adding and positioning social media icons.
- 🗂️ Arranging and displaying a collage of UI cards.
- 📌 Using absolute positioning with CSS or Tailwind for precise element placement.
🌟 Bonus Features
Add validation for the email input.
Implement a fade-in effect for the UI card collage.
Add a toggle to switch between light and dark themes.
Enhance social icons with hover effects or tooltips.
Use media queries to make the layout responsive.
🛠️ Instructions
- Click on the 'Download Design' button to get the .fig file.
- Upload the .fig file to your Figma account using these steps. You can now open the design and see what you have to make.
- Export assets from Figma by pressing Ctrl+Shift+E (or Cmd+Shift+E on Mac) while nothing is selected and then clicking the 'Export' button that shows up.
- Implement the design using your preferred language or framework (aim for pixel-perfect accuracy).
- Deploy your solution for free using GitHub Pages, Netlify, or Vercel.
- Submit your solution link here and try to get a perfect score!
🔎 Check out the FAQ page for any questions regarding challenges and solutions.