Web Development with HTML and CSS

Web Layout: Example 1

Assessment
Activity
Enlightenment
What CSS property can be used to wrap text around an image?
wrap
display
float
inline
Which of the following strategies enables webpages to be created more quickly?
Create all the pages with similar layout at the same time
Finish one page completely and then use that page as a template for creating other pages with the same layout.

Digital Game Revolution

Create a "digital game review" website that meets the following criteria

The website should contain a home (landing) page named index.html that makes the purpose of the site immediately clear, and at least three additonal pages that each provide a review of a digital game. Instead of using "Digital Game Revolution", be creative in the naming and branding of your website.

The navigation should be persistent (always present) and consist of a link to the home page followed by an alphabetical list of all games reviewed on the site. The navigation should have a vertical orientation on the side of the page instead of a horizontal orientation at the top. That is, the navigation items should be listed vertically and to the left of the content that changes from page to page. This will ensure that you have unlimited space within the nav to add in new reviews.

HINT: To place the "content" div to the side of the "nav" div, do one of the following:

  • option 1: Give the "nav" div a set width and set it's float property to left; and give the "content" div a set width and set it's float property to right. Finally, add a div following the content div (this could be a div with content such as the footer, or it could be an empty div with no content) that has a CSS clear property of both.
  • option 2: Set the display property of both the "nav" and "content" div to inline-block; and place them both within another div that will wrap around the content and nav. Adjust their width's as needed.

On each page other than the landing page, add a game review that includes a screencast with audio commentary instead of a text-based review. You may create your own review video or find one online. To embed a YouTube video on a website, click the "Share" button under the video, click the "Embed" button, copy the iframe code that is provided, and paste the code into the html of your webpage at the desired location. Also, include a heading with the title of the game and use some visual indicator (e.g. starts, hearts, thumbs-up, etc.) to rate the game.

The CSS that is common to all pages should be in one external stylesheet. Additional styles that are intended only for one page (such as the landing page) may be included in the same stylesheet, in a different external stylesheet, or in an internal stylesheet defined within the HTML page. Take your time when styling the site to make sure it looks good.

nothing extra for this lesson :(