DEV Community: Maru

Trying the mobile-first approach (as a newbie)

Maru — Mon, 29 Mar 2021 18:39:44 +0000

Hello everyone!

One of the things I've struggled a lot while building websites is to make the mobile version to look good, to me this was very important because I know nowadays most users access sites through their phones.

When I started to make some research about responsiveness the first advice that appeared was 'to follow the mobile-first approach' and this made perfect sense, however, I did have to review a couple of things before trying it myself. So, I want to share my experience in case it helps other people!

If you're like me and want to try this approach for the first time, I suggest you to pick a Frontend Mentor challenge and start from there. I chose the "Fylo Dark Theme Landing Page" for this.

What is the mobile first approach?

This was my first question and here's the best answer I found:

"Mobile-first is when we start by writing our CSS for mobile devices and then use media queries to add in styling for larger screen sizes." Source

My experience

Like I mentioned, I chose a Frontend Mentor challenge for this. At first, it was very strange to focus on the mobile design because I had only done it the other way around (desktop-first) but you do get used to it.

As I started writing the code I had to keep in mind that basically, the default styles would be smaller and then I would have to write media queries to make everything bigger. Also, the default styles would be one column (due to the design I picked).

What made the most sense to me is that mobile designs are usually simpler and it's easier to start from there. Also, that if you start with the desktop design you'll find yourself writing media queries to override the complex styles.

My solution to the challenge:

Mobile:

Desktop:

Live site
Original challenge description

What I learned

During this process I learned that you can click this button in the browser Developer Tools to emulate a phone with different sizes. It's super useful!

When following this approach you have to use min-width for the media queries and this is honestly the explanation that finally made me understand how it works:

Min-width is the minimum width at which a style will START to be applied. (Have to be ordered from smallest to largest to work properly, regular styles first). With min-width, styles START and continue forever as long as min-width is met, and no max-width is specified.

Max-width is the maximum width at which a style will continue to be applied. After that, the style will STOP being applied. (Have to be ordered from largest to smallest to work properly, regular styles first). Styles STOP as soon as width greater than max-width is hit.

Thank you Stack Overflow

There are so many other ways to create a responsive layout without using media queries! For example, this to create responsive grids: grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
I can definitely see why this is the recommended approach for most cases but I know it really depends on your case. For now, I try to think first "What would make me write less code and not repeat myself?"
It was an amazing feeling to see that the website looks good on mobile! It's not perfect at all and I still have to work on other things, but overall I'm very happy with the result and I enjoyed the experience.

If you check out the live site please let me know if you have any feedback, I would appreciate it a lot 😊

Working On My First Projects (would love some feedback)

Maru — Thu, 04 Mar 2021 20:24:13 +0000

Hello! Recently I completed the Responsive Web Design Certification on freeCodeCamp and on this post I want to show you the projects I built, as well as some of my thoughts and things I learned in the process.

Alert: Please bear with me, I'm sorry if at one point I don't use the proper terminology.

#1 Project: Tribute Page

For this one I chose Grace Hopper.

CodePen link

Thoughts:

I had a very vague idea of the design I wanted, so I had to play around with the fonts and colors for a while until I was happy with the result.
To accomplish the dark background I wanted for the "Early life" section I learned that I could add margin: 0 to the body, so the background color could cover the whole section.
Initially I had added width: 100vw to the Early Life section, thinking it would help me have the (full width) dark background I wanted, but instead, this added a horizontal scrollbar, which was so annoying! Of course this took me a hot minute to identify and several hours reading forums. Solution: just removing the width property, it wasn't necessary.

#2 Project: Survey Form

The topic I chose was "Work Burnout"

CodePen link

Toughts:

I think the most challenging part this time was to style the form controls. This was a whole new world for me.
I learned about box-sizing and its importance when styling block elements.
I learned that for vertical alignment (align-items) the parent container should have a defined height property and in order for the margin-auto technique to work it needs a defined width property, but it can't be 100% (duh).

#3 Project: Product Landing Page

For this one I did take the time to pick the colors and even design a very simple logo, this saved me A LOT of time.

CodePen link

Thoughts:

I learned that less is more. Sometimes I come up with some very complicated (and unnecessary) ways to display the layout I want, and then it turns out that with just a few lines of code I can still get the desired result.
I learned how to add CSS icons, specifically Font Awesome's icons.
I learned about grouping selectors and its importance.
The one issue I was not able to figure out was how to make the iframe responsive, but overall, I feel very happy with the final result.

#4 Project: Technical Documentation Page

I had a lot of fun with this one. The topic I chose was CSS Flexbox.

CodePen link

The first challenge I had was to create the stationary sidebar, I didn't want to use position: fixed so I learned more about position: sticky.
I also learned about overflow and how using the auto property helped me accomplish the layout I wanted.
I tried to use position: absolute to place the "Made by Maru" at the bottom of the sidebar, which worked at first. However, since this removes the element from the regular flow, it was overlapping with the menu when I resized the window vertically so I decided to leave it on its original position.

#5 Project: Personal Portfolio

CodePen link

Thoughts:

This one is actually the second version of the original project I submitted for freeCodeCamp.
For the progress bars I used some CSS I found online, it's not the best way to do it but for now it gets the job done.
I struggled a lot with media queries on this project, I wanted the mobile version to look good but I think I still have to do some research about this.
Overall, despite the things that I want to improve, I really liked it!
In the process of working with these projects I discovered Figma and I've been using it ever since.

If you made it this far, thank you so much for reading! I would love to receive some feedback too 🤓

Beginner looking for a community

Maru — Wed, 03 Mar 2021 13:49:28 +0000

Hi! I've been learning web programming on my own for almost a year. It has been a very interesting journey, filled with ups and downs, especially because I didn't know where to start and wandered around for a long time.

Now, I finally feel like I'm on the right track and this makes me very happy, however, I do feel a bit lonely. I really want to be part of a community where I can share my thoughts and insecurities about being a self-learner. And most importantly, interact with others that are going through the same.

Recently I completed the Responsive Web Design Certification on freeCodeCamp and I'm currently on the JavaScript one.

I hope I can meet some new people here :)