-
Follow the instructions atop the Recipes project to set up a GitHub repository for this project (of course you'll need to change the title).
-
Create a blank HTML document.
-
Come up with a plan -- which sections of the page should be grouped together (e.g. the navigation bar vs the video vs the sidebar etc)?
-
Create empty semantic HTML elements to enclose those sections.
-
Use basic CSS to size and position them appropriately on the page. It may be helpful to make their backgrounds different colors so you can see the different sections. Don't forget to use your browser's developer tools (right click on the page, click "inspect element")!
-
Now let's start filling in those divs with content by creating the navbar.
-
Watch this YouTube video on embedding a YouTube video in a webpage.
-
Embed a YouTube video of your choice into your page.
-
Next, build the sidebar section where previews of suggested videos show up. Obviously don't worry about generating those previews... just grab some thumbnail-sized images and plug them in.
-
Next, finish up by filling in some of the elements below the video -- the title, description and number of views. Ignore the icons (many of them are produced using sprites or more advanced techniques so you won't be able to just grab them by copying them).
-
Push your solution up to GitHub.