@emestabillo
Posted
Hey @tbeagle2, congrats on submitting your project! Here are some recommendations.
CSS:
- Add a CSS reset before your custom styles
- Use mobile-first approach. Easier to scale up elements rather than making large items fit small screens.
- Use relative units such as
rems instead of px. - Avoid hardcoding width and height as much as possible. It usually leads to overflows or content getting cut off. The
.mid-sectionof the project doesn’t look right on mobile screens up to 1305px - Position the spirals absolutely to their nearest container. Right now, all of them are against the
body - There’s no space between the footer logos and the end of the page
Accessibility:
Apply for accessshould be anatag since it links to another page. Avoid using ‘p’ tags for interactive elements.- Social logos are also meant to bring the user to another page.
- Look into the use of the
imgtag vs pseudoelements. Example, the spirals are purely decorative and don’t really add anything meaningful to the document. Consider placing them as a:beforeorafterpseudoelement. - Use more descriptive terms for the
altattribute. This text will be displayed if the image do not load. Example,logo-lightdoesn’t tell me anything, butWorkIt logowill tell me the meaning of the image Sections are a a better substitute to divs for related content on the page.
General:
- Use one repo per project. A monorepo for all the challenges can get complicated very quickly.
- Check out Kevin Powell's videos on YT as a resource for responsive layouts.
- While you’re learning, focus on the quality of the output - the translation of design, accessibility, best practices, etc. - rather than timing yourself. Speed comes naturally later when you’ve had a number of projects under your belt.
Hope this helps!
Marked as helpful
@emestabillo Thank you so much for your feedback! I'll take all of it to heart.
CSS - I didn't know about resets, I'll use those next time.
I was using px mostly to get it as close to the figma design as possible, also it's been a while since I learned CSS and I forgot how the rem unit worked so I ignored it, I'll use rem in the future for now on. I'll figure out how to get the rem unit as close to the px unit in the figma file, i'll probably use the calc css function to convert the units to match in the based design if my googling was correct.
I'm going to use max-width from now on as that seems to be the correct responsive property. min-width would create the same issue I believe.
The spirals are on their own because I was having issues getting them positioned correctly, but now I understand position more deeply, I'll put them in the correct elements, I was brute forcing them. I'm getting a space in all the sizes after the footer, I don't see it on my end?
For the p tags with interactive elements, got it. I was wondering what was the best tag to use, I was starting to default to the span tag, but i'll use anchors. I wasn't thinking about those elements linking to another page, so i'll be more mindful now.
For everything else, I'll most definitely implement every note.
Since I plan on doing every premium challenge I feel like that it would crowd my github, but I can compartmentalize them instead of having them in a single project. I never had more than two things on my github so I'm not sure how it'd look.
For the timing, I was just timing myself since that's what the instructions said to do, but you're right, I was starting to get negative based on how long it was taking.
Thank you for your feedback! I really needed it.
