P
@ijerkov
What challenges did you encounter, and how did you overcome them?
I didn't have challenges this time.
What specific areas of your project would you like help with?I would like to get a feedback on accessibility and semantic html usage.
keftajnr
@keftajnrAll comments
- @keftajnr
Wow! It is a fantastic work, my friend.
There were slight issues as to the background colour and the non visibility of the box shadows, which one can forget. This, however, can be easily sorted out.
Apart from all that, it is looking really nice, with definite similarities with the design page. Great work!
- @zrafaelagomesWhat are you most proud of, and what would you do differently next time?
Tive desafios ao fazer a parte responsiva e no posicionamento dos cards, creio que o código ficou meio bagunçado mas estou melhorando
@keftajnrHey Rafaela
I just wanted to say great job on your solution - it looks neat and well structured. I liked how you placed the cards and used the icons. I am still learning too, but i noticed the spacing and alignment felt a bit different from the original. The fonts and colours were slightly off too, and i also think using less fixed sizes might help with better responsiveness.
Overall, I learned a lot from just looking at your work. Keep it up, Voce esta mandando multo bemi.
Marked as helpful - @slayer-brWhat are you most proud of, and what would you do differently next time?
I’m proud of creating a clean and responsive product preview card using a mobile-first approach. I paid special attention to the semantic structure and accessibility. Next time, I would focus on implementing image optimization techniques like using the <picture> element for responsive images.
What challenges did you encounter, and how did you overcome them?One challenge was centering and aligning the product prices properly while keeping the markup clean. I solved it by using Flexbox to control the spacing and alignment within the price container. Another challenge was adjusting the layout between mobile and desktop views, which I overcame by applying media queries effectively.
What specific areas of your project would you like help with?I would like feedback on how to further optimize my CSS structure and better handle responsive images for different screen sizes using modern HTML techniques. Any suggestions on improving accessibility would also be appreciated.
@keftajnrYour project is quite stunning to behold.
it helped me to recollect what I missed when doing this similar project. Despite the difference in width and height, I can also see little flaws with the border radius used for the project container. Also, issues with the padding given to the button as it is a little bigger than that of the design solution.
Apart from all these, It is a good and nice project done, Well done! I would rate this 9/10
Marked as helpful - @daklo91@keftajnr
Congrats on your work on this project!
You really did well in your structure, code, styling and really in all aspects of your code.
I like that it is simplified, readable and accessible. It is professionally structured and looks really slick on my screen.
There is really nothing to say bad about it, apart from being slightly bigger than the design.
From someone who is still growing in this career, keep it up.
- @HossamElrawy@keftajnr
Good job on this project!
I looked at your code and was wowed. The amount of code you put in, specifically to the img element, was surprising but yet professional. It wasn't too simplified and easy to read, but still fine.
One thing I noticed was a lack of good structure, proper semantic HTML, talking about the publisher name and the header element wrongfully used, and that needs fixing. Fortunately, it turned alright.
Also, I saw an error in the color property for your <header> content. You used "gold" instead of black. Probably, it was a unintentional mistake.
It is still a nice solution and relates in not much difference to the original design.
- @twx0504@keftajnr
Congrats on this impeccable design. I could not even tell the difference between the design and your solution.
There is nothing to say wrong about it, to be fair. It is just that slick.
Very professional code, definitely includes semantic HTML, easy to read and use.
Superb work!
Marked as helpful - @Teiko21@keftajnr
I have got to say this, Congrats on your excellent work on this project.
One thing I liked when reviewing your code is its readability and simplicity. Yes, some of the class names were not the greatest class names, but the code (both html and css) were nicely written and professional.
There are some areas that need a bit of improvement, as touching the use of the CSS font-size property. I would recommend making use of pixels rather than "rem" used. There was not appropriate width when styling the social links, the padding there was also much more than necessary.
Regardless, it is a job well done and definitely similar to the design of this challenge.
Marked as helpful - @Lazaro-MG@keftajnr
It includes semantic HTML, that is one.
It could use a bit of work with the heights and the use of the CSS font-weight property.
It is well-structured, readable and does not entirely differ from the design except with the height of the container.
Marked as helpful - @louloumwana@keftajnr
It is a good design, really put in some work with specific elements.
It definitely includes semantic HTML, it is accessible and the value of the CSS gap property should be reduced.
Regardless, it is well structured and reusable by anyone.
Marked as helpful - @MichaelDAbadJrWhat are you most proud of, and what would you do differently next time?
I'm most proud of applying what I've learned from the first challenge I did. I implemented the feedback also from the community that they conveyed to me. I am proud of making the css scalable by using css variables for font colors, font weights. I also made custom text css classes so the text-theme's can be easily re-used.
What challenges did you encounter, and how did you overcome them?The challenges I faced were using correct and proper semantic HTML. Here I really focused on using correct and proper semantic HTML. I really researched the difference between using an article for standalone content, a section for important relatable content with H tags within the overall content, and div's are really for everything else that just need content to be grouped. Also using figma to make it pixel perfect is also a challenge and there is quite a learning curve but I think I am getting the hang of it. I could not find in figma exactly where the :hover effects measurements for the html elements were located. I knew that the card-container was what the :hover was being applied to, but the exact html elements that had the "effect" were he H1 blog-title and the card-container box-shadow. But in figma I could not find what exactly the measurements for the box-shadow were. Also the type of transition I could not find the "exact" way the figma prototype was doing it.
What specific areas of your project would you like help with?I would love help on getting any feedback on if my HTML setup is the most proper and professional. And if not, how can I make my HTML setup as proper and professional as possible. I really focused on getting pixel perfect and scalability. So now I need help on doing it the proper and professional way. Also please tell me your process on how you go and get the active/hover/focus states in figma design, and convert that into CSS code.
@keftajnrIt includes sematic HTML, it is simple and accessible to the public and it is relative to the original design.
The code used in this project is well structured, again simplified, readable and follows HTML and CSS rules
- @nettogtr@keftajnr
It includes semantic HTML It is accessible and yes, the qr code image and height of the container can be improved The layout is good for a range of screen sizes It is well structured, readable and reusable It differs a bit
