Video Page

In this project, you will create a webpage showing a video. Simple, but may be tricky.

The goal

You will create a web page with the embedded video, responsive header with icons and the search field, and informative footer.

What you will learn
  • How to embed a video frame
  • how to create a header with the search input and icons and make it responsive
  • advanced technique of using media queries.
Preliminary material

Please refer to the very first project in this series that explains in detail how to create and work on a project: https://www.codingwolves.io/project/a179f0e9/simple-personal-page 

Before you start, get familiar with the basics of HTML and CSS (if you never tried them), or refresh in the memory. We found these resources pretty useful.

This is also a good short introduction to HTML: https://www.geeksforgeeks.org/html-introduction/ 

This tutorial will tell you how to embed the video into your HTML page: https://www.tutorialrepublic.com/html-tutorial/html5-video.php 

We use the Fontawesome version 5.1 for icons and Google Fonts for the font.

For the brand icon styles (brand colors) please use this CSS file: https://github.com/CodingWolvesIO/assets/blob/main/HTML-CSS/brand-colors.css 

Instructions
  1. Create the project folder, add files, and include all links. The most detailed instructions on how to start any project can be found in Step 1 of the first project
  2. Create three sections for header, central part (with video), and footer with the information about the video.
  3. Add the logo (it may be an icon, text, or image) in the header, as well as your page's name. 
  4. On the right sight, you have to add several icons and the user's picture - they all should be aligned well.
  5. In the central part, add your favorite video (see the notes below).
  6. At the bottom put the video's title, number of views. The right part should have the number of likes and dislikes as well as some other icons at your discretion (remember it's not a youtube page so you can put whatever you want).
  7. Style everything, you may want to use nice handwriting fonts but be moderate, don't overuse them.
  8. After you are satisfied with the website for a big screen, test on smaller screens. We want you to wrap the search input under the first block having the logo and user picture. It may be tricky, but we have one idea (see the notes below).
  9. Play with different sizes on your browser and tweak your styles until the webpage looks great for any size.
Note 1. How to embed the video. If it's a youtube video, click the share button, then click the Embed button. Copy the HTML code from the right. Note, it may have sizes but you have to make sure your video expand for the current device's size that can be any. (You also can embed a video from Vimeo service, we don't provide the exact instructions, so figure it on your own.)
 

 

Note 2. When working on the responsiveness for the header, it may be tricky to achieve this effect:
should be "transformed" to this:
We know at least one way to do it but we encourage you to find out what it could be. If you achieve it, share it in the comments! Also, if you are stuck, let us know and we help you.

 

 

Additional ideas

Play with icons, colors, fonts. Create a logo from you've never made it before.

Screenshots
Acceptance criteria
  1. The website should look good for any device.
  2. The central part should change its size according to the device's size that no scrollbar would be shown.
  3. The header and footer should transform to fit the current screen size and be visible and usable.
No posts yet! Share your experience with this project, help others, ask and answer questions, get feedback