HTML and CSS - Beginner Difficulty

HOW TO MAKE RESPONSIVE WEBSITE IN 2019

OCTOBER 17, 2019

This article is aimed at potential Front-End developers, computer science students or people who are curious by nature, I'm not an expert, however, as a Full Stack developer for 3 years now, I must admit that CSS has been one of the most strange languages to learn.

It isn't C#, Java or Javascript, it doesn't follow any « algorithmic » concepts and everything can seem blurry when you don't know the good practices.

When I was expected to be able to do fully responsive pages in my work, I was often struggling for weeks without really understanding what I was doing at the beginning.

First of all, responsive is in simple words, making everything fit the screen of the user device. Over time, after a few years of experience and sometimes desire to kill my various favorite browsers (Google Chrome, Mozilla Firefox, Internet Explorer, Edge & Safari), I learned to understand them and respond to their whims, so, let's start at the beginning.

This article is in two parts, guided through an example available live in order to have a fun side where you can do your tests.

In this first part we will discuss the basic principles of responsiveness, that is, best practices regarding the management of content dimensioning properties as well as the positioning of elements in the space that is the browser window.

The second part will consist in giving you the appropriate debugging tools, because we very often miss the first try when we do CSS. To finish with some notions that will allow you to have a better understanding of possibilities this language can offer you.

This article has a reading order that I think is important, it is up to you to follow it or not, you can nevertheless read it as you wish.

First of all, before we start, it should be noted that each browser has its own interpretation of HTML tags, each of which has a default "style".

I assure you, it's a problem, so I advise you to always apply a reset of the CSS properties of browsers during your projects: Reset CSS Github - Now we can move to our subject.

What are the most important concepts to understand in CSS - 2019 ?

A little practice to study the theory, I promise, this introduction to responsive design will be simple.

Here is our example, open it on another window because it will help us understand some concepts I'll talk about:

Our objective is to have a header with a fixed height of 100 pixels which takes the entire width of the screen, and a text content perfectly centered in relation to the remaining space.

The first thing to be aware of is that the HTML tag <html> is the first property to be aware of the user's screen size. If it is badly initialized, everything can go wrong. Because <body> and all its children potentially inherit the properties of <html>. Especially the width and height attributes of your body and then it will affect everything

In this example, we find several concepts that I think are key:

The use of the « Percentage »

Value very often recommended, if you ask when to use the percentage in CSS, you will be answered that it depends, in any case, for responsive, you will use it everytime if you have to modify the width property.

Avoid fixed values as much as possible when working with HTML elements, especially: html, body, div, p. Otherwise, use the attributes « min-width » and/or « max-width », and give to « width » a percentage value, it is very often the cause of problems of responsive websites (in 99% of cases, source, myself, when working on project with my peers).

Example, if your div content of the example must be 500px wide:

#content {
width : 100%;max-width : 500px; // or a lower value if desired }

privilege « max-width : 500px; » and use « width : 100%; » or a lower value if desired.

In which case does it really help?

Passed on mobile, you are between 320 ~ 425px of screen width, these are standards, if you had just put width: 500px, your div would not fit on the whole screen and you would have a horizontal scroll, horrible for the user.

Take the example, add « width : 500px; » to #content in your CSS, result when the screen is lower than 500px:

In our case, with the CSS properly implemented, at most we go up to 500px, if the screen is 320px, we do not exceed the standard screen size. Think badly about your CSS for them and the majority of your users will piss you off.

You can also use this trick with the attributes height, min-height and max-height, it's the same principle. If you're already doing that, you've figured out how to do something responsive.

The Flexbox property - Positioning elements in space

Another key concept is to know how to place elements in the space in the window and place your attributes. Let's take again our example, where I defined a header with a fixed size in height of 100px.

I wanted my text to be centered on the rest of the window, i.e. 100% of the screen height - 100px. And that's how we introduce the most pleasant concept to make the responsive, the display property flex. See for yourself its compatibility with browsers here
If you don't know what it is, have fun with Flexbox here - flexboxFroggy, then come back, or the other way, or not at all you do what you want, theory then practice or the other way, you have the choice.

I quote MSDN, «The Flexible Box Module, also known as the flexbox, was designed as a one-dimensional layout model and as a method of distributing space between objects in an interface and aligning them ». When organizing several elements on the same line, it can quickly become a thought exercise. Fortunately, this pretty property makes life easier for us.

By default, a « flex » container element, let us call it "parent element", has all its children on its line

We can:

Change the position of the parent's children along the length, using the css element justify-content

Change the position of the parent's children on the height, using the css element align-items

Give direction to the parent, using the css element flex-direction, when using column value, it switch justify-content and align-items role

And even enlarge a child of the parent compared to others so that it takes up the rest of the space, be careful, this property can be used by it's child:
  • Only if the parent is a Flex element
  • Only if the child element is also a Flex type

And finally, on the parent we can add the flex-wrap property, if the sum of the children's dimensions potentially exceeds the screen size, the content that exceeds will be « wrap », put underneath, to avoid scrolling, by default it is not enabled.

Source, a page that I really appreciate : CSS Tricks - A guide to flexbox

Let's take our example back to hand, what I wanted to do for my demo, with the flexbox indications

And so, the div #content, thanks to the flex-grow property takes the rest of the window size. You remember the tag <html>, remove in the css its html property {height : 100% ;} And see what happens, you remember what I said above, be careful about the html and body tag behaviour

I hope this first part was useful for you, think about making diagrams on a sheet when you work, in the end the CSS is only a sequence of containers and children well placed.

For Part 2, we will discuss about Media Query, Debugging with Console Inspector, the use of Padding and Margin properties as well as the use of relative values vw, vh, rem and em

CONTACT

Have a question or want to work together?