Sketch design file for: Pricing component with toggle

This challenge will get you thinking about building an accessible custom toggle control and also test your layout skills.

www.buymeacoffee.com/reward

You will be taken to the reward link after the purchase. We will also send you an email with the reward link.

Share with your friends

More from Matt Studdert

Sketch design file for: Fylo beta sign up landing page

Test your layout skills with this responsive split-screen beta sign up landing page. This is a great challenge if you're looking for a simple layout to get started with.

Sketch design file for: Fylo landing page with detailed integrations section

There are some interesting layout challenges in this one. Test your skills with both mobile and desktop designs with some multi-column layouts.

Sketch design file for: Fylo landing page with features grid section

Test your layout skills on this challenge with a couple of tricky areas. Both the features section and the footer will need some planning to find the best solution.

Sketch design file for: Huddle landing page with curved sections

Practice using pseudo-elements for styling extras and the CSS position property with these wavy sections.

Sketch design file for: Huddle landing page with split benefits section

This challenge is great if you're just starting to build more complex pages. It's mostly a single column layout, but with a couple of more challenging areas.

Sketch design file for: Huddle landing page with single column layout

This challenge is perfect for beginners. The content is mostly in a single column layout, with some complexity in the footer.

Sketch design file for: Fylo landing page with two column layout

This project is great if you're starting to get confident with slightly more complex layouts. The second section with the testimonial area will provide a nice challenge.

Sketch design file for: Huddle landing page with single introductory section

A perfect challenge for beginners, this project will get you working with a two column layout.

Sketch design file for: Fylo landing page with dark theme and features grid

This design has some nice layout challenges in it. A perfect training ground to practice your Flexbox and/or Grid skills.

Sketch design file for: Huddle landing page with alternating feature blocks

This challenge is perfect if you're wanting to practice your layout skills. If you're starting to get a bit more confident laying out a web page, give this project a go.

Sketch design file for: Huddle landing page with coded decorative elements

Test your ability to code and position decorative elements with this challenge. The intro section is where most of the planning for this challenge will come in.

Sketch design file for: REST Countries API with color theme switcher

If you're wanting to test your JavaScript skills this is the challenge for you. Use whichever JS framework you prefer and pull data from the REST Countries API.

Sketch design file for: Ping single column coming soon page

This challenge is great for beginners and offers a chance to practice basic client-side form validation.

Sketch design file for: Clipboard landing page

Put your layout skills to the test with this HTML & CSS landing page challenge. This challenge includes a design for hover states.

Sketch design file for: Single price grid component

In this challenge, you will build out the pricing component to the designs provided. This is perfect for beginners and people who want to complete a smaller challenge.

Sketch design file for: Intro component with sign-up form

Practice building out a sign-up form complete with client-side validation using JavaScript.

Sketch design file for: Bookmark landing page

This challenge will really test your layout skills. There are also areas that will require some JavaScript, such as the tabbed features section and the FAQ accordion.

Sketch design file for: Project tracking intro component

Some interesting layout and code challenges are baked into this design. Perfect if you're a beginner who is starting to get a bit more confident with your layouts.

Sketch design file for: Base Apparel coming soon page

This layout looks simple enough, but there are some interesting details to it that will test your CSS skills. You'll also get to practice basic form validation.

Sketch design file for: Four card feature section

A nice layout-based challenge for beginners. This will test anyone who is new to multi-column and responsive layouts.

Sketch design file for: URL shortening API landing page

Integrate with the rel.ink URL shortening API and play with browser storage in this landing page challenge.

Sketch design file for: Rock, Paper, Scissors game

This challenge will seriously test your HTML, CSS and JavaScript skills. There's even a Rock, Paper, Scissors, Lizard, Spock version if you really want to challenge yourself.

Sketch design file for: Insure landing page

Test your layout skills with this HTML & CSS only landing page. This challenge is perfect if you're starting to get confident in laying out web pages.

Sketch design file for: Manage landing page challenge

This challenge will be a great test for your responsive skills. There are lots of small details and slight content shifts for different screen sizes.