Project: Google Project HTML/CSS Copy

Introduction

In this project you will be given an existing web page and you will rebuild it. The page you are going to rebuilt is the google home page. Don’t worry if the page isn’t fully functional. In other words don’t worry if the links don’t go anywhere or the search box doesn’t do what it is supposed to do.

The purpose of this project is for you to start thinking the elements of the page. More specifically you should start thinking how the elements are placed, are styled and aligned inside the page.

Don’t forget that while you are building the web page, developer tools will be your best friend. When you want to check for something right click it and click "inspect element"!

To start with, build the page in a .html text file and open it in your browser to check it out. Use VSCode and the Live Server extension to launch your web page to the browser.

Tasks

Before you start building the web page first make sure that you can perform the following tasks:

  1. Move a div around on the page
  2. Place a div onto the bottom or top of the page
  3. Grab the background color of an existing webpage
  4. Grab the URL for an image from an existing webpage
  5. Center an element horizontally
  6. Include your CSS styles in a page
  7. Know how to use classes and ids to target CSS at specific elements on the page
  8. Build a basic form (it doesn’t have to "go" somewhere)
  9. Flexbox Flexbox Flexbox ^^

Assignment

Instructions for the assignment will be shared by your instructor.

Leave a Reply