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 👍
I'm most proud of how the responsive design turned out. Ensuring that the website looks great and functions well on various devices was a significant accomplishment. Next time, I would approach the organization of my HTML differently. I would strive to implement a more structured and modular approach to make the code easier to maintain and update in the future.
What challenges did you encounter, and how did you overcome them?Making sure that the containers and items were aligned properly. A lot of work with the inspect tools to make sure i got spacing and everything as close to the design as possible.
What specific areas of your project would you like help with?making sure that everything is up to best coding practices and anything i could do more efficiently.
Hi there! Your site looks pretty good.
Here are somethings I feed you could change next time:
alt="", alt descriptions are mainly used to describe images that convery some type of information so decorative images should just have their descriptions be left emptyHope you find this feedback useful 👍
greyish blue background color.couldn't be done.
Hi there! Your site looks pretty good.
The only thing I'd change is how you centered your card. Instead of making a container with 98vh, I would suggest something like:
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: hsl(212, 45%, 89%);
}
Hope yuo find this feedback useful 👍
Learnt many new things while practing.
What challenges did you encounter, and how did you overcome them?I learnt to break and start a new line within paragraph using and positioning in css.
What specific areas of your project would you like help with?There are lot of topics for me to be covered.
Hi there! Your site looks pretty solid and is quite similar to the original design. Nice work!
Some changes I would personally recommend:
<body>, then you can do something like:body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Flexbox is a important concept/skill in css. To learn more about it I recommend this video.
Hope you find this feedback useful 👍
I liked implementing transitions to the buttons with hover effect, it added a bit more depth to the design.
What challenges did you encounter, and how did you overcome them?In figma, the design looked identical in both mobile and browser view so I opted out of adding a media query. However, upon further look, I realized that the dimensions were indeed different, so I added a media query. I don't know the best px to use for specific devices, so I went with the one given in figma.
What specific areas of your project would you like help with?When it comes to buttons, I'm not sure if I should use p with css styles to make it look like a button, or if I should use the button tag that already exists in HTML. I would like to know if there's specific situations where one is better than the other, or if it's just a personal preference for developers.
Another area is the sizing; currently I use fixed sizing (px) for the container since I'm trying to get the final product to look as similar to the design as possible. Should I instead use em/vw/vh/% to make it more responsive, despite given the specific dimensions in figma?
Hi @yinnie, your site looks great!
To answer your question:
<a> for the boxes as it is built for that intended use. This would be better for semantics and we can use the built-in attributes for link tags like href and targetThe only other feedback I'd give is that the alt description for the image can be left blank if you want (alt="") because its usually only used to describe images that convey important information.
Aside from that your site looks great!
That it is responsive.
I would try to make it more accessible for screen readers.
What challenges did you encounter, and how did you overcome them?The hover on the card, to make the box-shadow bigger.
What specific areas of your project would you like help with?The semantic tags in HTML
Your site and code look pretty solid. Proper semantic tags were used where applicable and your code is well structured.
The only change I'd suggest is:
alt="". The alt description is usually mean to describe some form of important information that a image is showing, so for decorative images you can leave it emptyBesides that it seems you understand what to do. Nice work 👍
I can quickly finish the HTML part and move on to the styling part. Next time, I will create a set of variables to help me learn how to build the style library.
What challenges did you encounter, and how did you overcome them?I kept trying to center the div element on the webpage because I couldn't get my element to move to the center along the y-axis. So I googled it and finally realized that I need to set the vh if I want to center stuff along the y-axis by asking ChatGPT.
What specific areas of your project would you like help with?I want to know whether my code is correct and well-organized. Are there any redundancies that can be improved?
Hi there! Your site looks great and follows the original design very closely. Nice Work!
Some changes I recommend:
<h1> tag instead of a <h3> tag as headings are meant to be used in order from h1 to h6 without skips. The headings all come with default fontsizes which can be modified using font-size (like you already have done)<main> tag around your page's main content<body> you should use min-height instead of heightAside from that your scss and html code looks clean and is easy to follow. Great work 👍