Responsive CSS

After finishing Flatiron Bootcamp, I was trying to figure out the next steps, what I’ve decided was to retake a vanilla JS mini Bootcamp, because if you decided to pursued the frontend path, JS is fundamental to understand how frameworks work on top of it, React, Angular, Vue, etc.

But then while I was taking these classes, preparing my resume, and doing the career prep, I had an unexpected interview in a meet up fair Job, it was a five minutes interview where I gave my elevator pitch, and after 10 days they reach back to me to have another interview, it was hard, I wasn’t prepared and they asked me questions about HTML and CSS, didn’t go well, is not that I was totally lost, but I wasn’t prepared to that type of “easy” questions.

So as a good student, after wiping my tears (figurately), I decided to take another mini Bootcamp, about UI Design.

Now I can tell the importance of taking these classes, I am not done yet but I want to share about responsive design, where to start, and how to do it, in a simple project.

Whenever you are working with CSS keep these things in mind:

1. White Space
2. Color
3. Contrast
4. Scale
5. Alignment
6. Typography
7. Visual Hierarchy

We going to build a simple web page with a navbar, the title which is going to have the most important part of your app (visual hierarchy) a little explanation of your app, and finally some testimonials.

Let's start with the HTML :

When you have just three buttons the best approach is to display the buttons directly, you don’t need, the “hamburger menu” for that, extra steps or clicks is not a good UX (user experience).

Then we have the actual title, some explanation, and a button.

and finally a section with the testimonials

In order to start working on the CSS we are going to inspect the page and visualize it in phone/responsive mode:

We going to start using media query for tablet mode and, at the end for desktop mode. This is the best approach to start building a responsive web.

Right now this is what we have, so ugly Lol:

Let's start with some basic CSS, lets work with alignment and typography, is always recommended to use just one font-family, max two, and of course, never use the default one…

Looking better, but not quite yet:

The testimonials are way down, what if instead we put them on top of the picture using z-index, and in order to use it, we need to use also position: absolute.

this looks way better:

NavBar

For the navbar let give it a nice button appearance with a light background so it’s not going to have contrast issues and it will be totally readable.

and finally let's work with the title, download button, and testimonials:

the white space is very important around every tag

we also give it a nice box-shadow to separate it from the picture

the basic presentation is done, but what about the navbar in bigger phones, let make it appear in one line, for that let's start using media query:

this means that for screens bigger than 390px do this.

It looks like we have an alignment problem, let’s fix it

here we are reassigning the margin-top and also with nth of type selector we are giving an especial margin-right to the last button (contact) so it will not be too close to the edge.

basically, on small phone screens, there is no way to put all the buttons together but in bigger ones this is possible.

we are done with the phone screen version of our web page!!

let’s keep moving towards tablet screens.

it is looking good, but we have too much white space in the testimonials and now our picture is too long, let’s fix it

So now we are using grid to display our testimonials, we are creating 2 columns and two rows, and the space between them (grid-gap) is 1em (relative to the font-size of the element).

also the last testimonial box we are making larger because we just have three boxes and will look better this way.

what about this part? grid-area: 2 / 1 / 2 /3;

if we think of this as a box, we have two columns and two rows, the first part (number 2) references where the grid row starts, the next one is where the grid column starts, then we do where the grid row ends, and finally, where the grid column ends which is the number 3.

looking good!!

This is the last part of the project, in larger than 1000px screens, we have to tackle some issues here, white space, fonts-size, contrast, scale, visual hierarchy, and alignment, so let's begin:

we are moving the title and download button to the right, and decreasing the with of this to just 30%. and within the “p” tag to 100%.

we are moving the background picture to the right, and disabling the clip-path, we want the whole picture now.

the navbar button is having a contrast issue with the picture, so let's disable it.

let's show the testimonials back in flex mode.

and this is it thanks for taking the time to look at this and I hope you learn a little bit about responsive design today.

Late edition: Thanks to some advice, using rem instead of em is a better practice. This yt video has a good explanation