Media Query Heaven

The goal behind this project was to make a responsive website. Working on the front end of applications is the most enjoyable part of development for me. However, I haven’t made a fully responsive application or website yet. I have been so focused on learning JavaScript and the fundamentals of logic based programming that I skipped over CSS. My work has been functional so far, but my apps have looked about as good as your Starbucks cup when the barista spells your name wrong. Therefore, I really wanted to focus on the aesthetics of this app first, and then worry about everything else afterwards. This is opposite of the of the way that I have been developing thus far, and I thought that it was important to change things up.
The game plan was to code a website that looks good at all sizes and then attach a firebase database for the contact form. I haven’t experimented with firebase yet, and I have heard great things about it. Also, I saw that it was rising in popularity and is a marketable skill to have under my tool belt.

Before I started coding I designed a logo of the word drip. “Drip” is a trendy word that implies good fashion. After making the logo I google searched it and discovered someone else made the same logo already. Bummer, but this is for a fake company and learning purposes, so I just went with it. My idea was to make a modern website that had something to do with fashion. I made some wire frames, but nothing super detailed. Looking back, I would have spent more time on this. Actually, I would have made a Photoshop document of what the final website looked like at different sizes.
The reason for this is because I wasted so much time on web design related decisions while I was coding. For example, “Should I have two columns, or four columns”? Also, “Should I keep that photo in there for the smaller sizes, or should I get rid of it completely”?
I found myself experimenting with the layout through CSS a lot, which was time consuming. More time consuming than if I were to make detailed wire frames, or made the design in Photoshop really quick.
Smarter design decisions will be implemented moving forward with my work flow. Something I decided to do is make the website starting at mobile size and then move up. Therefore, I used a lot of min-width media queries. I’ve never gone this route before, but I now understand why people design mobile first. It’s easier to go from small to big versus big to small. However, I found that designing for mobile is more difficult for me, and that it inhibits my creativity a little bit because I have less space to work with.
Once the mobile design was done the inspiration hit. I instantly knew what I wanted to do with the desktop version of the app. This is the part of the project where I had the most fun. Putting things into perfect columns with CSS grid proved to be a little difficult, but I enjoyed it. I ran into a little problem with the images. I could not figure out how to fix the problem through coding. However, I just too the images into Photoshop and made them all the same size. Presto, just like that everything lined up perfectly, and at all sizes.
Once I was happy with how everything looked it came time to hook up the firebase database to my contact form. Surprisingly, this was one of the easier parts of the project. I was using vanilla JavaScript and there was good documentation all over the place. I got the database connected and working properly really quickly. I now understand why it is so popular.
The next step was deploying the application. At first I wanted to go with deploying the website on Firebase. Things got interesting. I’m not exactly sure where I messed up, but I pretty much destroyed the app. There was some really disappointing sounds coming from me, and some weird looks being given to me since I was in a Starbucks. Luckily, my last Github commit was when I was finished the app. I went back to that and decided to go the Heroku route to deploy the app.
After taking all the necessary steps the deploy failed. After some googling I found out that heroku doesn’t deploy vanilla JavaScript projects. Then I stumbled across a stellar medium article. It showed me that all I had to do was trick heroku into thinking that this was a php project. Here is a link to that article. After taking this advice it was easy as pushing to heroku and opening my app. Luckily, my app was working the way it was supposed to, and my database was still working to. Success!!
