Wow! This was took me a while! But I'm proud of myself with the end result eventhough is not perfect! I learned a couple of new things and refresh on other that I have forgotten. Any feedback is appreciated! Regards.
Connor Allen
@ThePartnerDeveloperAll comments
- @OscarAnilloSubmitted about 2 years ago@ThePartnerDeveloperPosted about 2 years ago
Hi, Oscar!
You should be proud of yourself, and great job making your website very accessible by using REM and alt tags. I would suggest looking at the following to help improve your code and make sure it's even more accessible in the future.
The first topic I'd like to touch on is the line-height, you declared them in pixels, yet your font-sizes are in rems. If the user has changed their font-size in their browser settings, lets say to 2x the normal size (16 pixels), that would make their font-size 32 pixels. With a line height that is set at 25 pixels, the lines of text would be overlapping by 7 pixels. Instead, I would use the REM unit as well for line-height.
Another way to make using REM easier would be to do the following. If you set the html font-size to 62.5 percent, that is equal to 10 pixels. Whenever you use the REM unit, it is calling from the html root size which now is 62.5 percent. Let's say you want to set a h1 size to 36 pixels, now all you have to do is set the h1 size to 3.6rem instead of 2.25rem, allowing for easier calculation on what rem size you need.
html { font-size: 62.5%; }
Another area for improvement would be to look at smaller screen sizes. When I make my screen size 540px X 733px, it is impossible to see the exit button on the "back this project" menu.
That's all I found at a quick glance! Good luck with your future projects and endeavorers!
0 - @ThePartnerDeveloperSubmitted about 2 years ago
I need some input on what I could improve. I had trouble implementing the social media icons for the footer, along with the REM and EM units for font size, margins, and padding.
What questions I have
- Did I use REM and EM right? I mixed the sizing with pixels too so I might have messed that up.
- Did I correctly set up alt tags for the social media icon SVGs? I don't know how to set up the text that screen readers will play for SVGs that are loaded inline.
- How could I better set up the transitions for the buttons? I wanted a fade in and out for the pink color for all the buttons, but the fade out I had to get rid of because the transition on the class would load when website is loading and when you stop hovering over the button.
@ThePartnerDeveloperPosted about 2 years agoThis is my first project trying to use the REM and EM units. I have also never tried the mobile-first approach for websites until this project. It seems I rushed both trying to learn both on this small project, which I should've split them up because I don't really understand either concepts apparently or how to implement into my web dev.
0