Inside the Mind of a Front End Developer: One Request, Many Possibilities

Using the web image

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


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.


Want to keep up with what we are doing? Hear about what’s coming next straight to your inbox!

Please complete this required field.
Please enter a valid email.
Please complete this required field.


Recent Posts

From The Blog

Workshop Kickoff

Project Kickoff

By Melony Smith | Mar 25, 2021 | App design, Brand Identity Design, Consulting, Custom Software Development, Design, Development, General, Ui/UX Consulting, UI/UX Design, Web Design Consulting, Workshop Series

What to Expect In a Project Kickoff Workshop, 729 Solutions will make sure your project is starting off strong with our time-tested project management processes. We’ll walk through each of the steps that we’ll be taking to get your project across the f… Continue reading Project Kickoff