My CSS journey: Every journey begins with a step
I haven’t felt really good about my css skills for a while so I made the `brave` decision to improve my css skills by recreating the homepage of AWWARDS. This is the first issue of the daily documentation of my progress and hopefully a guide for beginners.
The torment of the creative
You never realize how difficult coming up with a design for a web page is till the task is bestowed upon you.
Styling a page can be quite a hassle if you have no concrete idea what you intend to implement. What colors do I use? Images? Dimensions? Arrrghhh!!!
The back and forth can actually be time-consuming and frustrating.
Luckily, I didn’t have to go through that today . But in my experience, I have discovered that before proceeding with any project, asides from getting the requirements from the client, having a proper agreed design plan is equally as important.
Mockups and Wireframe — Same thing or nah?
Nah!!!
It is best practice to always have a mock-up of what you intend to achieve. This should be shown to the client and approval received before proceeding. In other to achieve this, you need to first create a wireframe.
…confusion sets in…
At first, I was a little confused about what these terms being thrown at me mean then I did what any sane confused person would do…I googled them.
A wireframe is “A basic visual guide used to suggest the layout of fundamental elements in a web interface.” (Source: Wiktionary). It is basically the blueprint/ visual structure of your website. The main purpose is to show the client how the website will be structured before designing mock-ups.
A mockup on the other hand, is a static design representation of the wireframe using colors, typography and visual style.
Having a mockup helps you have a better feel of how the page will look.
Let’s get a-wireframing
To achieve my goal, I installed 2 helpful chrome plugins — page ruler and css peeper . Just by clicking on the element, you get the full details of the element — color dimensions, typography etc. Pretty cool tools there, they save you the stress of inspecting the elements via developer tools.
Using css peeper, I viewed every element on the page and implemented it on my wire frame which I created using moqups.
When trying to style a page, see every element on the page as a box.
Even a circle fits within a box having a specific dimension. Having this in mind, I moved from top to bottom viewing every element on the page and representing it accordingly. Here is the finished work having the exact measurements as the one on the website.
That’s as far as I could go today. Tomorrow I’ll work on the mockup.
Fingers crossed.
