Project
Petbook
9 completions
~ 14 hours
2.8 This project is deprecated or unpublished. It may be difficult or impossible to complete it. Please switch to another project.
Level up your HTML and CSS skills by creating a multipage layout from ready-made Figma designs. Also, master CSS Flexbox and learn about HTML5 Forms. In the end, add modern animations to the website and practice responsive web design techniques.
Provided by
JetBrains Academy
About
Let us introduce you to the new social network for pets: the Petbook! It's that simple — as the leading developer, you need to design the layout for it. Practice an actual work process in the Frontend field: use HTML and CSS to build a multipage website from our carefully prepared Figma designs.
Training project
This project allows you to practice and strengthen your coding skills, helping you get ready for more advanced tasks ahead.
What you'll learn
Once you choose a project, we'll provide you with a study plan that includes all the necessary topics from your course to get it built. Here’s what awaits you:
Create the main structure of the website with semantic elements. Design a simple layout with a navbar, hero section, aside, and footer.
Make a profile page look nice! It will contain a profile card and description. Also, add information to the navbar and footer.
On the Friends page, your pet can look for animals from other countries and stay in touch with them. Information about pets is displayed on the cards and can be searched using the filter.
Build the HTML forms for the Personal Data and Settings page, including different types of input: text, phone, email, checkboxes, and much more!
It's time to add some interactive animations to the Petbook!
Make the website elements display correctly on devices with different screen sizes.