Project
Site for Marathon
Hard
163 completions
~ 8 hours
4.1Focus 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
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
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
1 week ago
It was a very good refresher on CSS. Stage 4 was a bit tough as no theory on flexbox was provided in the project, but you did need to know how to apply it. In the end, thanks to a good Youtube video that explained flexbox, I managed to overcome that challenge.
Daniel Wirth
5 months ago
I have learned some html and css. I think it's good as a backend developer to learn the basics of frontends.
5 months ago
Why computed style should be accounted for in front-end tests, and why values set in the CSS will not translate the same to all users in real life.
4.1
Learners who completed this project within the Introduction to Frontend course rated it as follows: