Being a front end developer is sometimes an odd place to find yourself.
Your work is translating a designer’s designs into HTML and CSS, sometimes JavaScript too. In the best-case scenario, requests are easy to implement because you have a good PSD file and a good relationship with the designer. But anyone who has ever worked with CSS and HTML knows that sometimes one simple request can open a pandora’s box of possibilities.
It might even seem like a pretty simple request. Maybe the designer says, “We want to center that text in the middle of the screen.”
Why does something so simple and easy to do in Photoshop, (you just have to click on a button) open up a world of possibilities and decisions for us, the developers?
Have you ever counted how many ways there are to center a line of text in the middle of a box, a button, the screen, or whatever it was around?
*Spoiler Alert*
I counted at least eight of them and all of them are valid.
Things you should have in mind when you code with HTML and CSS
Responsiveness
The content will be displayed on many devices, all with different sizes and resolutions.
Learn about W3.CSS Built-In Responsiveness.
Work smarter, work less
Try to think about coding in components. Try to isolate the content in each component so you can reuse them on different pages.
Grids and Frameworks
Working with grid systems like Bootstrap will help you to avoid reinventing the wheel.
Read about how to build fast, responsive sites with Bootstrap.
Know the basics
If you are just starting with CSS and HTML you will find that now almost anything is possible. But if you don’t know the difference between display: inline; and display: block;, for example, then you have to go back to the basics.
Learn about the display property.
Semantics before Aesthetic
Your site should resist when you remove the CSS. If you did the things right, the information should be organized and nested properly. Read about all the HTML tags and the utility of each one.
Returning to the first request: “We want to center that text in the middle of the screen.”
Centering a text horizontally is the easy thing, ‘text-align: center;’ would be enough. But let’s say they asked you to center it in a vertical direction inside a red box. Now this is where things get interesting.
There are a few possibilities and properties you should think about when to decide which route you will take to solve the problem:
- Spacing: padding, margin, etc.
- Positioning: absolute, relative, fixed, static, etc.
- Sizing: width and height.
- Displaying: block, inline, flex, etc.
Here are the solutions I found. They are for sure just some of the possible solutions.
The next time you find yourself battling with something that in theory is easy peasy, remember this article and know that one easy request could be opening the Pandora’s box of development.