Giter VIP home page Giter VIP logo

responsive-brochure-site-lab-london-fe-skills-110518's Introduction

Project 1: The Brochure Site

Problem Statement

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....

Alarmed kitten

...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.

Learning Objectives

  1. Build a brochure site

Build a Brochure Site

Requirements

  1. Your site must use HTML5 semantic elements for grouping content e.g. <header>, <article>, and <aside>
  2. Your HTML must pass validation
  3. Your CSS must pass validation
  4. Your site must use one of these layout: multicolumn with floats, flexbox, or CSS grid.
  5. You must include at least 3 images
  6. Deploy your site to web hosting
  7. Your site must be optimized for at least 2 viewports (a full-screen device as well as a mobile device). See below

Full Size

Full-size view of "Exceptional Realty"

Viewed in an iPhone Simulator

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.

Not Specified

  1. 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
  2. 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.

Completion and Moving On

In this lab there's a file called "MY URL." You must place your URL inside this file. Afterward run learn and learn submit.

Conclusion

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!

responsive-brochure-site-lab-london-fe-skills-110518's People

Contributors

sgharms avatar danielseehausen avatar planetearp avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.