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.
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.
- Elements https://www.tutorialspoint.com/html/html_elements.htm
- Attributes https://www.tutorialspoint.com/html/html_attributes.htm
- Images https://www.tutorialspoint.com/html/html_images.htm
- Styles Sheets: https://www.tutorialspoint.com/html/html_style_sheet.htm
- Media queries https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries (to make the page responsive)
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
For the brand icon styles (brand colors) please use this CSS file: https://github.com/CodingWolvesIO/assets/blob/main/HTML-CSS/brand-colors.css
- 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.
- Create three sections for header, central part (with video), and footer with the information about the video.
- Add the logo (it may be an icon, text, or image) in the header, as well as your page's name.
- On the right sight, you have to add several icons and the user's picture - they all should be aligned well.
- In the central part, add your favorite video (see the notes below).
- 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).
- Style everything, you may want to use nice handwriting fonts but be moderate, don't overuse them.
- 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).
- Play with different sizes on your browser and tweak your styles until the webpage looks great for any size.
Play with icons, colors, fonts. Create a logo from you've never made it before.
- The website should look good for any device.
- The central part should change its size according to the device's size that no scrollbar would be shown.
- The header and footer should transform to fit the current screen size and be visible and usable.