You've been learning HTML and CSS over the previous lessons. You've been
receiving specific guidance ("Use a <link>
tag!") and have been steered by
our documentation or tests. In effort to help you build your confidence, we're
going to give you nothing except some specifications and leave the document
structure and styling to you. It's time to tie all your learning together
into one project. You must create....
...a brochure site!
When the first web sites started to appear in the mid-nineties, brochure sites were the only sites on the web. They were called brochure sites because, well, like brochures they provided static text and images, contact information, a few divisions, and had a certain style.
- Build a brochure site
- Your site must use HTML5 semantic elements for grouping content e.g.
<header>
,<article>
, and<aside>
- Your HTML must pass validation
- Your CSS must pass validation
- Your site must use one of these layout: multicolumn with floats,
flexbox
, or CSS grid. - You must include at least 3 images
- Deploy your site to web hosting
- Your site must be optimized for at least 2 viewports (a full-screen device as well as a mobile device). See below
Full-size view of "Exceptional Realty"
Smaller screen size "Exceptional Realty." Notice how the logo has changed, the text is now missing, etc.
These are baseline requirements. The goal of web design is to serve the content. Implement whatever features are needed to serve your audience the information they need.
- The subject matter.
- A résumé or CV-like page with thumbnails of your work
- A fan page like "Why Sachin Tendulkar is the Greatest Sportsman of 3 generations"
- A media preview page ("My list of Phish Recordings with Audio Samples"). This
- The Number of pages. The goal of web design is to serve the content. If multiple pages does this best, great. Google has become a multi-billion dollar company with the most deceptively simple landing page in history. Serve your page with user experience in mind.
In this lab there's a file called "MY URL." You must place your URL inside this
file. Afterward run learn
and learn submit
.
In this lab you've reached a very important milestone: you've created a web page from scratch and deployed it on the internet. You are really a web developer now! You should feel comfortable editing templates, adjusting themes, and debugging CSS / HTML issues. Congratulations. To continue learning more, check out what JavaScript can do to make a web page more dynamic!