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?