@Robertron624
Latest solutions
Social links profile
#accessibilityPSubmitted 4 months agoDefinitely accessibility and better code overall.
Blog preview card
#accessibilityPSubmitted 4 months agoI think accessibility is something I need to learn more and SEO.
Latest comments
- P@PiwkoO
Hi, great work on your solution!
You nailed it, but I have small suggestion if you don't mind. It's better to not put everything in relative length units because some things like paddings or border radius won't change in designs. If you want it to have it under control you can extract these values to variables and use it, so if they change you will be able to quickly adjust them.
Good work and keep going!
- @Anita-LiberatoreWhat are you most proud of, and what would you do differently next time?
This Blog Preview Card project demonstrates a clean and modern component-based design using semantic HTML5 and modular CSS. It's a great example of how to build reusable UI elements while following web development best practices.
✅ Key Strengths Semantic & Accessible HTML The structure uses proper semantic tags (<article>, <main>, <h2>, etc.) and ARIA attributes to ensure screen reader compatibility and accessibility.
Responsive & Scalable Styling Clean and scalable CSS using custom properties (CSS variables) allows for easy theming and consistency across the design.
Optimized Performance Images are set with loading="lazy" and explicit width/height attributes to reduce layout shift and improve page performance.
Modern UI Design The layout mimics a professional card-style component with attention to spacing, typography, and color contrast.
Best Practice Fonts Integration Google Fonts are loaded efficiently with preconnect to optimize performance and visual rendering.
P@PiwkoOHey, your solution looks great and I can see that you put a lot in your work. Especially usage of variables and that you use width/height attributes on HTML elements what I should probably do myself more.
I have a suggestion to help you make it even better. You should try to focus more on designs and replicate them as much as you can and use more semantic elements which later on will help you with SEO and website positioning. I know it's a small project but it's great to build good habits from the beginning.
Wish you luck and keep doing a great work!
- P@Carlos-Eduardo-SWhat are you most proud of, and what would you do differently next time?
I felt proud to have built the page with only basic instructions. Even though it's a basic project, completing it made me more confident in tackling future projects.
One thing I would do differently next time is to add more responsiveness. I didn't need to implement responsive commands on this page, but I hope to use them in other projects. I would also like to use more responsive units.
What challenges did you encounter, and how did you overcome them?The biggest challenge I encountered was aligning the items. In the beginning, I couldn't style the image properly. I solved this problem by separating the image from the other stylable items and styling only the image first. I did one at a time until I finished the page.
What specific areas of your project would you like help with?I would like help primarily in areas related to responsiveness. I used the inspect bar to check how the page would behave on mobile, and it seemed normal. If you see any problems and could let me know, I would appreciate it. Also, if you could give me suggestions for responsive measures, I would be grateful.
P@PiwkoOI would suggest to use English for naming and variables, so it would be more accessible to other people (you'll never know with who you'll end up working with) and include .gitignore file in repository.
- @walkerlynaP@PiwkoO
Hi your solution looks great, but I have a few suggestions:
- For devices between 375px to 660px it would look better if you add an additional breakpoint
- Your class naming would be better in English so when you join an international team you don't have to suddenly switch and you would be more used to the naming convention
- Class names like [name]1, [name]2, etc are not very readable for other developers. It should be more descriptive so that when someone else is looking at your code it doesn't require to dive into html file
- Your repeat the same code in different places. In that case, is better to create joined rules for a few classes and separate rules for the particular class.
