DONUZZ• 130
@mrdonuzz
Submitted
Pierrette Mugisha
@pierrettemugisha
All comments
@pierrettemugisha
Posted
Congratulations on completing the Social Links Profile project! Nice work getting it as close to the design as possible!
A few recommandation for best practice:
HTML: Using Semantic HTML: It would be good to use semantic elements like
<main>for the main content. Also, consider using descriptive tas to section your content like<section>and<article>for the profile card. Alt Attributes: Ensure that allaltattributes have descriptive and meaningful values. This is good practice and also looks good when the image is missing. LinkhrefAttributes: Use actual URLs for your anchor tags. For this challenge, you can add the home URLs for each social media link, or use the#for the link placeholder. This makes your anchor more realistic and functional.CSS: Consistent Naming Conventions: Great job following CSS naming conventions. Responsive Design: Continue working on responsive design. Sometimes the responsiveness fails or glitches. You can review your use of media queries to adjust styles as necessary.
Final note and motivation: You are doing great! This challenge brings you closer to becoming an expert in front-end development! Keep up the good work and experiment with different layouts and styles. You can even throw in a few layout and style frameworks out there and compare how they look and defer from using pure CSS. Don't be afraid to ask questions and collaborate with others. Regarding the front-end, there is no one way to do something. Stay updated with the latest web design trends. To test them you can rework some of your (small) projects to see what each trend has to offer and narrow down what works for you and what you can use in your future projects.
0- jerry neil• 90
@neirucode
Submitted
@pierrettemugisha
Posted
The overall structure of the code is good, but it could benefit from some enhancements in semantics. For instance, using elements like
<main>for the main content and<article>for the blog preview card would improve the accessibility and meaning of the content. I get warnings when submitting my solutions, that's why I am mentioning this.The use of the
altattributes for images is good, however, consider using more descriptivealttexts that convey the purpose of the images (for example useGreg Hooper - Authorfor thealtattribute of theimgtag for the author). You could also add arial-label attributes where necessary for extra clarity.The layout is very responsive and fits well on a range of screen sizes. All parts of the card adjust well when size changes.
The CSS is well-organized. All aspects are considered and having the root variables for colors and spacing makes it easy to maintain. However, the custom classes like
.text-preset-1,.text-preset-1and.text-preset-3are non-descriptive and might be clearer to name them according to their use such as.title,.description,.author-name, etc. Also, the inline styles in the `Marked as helpful
0 - Dany DA GRAÇA• 50
@ddg-dev
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of my using of the NPM Library QRCode.js for generating a QR Code from my GitHub URL profile.
What challenges did you encounter, and how did you overcome them?
I wanted to generate the QR Code instead of use the QRCode image in the project folder. I do many tries and I successed by using the NPM Library - QRCode.js.
What specific areas of your project would you like help with?
I tried to write my CSS code extremly clear but, maybe I can do more simply ?
@pierrettemugisha
Posted
Nicely done getting the solution so close to the design! Your code is very well structured and easy to read. I tested the code against the screen sizes suggested in the design and it is responding well. This can be considered to be a good solution to the challenge. Some improvements to be made are making it more responsive to even smaller screens.
Marked as helpful
0
