Google Project: HTML/CSS (v1)

Google Project: HTML/CSS (v1)

Introduction

For this mini-project, you’ll deconstruct an existing web page and rebuild it. Don’t worry if the links don’t go anywhere and the search box doesn’t do anything when you submit it. The goal is to start thinking about how elements get placed on the page and roughly how they get styled and aligned. For some of you, this may be the first time you’ve actually tried to "build" something in HTML (very exciting!).

Using the browser’s developer tools (right clicking something on the page and clicking "inspect element" will get you there) will be your best friend. Build the page in a .html text file and open it in your browser to check it out. We suggest you use VSCode and the Live Server extension to launch your web page to the browser. Alternatively, you can try CodePen or jsfiddle.net).

Try These Before Starting

These skills will be helpful for you when you start building. Either try them yourself or at least make sure you know how to do it:

  1. Two ways to move a div around on the page
  2. Stick a div onto the bottom or top of the page
  3. Identify the background color of an existing webpage
  4. Grab the URL for an image from an existing webpage
  5. Center an element horizontally
  6. Identify three ways you can include your CSS styles in a page
  7. Understand how to use classes and ids to target CSS at specific elements on the page
  8. Build a very basic form (even if it doesn’t "go" anywhere)

Assignment

Instructions for the assignment can be found here.

Additional Resources

If you still feel shaky on your understanding of HTML and CSS, that’s okay! You don’t need to be an expert by any means yet. These resources should help if you want to shore up your understanding of things:

  • If you want to see the art of CSS, check out the CSS Zen Garden, which collects submissions that use identical HTML and modify only the CSS but turn out wildly different (and beautiful).

  • Read through Shay Howe’s HTML&CSS Tutorial. Lesson 1 gives a solid overview and you can do the whole thing for a more in-depth understanding.

  • Learn more about GitHub using this tutorial or read more in this article.

UPDATED: 01.12.2020