Simple Sign Up
- README file to help you get started
- Style guide for fonts, colors, etc
- HTML file with pre-written content
- Figma design file - Learn More
Brief
In this challenge, you will build out a Simple Sign Up Page. This will involve using HTML, CSS and JavaScript as you validate user input.
Challenge - Your users should be able to:
- View the optimal layout for the component depending on their device's screen size
- Present an input that checks to see if the email is valid before it submits.
- If the email isn't valid, present an error message.
- If the email is valid, submit the form and replace it with a success message.
Getting Started
- 1. Download the starter code
- 2. Set up the project with version control (e.g. Git)
- 3. Read the README.md file and have a look around the project
- 4. Get colors, fonts etc from the style-guide.md file
- 5. Set up your project/file architecture however you want
Start coding!
Ideas to test yourself
Write your styles using a pre-processor, such as Sass, Less or StylusPractice using modern CSS features like Flexbox and Grid
DOWNLOAD FIGMA FILE
Want to try and build pixel-perfect projects? The free download comes with PNG design files, but you can purchase the original Figma design file here. This will give you access to the exact design details you need to build the best solution possible.
That's a great question! GitHub is a tool that anyone in the software industry eventually will need to use. You can create an account at github.com in just a couple clicks! The bonus is that you will never have to remember a username or password for this website 😂
While in Beta you can give feedback on your solution but we aren't at the point of allowing others to give feedback yet. Top of our our feature request list!
Absolutely! Frontend Playground is meant to inspire you to create portfolio quality projects at your skill level.
Getting stuck is probably the most frustrating experience when learning to code. Especially, when learning alone. You now have the opportunity to see how others approached a problem and figured out a solution.
Our site is loaded full of free changes that are great for testing and developing your skills. The Figma desings allow you to really approach your design with precision and mimics an actual workplace environment where you are implement a design. they will stretch you because you won't just throw content on the page and call it good. It will cause you to be precise and professional.
With the launch of this new site I'm anticipating that there are a number of bugs to be addressed and features that would be awesome to have! Please click the BETA banner in the upper left hand corner to submit feedback!
If you would like to reach out please feel free to click on the BETA banner in the upper left hand corner or mail us at: hey@frontendplayground.io