Front End Project: Google Homepage
Today I will go over my solution to a very simple front end project, re-building the Google homepage.
Note: This is intended to be simple. It is important to understand a projects scope and compose software accordingly. In this case, I am simply working on my HTML/CSS skills. It can be of great use to re-build (with limited scope) real world websites and applications.
What is this?
While studying the fundamentals course on The Odin Project, this assignment wraps up the front end chapter. If you have yet to hear of The Odin Project and do not have any experience in web development, it is a superb resource and I highly recommend it.
My goal with this article is to explain my thought process while completing this project and highlight the lessons learned from my first time using Flexbox.
Note: This is not a step by step guide. The code is available on github.
Getting Started
Flexbox and the Sticky Footer
Flexbox aims at providing a more efficient way to lay out, align and distribute space among items in a container.
I’ve found this to be the most comprehensive Flexbox documentation.
For this project I am going to need the footer element to stick to the bottom of the screen. This is a layout issue, and Flexbox resolves it.
Docs
<body>
<div class="content"></div>
<footer class="footer"></footer>
</body>html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
With this in mind, I build from the HTML above until every element is represented before adding any CSS.
Note: This method forces me to think about the whole of what I am building and allows elegant abstractions to be represented as CSS classes. When I write CSS classes alongside HTML, I am more likely to duplicate myself before realizing an abstracted class could be used.
Compose elements in such a way that allows styles to either be inherited or reused and represent them as classes. This way of writing HTML is similar to painting in broad strokes.
Styles
I broke the styles up into sections.
- Base
- Layout
- Link
- Search
- Avatar
- Logo
This is a continuation of what I mentioned earlier regarding broad strokes. I only have to think about styling a few things which effect the whole page.
Note: I think the links are the best example in this project. They are all the same and are scattered along the four corners of the page. I utilize :first-child to handle the special case of not padding the first child. Also, the footer has different spacing than the navbar. All of this is considered when I am writing the link styles.
If something is specific, then it is give a unique name and unique styles. The best example of this are the avatar and logo styles. No other element on the page is going to meet their requirements.
When writing raw CSS I work from everything * (the universal symbol) all the way down to the most specific styles, grouping styles that have a common theme.
Note: Production code for a company will be more sophisticated. As I mentioned above: It is important to understand a projects scope and compose software accordingly. I’m not looking for perfection here or pixel perfect code, just working on some basic HTML/CSS.
Conclusion
It was nice to have built something today.
This project is simple and great for beginners.
- I had a chance to explore Flexbox and gain a deeper understanding of what it is and how it works.
- I also put my process for writing HTML and CSS into words.
