Project

Site for Marathon

Hard
196 completions
~ 8 hours
3.9

Focus on HTML and CSS: basic styles and positioning. Use iframes to embed external content to your webpage. Work with images and add animation.

Provided by

JetBrains Academy JetBrains Academy

About

You were hired by an NGO to build a site for one of the marathons in London. There are certain requirements, the site must show the distances, weather, and the map of the marathon. Sounds interesting? Let's dive into it!

Graduate project icon

Graduate project

This project covers the core topics of the Introduction to Frontend 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:
Use iframes to add external content to a web page. Start by adding a YouTube video and a weather forecast to your page.
Style the iframes in the previous stage with CSS, including positioning and sizing them to fit perfectly on your web page.
Add descriptions of distances and images to the project.
Add a button and the block title with a video to improve the style of the content you've added in the previous stage.
Let's add a Google map with the starting point so that runners and spectators don't get lost.
Finally, add a bit of flair to the images from by animating them when the user hovers over.

Reviews

Felix Anheier avatar
Felix Anheier
2 months ago
The Basics of HTML and CSS. To use iframes and much more. It was Great!
Juan Esteban Serrano Aldana
3 months ago
It’s satisfying to nest styles while integrating services from other websites using iframes. This is by far the project in this course that delves deepest into CSS, but it’s unfortunate that completing some of the required tasks requires learning topics that were never covered in the course itself, ...
Juris Jurks
4 months ago
Worst project so far, error #13 cannot be fix, until breaking website order.

3.9

Learners who completed this project within the Introduction to Frontend course rated it as follows:
Usefulness
4.2
Fun
3.8
Clarity
3.6