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).
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:
As mentioned in the introduction to Git, you’ll want to organize all your projects like a portfolio and link them to GitHub so it can be seen by others.
If you do not know how to set up a repository, follow the instructions found in Project: Git Basics to learn how.
the_odin_project
and cd
into it. This folder will house all the projects you do at Odin.google-homepage
(instead of git-test
).Then move that repository onto your local machine. The command should look like: git clone git@github.com:username/google-homepage.git
(use SSH).
cd
into the google-homepage
project directory that is now on your local machine; set up your README.md
file and write a brief introduction for what the current project is and what skills you have demonstrated once you have completed it. (You can do this as a self-reflection at the end of the project which is a good way to review what you have learned.)If you are having trouble:
Note: All Git commands need to be run from inside your project’s folder (did you forget to cd
into the google-homepage
folder?)
When you’re building your project, you will probably end up doing several git add
+ git commit
cycles before being ready to push it up to GitHub with git push origin main
.
When writing code, it’s considered best practice to commit early and often. Commit every time you have a meaningful change in the code. This will create a timeline of your progress and show that your finished code didn’t appear out of nowhere.
If you have entered git push origin main
and typed out your username and password, if you refresh your GitHub page, you should see new files added onto GitHub.
Okay, that’s enough Git for the moment – time to actually build stuff!
All of our projects have a “Student Solutions” section at the bottom for people to post their completed code and live websites for the projects. These are here for you to compare your completed code to and see what other routes people have chosen to take with their project code and designs.
We know it may be tempting to look at the solutions when you get stuck or don’t know where to start, but don’t do it! Here are some reasons why:
Once you have completed your project feel free to look at the other solutions to see alternative ways the project was completed.
Note: It is okay to check the “Live Preview” to get an idea of layout and styling before starting but not the code files.
DO NOT PEEK. Come ask for help in our discord server!
(the simple one with just a search box).
Inside your project folder, create your index.html file
-webkit-appearance: none;
or -moz-appearance
if you’re using Firefox.<img>
tag.You should be able to reuse much of your code from before if you started with that project. Again, don’t worry about links to nowhere and forms that won’t submit and hard coding the search results (which you’ll have to do of course), just focus on placement and order of items on the page.
Note: All the classes and id’s and names of elements that you inspect on Google’s home page are nonsensical strings (like <div class='srg'>
). This is because the code was Minified (see the Wikipedia entry here), which removes or shortens unnecessary characters and names to help the page load faster. The HTML (or JavaScript or CSS) file will be smaller but the browser can still read it just fine.
If you want to show your work (the project) to others, or submit a solution below, 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-github-username.github.io/your-github-repo-name
There are a couple of ways to go about doing this, but the simplest is this:
index.html
. If it is not, you will need to rename it.your-github-username.github.io/your-github-repo-name
(obviously 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:
5-6 months
Job Guarantee
1-on-1 Mentorship