My Portfolio Project! --> Questions about Responsive design

My Portfolio Project! --> Questions about Responsive design
0.0 0

#1

I just finished my Portfolio project and now I am 100% sure that I will keep on learning programming and that that’s what I want to do professionally.

The design part was pretty simple. I never studied anything about design, but somehow I have a feeling for fonts, colors (I was a wedding photographer for 6 years). I wrote a bit about how I thought the design on the github Readme for this project.

The hardest part was trying to make it responsive. After 10 hours coding, I completed the project, pushed it to github and to codepen, and then I opened it on my mobile site and realized it looked horrible. The elements on the page were responsive, but the fonts were TINY, like impossible to read. Today I researched more and discovered I had to add a viewport tag to the head. That fixed it. I read more about mobile-first design and I’m starting to understand the logic. But I need help making the responsive code happen.

1) When I resized my browser or used that “mobile” icon on the Dev tools, the site looked nice, the way I intended. Only when it was live and I could see it on my phone, I noticed the fonts were small. Is there a way that I can see that from my computer? Or if I always add the meta viewport tag first thing, in that case, can I trust what I see when I use Chrome Dev tools or resize the browser window? I don’t want to make a project public and then realize it looks all wrong, lol!

2) The menu doesn’t look right on a small screen. How can I create one of those hamburguer menus (the 3 lines like the Menu icon here on the forum) and hide the menu items inside it?


#2

I’m new to this too… I’m still trying to learn, but I read a bit on your github about you choosing not to use bootstrap. It’s my understanding that one of the reasons to use bootstrap is it allows for responsive design without modifying your design specifically for mobile.