Being a front end developer is sometimes an odd place to find yourself.
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 in 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?
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
The content will be displayed on many devices, all with different sizes and resolutions.
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.
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. (https://www.w3schools.com/cssref/tryit.asp?filename=trycss_display)
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 HTMLs tags and the utility of each one (https://www.w3schools.com/tags/)
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 all 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.
About the Author
Today’s post was written by 729 Solution’s Front End Developer, Bruno Waldbaum. Learn more about Bruno and the rest of the 729 Solutions team, and reach out to tell us about your project!
Check out these other blog posts!