<p><img src="/assets/img/hello-world.png" alt="Image of &#x22;Wello World&#x22; in a terminal"></p>
<h2 id="im-not-just-a-strange-man-behind-the-keyboard"><a href="#im-not-just-a-strange-man-behind-the-keyboard" class="anchor">I'm not just "a strange man behind the keyboard"</a></h2>
<p>Hey, how are you?
I'm Miguel Machado, a full stack developer <strong>from Brazil</strong>, I have about 2 years of experience in the programming field</p>
<p>I always dreamt about having my blog, so, why not build my own?!</p>
<h3 id="why-i-developed-this-blog"><a href="#why-i-developed-this-blog" class="anchor">Why I developed this blog?</a></h3>
<p>I always loved to show others what I've created and what I've learned. <em>I kinda like the idea of teaching</em> <strong>and it's my chance to improve my English!</strong></p>
<h3 id="the-mission"><a href="#the-mission" class="anchor">The mission</a></h3>
<p>I'm planning to be publishing at least one post per week.</p>
<p>And I hope I can always bring some content that helps or teaches something!</p>
<h3 id="what-i-am-going-to-be-blogging-about"><a href="#what-i-am-going-to-be-blogging-about" class="anchor">What I am going to be blogging about?</a></h3>
<p>I'm going to post about development, some tips I learned during my developer career and the sooner you learn it, the better! And I can't forget <strong>Science</strong>, because, well, I ❤️ Science!</p>
<h4 id="note"><a href="#note" class="anchor">Note:</a></h4>
<p><strong>Any typos or grammar errors? Let me know in the comments section!</strong></p>
<p>That's it for today, devs! Stick around for more content!</p>


Let me introduce to you. Come, have a sit!

Hello, World!


## Introduction

When I was developing this blog I just knew it had to be responsive, and I know a lot of people have some doubts about what to do.

So today I'm going to show some tips about how to make your site more responsive with pure CSS!

![Image of a mobile, tablet and desktop, introducing to Responsive Subject](/assets/img/responsive-sources.jpg)

### Media queries

I think the biggest question always is: **breakpoints**

**Which ones should I use?**

And I got you. Here are the medias queries breakpoints I use in every project

```json
{
  "huge": "1440px",
  "large": "1170px",
  "medium": "768px",
  "small": "450px"
}
```

You dont have to set a new breakpoint every 100px, if you do, something is wrong with your responsive!

Why I said that?? Mobile-first! Which is our next topic!

### Mobile First

If you start your development in the mobile view your site will become so much responsive!

Adapting to large screens is much easier than adapting large screens to small screens, and mobile access is increasing so much that you don't want to lose their access because your app isn't responsive enough!

### The key to responsive!

On my blog, I just had to use one media query and it was 1170px.

For instance:

My sidebar will be showing at the top on mobile, so, to do that I just created this rule:

```css
@media (max-width: 1170px) {
  .blogWrapper {
    flex-direction: column;
  }
}
```

and now, the key... The secret is to use **REM**. ~~which won't make you [lose your religion](https://youtu.be/xwtdhWltSIg/)~~

I used **rem** in almost everywhere on my blog and it makes the responsive so much easier!

> [Check: Can I Use: REM](https://caniuse.com/#feat=rem)

> Type of unit similar to em, but relative only to the root element, not any parent element.

> Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.

This means that 1rem equals the font size of the HTML element (which for most browsers has a default value of 16px). Unless you change it 😊

That's it for today! In the next post we will see a lib where we can make our responsive so much fast, so stick around!


How to use media queries and which unit to use to make a better responsive

Miguel MachadoSoftware Engineer

I'm not just "a strange man behind the keyboard"

Why I developed this blog?

The mission

What I am going to be blogging about?

Note: