Hi ! I hope my solution is correct. Is the paragraph problematic because there is only two line ? Should I have used a flex box ?
What challenges did you encounter, and how did you overcome them?/
What specific areas of your project would you like help with?/
Hi there! Congrats on finishing your first challenge!
Some things I would suggest you to alter/change:
<h2>, you should use the <h1> tag as headings are meant to be used in order from <h1> to <h6> without skips. The headings come with default font sizes that can be changed using the font-size attribute in css<body> element:body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Hope you find this feedback useful 👍
I'm proud of achieving a cohesive and functional design with the Social Links Profile Page. Next time, I would prioritize upfront planning and accessibility considerations, seeking more feedback to refine my skills and ensure inclusivity in web design.
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?I don't know. Maybe a comment to improve my codes.
Hi there! Your site looks pretty good.
The main things I'd alter/change with your code are:
<main> tag to improve accessibility<h2> tag instead of a <h5> tag as headings are meant to be used in order from h1 to h6 without skipsalt description of the image empty like alt="" as descriptions are mainly used for images that convey important information. Decorative images can just have empty altAside from that your site looks great!
I'm sort of happy I was able to make it responsive, but there's lots of areas where I can improve on in terms of the code when it comes to responsive design.
Next time I might try to do mobile first approach, where I code out the mobile view first then expand on the larger sizes.
What challenges did you encounter, and how did you overcome them?There were two areas that I struggled with:
list-style-position: inside and ::marker to decorate the bullet points. In terms of aligning the text, I discovered that position: relative helped me add space between the bullet points and the paragraph. text-indent in combination with padding-left made the paragraph align on the leftI feel as if my code could be condensed more, but I'm not sure how. There were a lot of repetitiveness that I could do without. In addition, I don't know if I overdid it with the classes and tags in the html.
If there's better approaches to responsiveness than what I wrote, please let me know. I will gladly take criticism from any weak areas you may spot.
Your site looks pretty good. The main thing I'd change is that I would've used a table for the nutrition section so it would've been easier to format everything. Your code could look something along the lines of this:
<table>
<caption>
The table below shows nutritional values per serving without the additional fillings.
</caption>
<tr>
<th>Calories</th>
<td>277kcal</td>
</tr>
<tr>
<th>Carbs</th>
<td>0g</td>
</tr>
<tr>
<th>Protein</th>
<td>20g</td>
</tr>
<tr>
<th>Fat</th>
<td>22g</td>
</tr>
</table>
Any feedback is appreciated. Thank you 🙂
Hi there! Your site looks great and follows the original design closely. Nice work!
Some things I'd suggest you to change with your code:
alt="" as screen readers will read anything that is in the alt descriptions. Meaning in your case it'll read things like "one star", "two star", "Customer image of Irene Roberts", etc<img> tags should mainly be used for images that convey some important informationAside from that your code structure looks great. Hope you find this feedback useful 👍
I am proud of making the website "work" on mobile devices by my own, just by searching the basics on the internet. I need to learn how to use semantic tags better, so my code is easier to read.
What challenges did you encounter, and how did you overcome them?I spent a lot of time trying to get the perfect margins, paddings, etc. I should do it faster and focus more on other things. I also struggled to make my website work on mobile devices but it ended up kind of working.
What specific areas of your project would you like help with?I need to use better semantic tags and improve the way my website is displayed in mobile devices.
Hi there! Your site looks pretty good.
Some things I would recommend you to change/modify with your code:
<h1> for the title of the card and you should also use a <p> paragraph tag for the text of the card. This is primarily for semantic and accessibility purpsoes<img> tags you can leave the alt decription empty like alt="" as descriptions are mainly used for images that convey some important information. So decorative images can be left emptyAside from these two things, you've got solid code structure 👍
I am not quite proud of myself in this project, frankly speaking. It took a lot of time for doing simple things because of the inattentiveness and lack of practice.
What challenges did you encounter, and how did you overcome them?I definitely had challenges with sizes and the general understanding of the necessary positions of an element, like, what I need to do to place it in the right place on the page. I just tried different things, like removing width and height on certain elements, using flex and removing it again. In the end, I managed to make it look like as it does in Figma.
What specific areas of your project would you like help with?It'd be grateful for any feedback, any advice on html structure, how to organize things on the page, how properly use width and height, maybe some advice about using different units and values( px, vh, em, rem).
Hi there! Congrats on finishing your first challenge, your site looks great!
Some things I feel like you could change/modify with your code:
<h2> tag you should use an <h1> tag as headings are meant to be used in order from h1 to h6 without any skips. They all come with default font sizes that can be changed in css with the font-size attribute<body> I would recomment using min-height: 100vh as opposed to height: 100%, as its standard practice and gives you the desired result in almost every scenario<img> you could leave the alt description empty in most cases unless the the image conveys some important information that needs to be read out by screen readers (not too sure how it would work in this case with a qr code though)Aside from that your code structure is excellent and your site looks virtually identical to the original design. Nice work 👍
