Challenges
Are you just starting with Front-end edeavor and you are looking for something to code? Here, you’ll find a collection of engaging challenges to improve your front-end development skills. Each challenge presents you with a specific Figma design, complete with layout, colors, typography, and elements. Your task is to bring these designs to life using HTML, CSS, and JavaScript. Use your expertise to accurately implement the design’s visual elements while ensuring responsiveness and cross-browser compatibility. Our code challenges are designed to simulate real-world scenarios and help you sharpen your problem-solving skills. As you tackle each challenge, you’ll encounter common front-end development obstacles and gain valuable experience in overcoming them.
Winter SEO Challenge
Are you ready to put your SEO skills? How good is your agency? Here is my Challenge
Every Seasone I’m giving a keyword and the challenge begins 😛
In the end of the Quater it’s a simple check. We google the keyword and the first result on the first page wins.
And this season the word is:
- 12w
- SEO, On Page, Off Page
- Advanced
Mountain Travel Landing Page
In this coding challenge, you will have the opportunity to exersice your skills in HTML, CSS, and JavaScript by creating a visually appealing website.
The website will consist of several components including a hamburger menu, article section, cards for showcasing services, a service title section, and a captivating main banner with a large picture.
Challenge Components:Hamburger Menu: Implement a responsive hamburger menu that transforms into a vertical navigation bar when clicked. The menu should smoothly slide in and out of view, providing seamless navigation through the website’s sections.
Article Section: Create an article section that displays engaging content related to the business’s mission, values, or recent achievements. Use HTML to structure the content and CSS to style the text and images, making sure the section is visually appealing and easy to read.
Service Cards: Design cards that highlight the various services offered by the business. Each card should include a relevant icon, a concise title, and a brief description. Use CSS to arrange the cards in a visually pleasing grid layout.
Service Title: Develop a section that introduces the services offered in more detail. Use creative typography and styling to make the section stand out. You can use JavaScript to create smooth scrolling effects when clicking on different service titles.
Main Banner with Big Picture: Design a main banner that spans the width of the viewport and features a captivating high-resolution image related to the business’s industry. Overlay the image with a call-to-action (CTA) button that encourages users to take action. Use CSS to ensure the banner is visually striking and responsive across different devices.
- 16h
- HTML5, SCSS, JS
- Beginner
Web Hosting Landing Page
In this coding challenge, you will have the opportunity to exersice your skills in HTML, CSS, and JavaScript by creating a visually appealing website.
The website will consist of several components including a hamburger menu, article section, cards for showcasing services, a service title section, and a captivating main banner with a large picture.
Challenge Components:Header menu Implement header menu providing seamless navigation through the website’s sections.
Main Banner with Big Picture: Design a main banner and features. Add a call-to-action (CTA) button that encourages users to take action. Use CSS to ensure the banner is visually striking and responsive across different devices.
Article Section: Create an article section that displays engaging content. Use HTML to structure the content and CSS to style the text and images, making sure the section is visually appealing and easy to read and features title, description and an image.
Packages: Design cards that highlight the various services offered by the hosting company with prices. Each card should include a relevant icon, a concise title, brief description, price tag and a CTA button.
Featured Domains list Develop a section that introduces list of featured domains. Each domain name is a CTA.
Testimonials Develop a section that introduces a picture of the user giving the testimonial and a quote.
Footer section Develop a footer section that introduces vertical menus and a social media link menu.
- 4d
- HTML5, SCSS, JavaScript
- Beginner
Sports Tracker Dashboard Page
In this coding challenge, you will have the opportunity to exersice your skills in HTML, CSS, and JavaScript by creating a visually appealing website.
The website will consist of several components including a hamburger menu, article section, cards for showcasing services, a service title section, and a captivating main banner with a large picture.
Challenge Components:Header menu Implement header menu providing seamless navigation through the website’s sections.
- 10d
- HTML, SCSS, JavaScript
- Intermediate