Mock Website
Recently our class was assigned to create a mock website. Basically we had to create a copy of an actual website but it didn’t have to be responsive. It just had to look like it, not function like it. It was a project to test how much we’ve learned so far on HTML and CSS styling.
What I decided to create a copy of was the google main page. On the google webpage, at the top right there is a link to Gmail, Images, Google Apps, and Google Sign in respectively. In the middle of the page is the Google logo and search bar beneath, followed by the two ‘Google Search’ and ‘I’m Feeling Lucky’ buttons. Finally at the bottom is the footer with links to Advertising, Business, About, Privacy, Terms, and Settings. Understanding what I had to create, I began to try and build my mock website.
One challenge I faced was figuring out how to make vertical navigation bars. To do this, I had to make <ul></ul> brackets, then put all the links inside <li></li> brackets which are also within <ul>. Then in CSS I had to style the <li> to float: left. According to w3schools, this gets the block elements to slide next to each other. Then for links (a) in CSS I styled them to display: block. This makes the whole link area clickable and allows for specified padding.
To create the middle of the page I created a div with the id of container. Within the container I put in an img src of the google logo, then an input element for the search bar, and 2 button elements. In a separate CSS document I set the container width the 100%. Then I used margin left, right, up, and down to put all the things in place.
Things I learned through this project was how to create horizontal navigation bars. I also got review on the margin commands we learned in class. One interesting thing I learned was that ‘margin-left: auto;’ followed by ‘margin-right: auto;’ usually centers the element you’re styling.
In conclusion, the project was challenging but I learned new things.