Header as the name suggests is located at the top of your website and contains the title, logo and few important nav links. Since this component holds your company logo and title it is essential component of any website. In this challenge you will develop a very basic header.

Footer comes last and relatively less viewed but any standard website ends with a footer. This component generally consists of things with are not very important but necessary for any website. In this challenge you are required to build a basic footer.


Cards are one of the most extensively used components. They are useful for systematically rendering a group of logically related data. They come handy while creating responsive web pages as they can be resized and rearranged to best fit the resolution of a screen. In this challenge you will work on developing cards.

Carousel by definition is a slideshow of photos. It is relatively less used component but an attractive one. You can choose to make use of Carousel when you want to emphasize on multiple things but space is a constraint, as carousels are more interactive than a simple image can immediately grab user's attention. In this assignment you are required to build a carousel.

Apart from the colours and fonts the way you arrange the content of your website play an important role in making the website visually appealing and easier to use. There are many ways to arrange the content on your page but CSS grid is by far the best layout module, that helps divide your page into different regions. In this challenge you are supposed to use the concept of grid and build a simple page.

A Hero section follows the header, it forms the first glimpse of you website. It can contain big banner/videos or any catchy words. As this section hooks the user it must be designed to look clean and attractive. This assignment you are going to build a hero section.

Toast message is a very common component used to show the status/message regarding an operation without disturbing the flow of the rest of the website. In this assignment you are required to develop toaster.

Form takes user inputs in a website. Some of the basic use cases include Registration form, Login or Contact us. Form can consist of various types of inputs each of which serves different purpose. Since you getting started in this project you are required to build a basic contact us form with primitive form elements.

If you are building a responsive website, hamburger is a "required" component. It's primary use case includes displaying the navigation links (elegantly typically on devices with small resolution) without disturbing the flow of the content on a website. It basically consist of a button which when clicked a menu containing the links slides in.

In this assignment you are going to create a FAQ section by making use of an Accordion. Accordion is a component that is useful when you want to toggle between hiding and showing large amount of content. This component helps improve user experience and space utilization by displaying only the important points and then allowing user choose to toggle the section he wants, instead of dumping all the content to the screen.

The soul purpose of a Modal in a website is to direct the user's focus to a particular section by disabling the rest of the page. This can be used in cases such as confirmation popups, warnings, displaying terms and conditions or just giving more info on a particular subject. In this assignment you will develop a simple modal. Note this assignment as requires knowledge of javascript.

Dropdowns can be seen in almost any webpage. They can be used in variety of use case like dropdown menus, filters, select menu etc,  The main objective of a dropdown is to reduce the space consumption in a webpage at the same time, making it easier for an user to use the site. In this assignment you will build a Dropdown. 

A Loader is a really simple yet one of the most important component. It keeps the user engaged but letting the user know that some process is happening in the background and the content will be displayed soon. Loaders can be designed in variety of ways in this assignment you are required to develop 3 different varieties of loaders.

This is another assignment designed to test your API integration skills and displaying data dynamically, this is a relatively hard assignment that involves developing a MoviePedia App which fetches details regarding different movies and displays it to the users in a presentable form. In this assignment, in addition to HTML, CSS and JS logic we test how well you fetch and render data dynamically.

This assignment will take the simple form to a higher level, here you are going to make use of almost all the varieties of inputs. Multi stage forms provide a better user experience by dividing a huge form into sections, where user can save each section independently. This also helps reduce the clutter in the page creating a cleaner webpage. If you have a large form then multi stage form is the way to go.	This assignment will take the simple form to a higher level, here you are going to make use of almost all the varieties of inputs. Multi stage forms provide a better user experience by dividing a huge form into sections, where user can save each section independently. This also helps reduce the clutter in the page creating a cleaner webpage. If you have a large form then multi stage form is the way to go.

Time to show off your web development skills in a creative way. You have guessed it right in this project you are required to develop a portfolio where you showcase your skills and achievements in the form of a webpage. You can now share this link to anybody and this project not only acts as a portfolio but also implicitly proves your web development skills. This is a must do project.

Tic-Tac-Toc is an old school game. Tho the game sounds old school, it is quite a challenging project to develop. This assignment includes building a Tic-Tac-Toe game. Here we primarily test your JS skills. This also tests your ability in writing an optimised and understandable logic in order to achieve the goal.

Todo-List can help you organise your day to day tasks well. This is another project which is a must do while practicing web development. The project might look old-fashioned but puts all your web development skills to test. This project primarily focuses on the JS skillset and helps you better understand the concepts of localStorage and use of DOM Manipulation.

As a part of developing Landing page you are required to create a blog. Blog is a place where you can showcase your thoughts in a systematic manner. This can be medium to advance complicated depending on the content you want to blog. In this project to reduce the complexity you are required to build only the listing page in a blog. In this project you will use the concepts of header, hero section, cards and a single form combined.

Projects