Project
Dog Glossary
Hard
260 completions
~ 13 hours
4.6Improve your HTML and JS skills by fetching data from an API and displaying it on a web page. You will also work with promises and handle different data structures in JS.
Provided by
JetBrains Academy
About
Isn’t it nice to see pictures of cute dogs on the Internet? In this project, create a page to show random dog pictures and a list of dog breeds using a public API. Practice handling APIs, HTML & JS to build a web page.
Graduate project
This project covers the core topics of the Frontend Developer course, making it sufficiently challenging to be a proud addition to your portfolio.
At least one graduate project is required to complete the course.
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:
Fetch a random dog picture and display it on the page.
Fetch the requested dog breed and show the image on the page.
Fetch the requested sub-breeds and display them as a list on the page.
Fetch all of the dog breeds with sub-breeds and show them on the page as a list.
Add some CSS and style the page however you like.
Reviews
2 months ago
Good basics about API, fetch function in JavaScript and iterations in arrays and objects
7 months ago
I learned how to consume the Dog API using modern JavaScript and how to properly handle request errors. I faced challenges with the rendering logic for sub-breed lists and layout responsiveness, but I managed to overcome them by applying Clean Code best practices and Mobile First styling.
8 months ago
This project was great practice for the Fetch API and DOM manipulation. I learned to handle different API response statuses and navigate nested data structures. It was a well-paced challenge that significantly improved my JavaScript knowledge.
4.6
Learners who completed this project within the Frontend Developer course rated it as follows: