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 (or try using CodePen or jsfiddle.net). To open it in your browser, just right click and select open with Chrome.
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:
- Two ways to move a div around on the page
- Stick a div onto the bottom or top of the page
- Identify the background color of an existing webpage
- Grab the URL for an image from an existing webpage
- Center an element horizontally
- Identify three ways you can include your CSS styles in a page
- Understand how to use classes and ids to target CSS at specific elements on the page
- Build a very basic form (even if it doesn't "go" anywhere)
Build the Google.com homepage
(the simple one with just a search box).
-
Start off by making the files on your computer and opening them in your browser.
-
Tips:
- DON'T BE A PERFECTIONIST! You're just trying to make it look like google.com, not actually function like it and it doesn't have to be spaced exactly the same way to the pixel. Any dropdown menus or form submissions or hover-highlighting should be ignored.
- USE GOOGLE! You'll probably run into roadblocks where you can't figure out how to do something so do what all good devs do... Google it!
- If you're frustrated with trying to get buttons or inputs to style the way you want (for instance, they seem to just not respond to any styles), look into the css property
-webkit-appearance: none;or-moz-appearanceif you're using Firefox.
-
Start with just putting the main elements on the page (the logo image and search form), then get them placed horizontally. You can either download the Google logo or link directly to its URL on the web in your
<img>tag. -
Next do the navbar across the top, first building the content and then trying to position it. Check out how to build a horizontal CSS navbar if you're lost.
-
Finally, put in the footer, which should be very similar to the top navbar.
-
In general, do as much on your own as you can before relying on the developer tools (or viewing the page's source code) to help you along.
-
Once you have made your site, follow these steps to create a repo on GitHub.
-
On GitHub, upload your files by clicking the
upload filesbutton and selecting the html and css files you have been editing.
If you want to show your work (the project) to others, you will need to publish your site so that others can access it from the web, rather than just on your local machine. The good news is that if you have your project on GitHub (as described above) doing this is incredibly simple.
Github allows you to publish web projects directly from a GitHub repository. Doing this will allow you to access your project from your-gh-username.github.io/your-github-repo-name
There are a couple of ways to go about doing this, but the simplest is this:
- make sure that the main html file of your project is called
index.html. If it is not, you will need to rename it. - go to your GitHub repo on the web and click the Settings button
- scroll down until you find the GitHub Pages section
- change the Source from none to master branch and click Save.
- it may take a few minutes (the GitHub website says up to 10) but your project should be accessible over the web from
your-gh-username.github.io/your-github-repo-name(substituting your own details in the link)
This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something.
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.