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.

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 01.12.2020

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.