Devlog #15

This will be a fairly short devlog. I spent this block adding media queries to my CSS code because I opened the website on my phone, and it just looked so wrong to me, so I spent some time doing that. I figured out a great way to simulate a phone screen in my browser using DevTools so I was able to adjust everything through that.

Current Progress

The plan was that I was going to do media queries at first, but I thought it would be too complicated so I held it off. Now I was kinda forced to after seeing how bad the webpage looked on a phone screen. I realized you just have to make on CSS rule for media queries using media (max-width: 768px) {}. I decided to use 768px because that is like a standard width, but I mainly tested it on 400px width. After that, I opened two windows with my code and as I went through it, I would add a media query rule in the other window. So I conquered my fear of media queries, and addressed that issue.

Next Steps

I am looking for things to do. One piece of feedback that I got was that my cards had hover effects that made them look like buttons, but had no button effects, so it was kinda misleading. So to fix this, I’m thinking of like scanning my certificates and uploading them as pictures that people can view in the browser. So that’s my next step. To accompany this, I might also do like a redesign of the website, like just adjusting some of the features. Also, I’m thinking of adding a dark mode/light mode feature on it.

Below is a quick video of the site on a device with a width of 400px.