The task

Congratulations on making it to the final task of the course! 🙌

Consider this project a good opportunity for you to test the knowledge that you obtained so far, and to practice creating complex layouts. You might feel overwhelmed by the project at first, but it gets easier when you break it down into smaller tasks.

In the articles that follow, a step-by-step guide for creating the layout is provided. Feel free to use these instructions when you are stuck, or to compare the workflow with yours when you are done with the task.

The prototype

Create a page layout for a clone of the web version of a popular social app:

The page has a header, a feed and a sidebar. The feed and the stories list in the sidebar are scrollable areas. The sidebar has a fixed width, and the feed takes the rest of the horizontal space.

Open the prototype in a new tab, try scrolling and resizing it to learn more about the layout. Spend some time planning your work, think how you can break the implementation into steps.

If you decide that the proposed design has room for improvement, don't hesitate to try different layouts and styles!


When you feel like you’re stuck and you can’t find your way out, reach out for help on the Layout basics forum.

When you are done with the task, share your results on the Show and tell forum to celebrate and inspire others.

Good luck! 🤞