Being a front end developer is sometimes an odd place to find yourself.

Your work is translating a designers 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 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?

 

*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.

(https://www.w3schools.com/w3css/w3css_responsive.asp)

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.

(https://getbootstrap.com/)

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.

https://jsfiddle.net/gxcw4hb8/14/

 

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!

 

Give the reader a reason to click the button below

Tell Us About Your Project

 

Check out these other blog posts!

GIPHY & AWS

No Silver Bullet: Creating an Experimental Devops Culture

Common Developer Acronyms: Part 2

 

 

ENGINEERING AMAZING TECHNOLOGY

729 Solutions is one of the oldest custom development shops in the San Francisco Bay Area / Silicon Valley. Our team is made up of developers versed in every programming language from basic HTML and CSS to Java, Python, and Ruby. We are project managers that can streamline the process, ensuring your project gets done quickly and within budget. We are designers who make you ‘look' good. We are proud of the projects we take on and the quality of work we provide.

We are engineering amazing technology every day.

TELL US ABOUT YOUR PROJECT

© 2019 | 729Solutions