didn't know about table tags so i learned it befor making it
What specific areas of your project would you like help with?how to recreate the code in a good semantic tags order
I realized your p tags had a font-size of 11px, it's not advisable to use px for sizing, you should rem or em instead. Also, p tags are automatically at 15px.
The card class is relatively small, you should consider increasing it.
Also,
main tag, the section tag isn't really necessaryGetting it up and running relatively easily, growing in confidence. i think i would provide a bit more consistency in fontsizing, padding and structure it a bit better.
Learned about how to cover images effectively, relative sizing of buttons with a fixed width using max-width and width properties, re-emphasis on using REM units in font-sizes, margins and paddings.
What challenges did you encounter, and how did you overcome them?Getting it to center again, even though I knew how to do it.
What specific areas of your project would you like help with?HTML structure CSS structure and feedback
I'd advise you increase the transition time on the button to 0.5s or 500ms for a smoother flow.
Secondly, the hover state has an outline caused by the box shadow you added.
button:hover, button:focus {
background-color: hsl(var(--clr-green));
color: hsl(var(--clr-grey));
outline: none;
box-shadow: 0 0 0 0.1875rem rgba(255, 255, 255, 0.75);
}
In my opinion, you can remove the box-shaow property.
Trying to implement more best practices instead of coding "quick and dirty" html and css! I think I am making progress with that, feel free to comment!
What challenges did you encounter, and how did you overcome them?Still learning about CSS Units and when to use which, but tried to use rem on text.
What specific areas of your project would you like help with?CSS Units
CSS Units I use NekoCalc to convert from pixels to other responsive sizing. You can check it out
I'm most proud of... making my design more accessible. Not only did I only use semantic HTML (no or tags here, but also took the extra step to make the QR code into a clickable link as well. Just in case anyone doesn't have a smartphone handy to use, or they want to follow the link on their laptop.
Next time, I would.... delve into media queries more. I didn't really do that this time as I felt it was unnecessary for the size of the element in the project. In lining up with my ideas above, I'd also want to use more adjustable sizes. This time I used {px} as the unit of length to adjust everything but I'd like to use {em} or {rem} units more once I understand them a bit better.
What challenges did you encounter, and how did you overcome them?I struggled to figure out a way to seperate out the attribution from the card element. I didn't want it just under the card but hovering on the bottom of the page, but I didn't realise there was no {justify-self} property when using Flexbox! While I was browsing other people's solutions for some inspiration, I came across @vanillatte68's solution! It reminded me of the {position} property, and lo and behold, a quick peek on MDN Web Docs to remind me how to use and the problem was solved.
I'd love to know whether using {px} as the unit of length is acceptable for webpage design or if it's better to use units like {em} or {rem}? On this thread, I'm also wondering if there are some simple rules to follow when using these units or was my approach of adjusting it bit by bit until it looked right the accepted standard?
Is a media query necessary for something like this? If the main element is already narrow enough to be read on a mobile screen does it really need all the extra bells and whistles to scale it down? Feels like you would be doing a lot of extra work for something unneccessary or am I seeing this wrong?
Any other feedback on how to make the code better, more readable or even using less lines would be very much appreciated!
After checking your code, I saw you included metatags in the head section. It stood out for me. Great Structure and semantics too
