Looking to hire developers?
@Zy8712
@Demaxs26
Submitted
What are you most proud of, and what would you do differently next time?
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?
/
@Zy8712
Posted
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 👍
Marked as helpful
@pblanabelle
Submitted
What are you most proud of, and what would you do differently next time?
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.
@Zy8712
Posted
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!
Marked as helpful
What are you most proud of, and what would you do differently next time?
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 leftWhat specific areas of your project would you like help with?
I 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.
@Zy8712
Posted
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>
Marked as helpful
What specific areas of your project would you like help with?
Any feedback is appreciated. Thank you 🙂
@Zy8712
Posted
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 👍
Marked as helpful
@LeandroJr730
Submitted
What are you most proud of, and what would you do differently next time?
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.
@Zy8712
Posted
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 👍
Marked as helpful
@svetikbaihe
Submitted
What are you most proud of, and what would you do differently next time?
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).
@Zy8712
Posted
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 👍
Marked as helpful
@KatherineMarlo
Submitted
What are you most proud of, and what would you do differently next time?
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.
@Zy8712
Posted
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 👍
Marked as helpful
@Litheesh-kumar
Submitted
What challenges did you encounter, and how did you overcome them?
greyish blue background color.couldn't be done.
@Zy8712
Posted
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 👍
Marked as helpful
@NithishSaran04
Submitted
What are you most proud of, and what would you do differently next time?
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.
@Zy8712
Posted
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 👍
@complic8-coder
Submitted
What specific areas of your project would you like help with?
Any feedback or comments are welcomed and appreciated 👍
@Zy8712
Posted
Hi there! Your site looks pretty solid. The only main things I'd change are:
<h2> for the numbers, it might be better if you used a <span> and then assigned a font-size for the numbers in the <span> tagsHope you find the feedback useful 👍
Marked as helpful
What are you most proud of, and what would you do differently next time?
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?
@Zy8712
Posted
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!
Marked as helpful
@ana-lsm
Submitted
What are you most proud of, and what would you do differently next time?
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
@Zy8712
Posted
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 👍
Marked as helpful
@tina4449
Submitted
What are you most proud of, and what would you do differently next time?
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?
@Zy8712
Posted
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 👍
Marked as helpful
@VictorKevz
Submitted
What are you most proud of, and what would you do differently next time?
I am glad that I was able to make this component responsive as needed. Responsiveness is still something I am still working on(getting better) especially if I use React to do my projects. I am so glad that I managed to learn more about positioning. I usually cheat with align-self to properly position my footer but I fully understand relative and absolute(a bit of a pain🤣).
What challenges did you encounter, and how did you overcome them?
I had a challenge with setting the border-radius to my items on viewports
What specific areas of your project would you like help with?
Any comments are welcome. I am here to learn🥰
@Zy8712
Posted
Hi there! Your site and code look great, nice work!
Some changes I'd recommend:
<h1> tags to <h2> tags as there is only supposed to be one <h1> tag per page. So you could declare an <h1> tag and make it invisible while placing text in it describing the webpage<main> tag to encapsulate your page's main contentAside from that your site looks great! Hope you find this feedback useful 👍
Marked as helpful
@yas-avocad
Submitted
What are you most proud of, and what would you do differently next time?
Using flex more effectively. Was much faster to use flex and gap, rather than setting margin for each individual item.
What challenges did you encounter, and how did you overcome them?
The background on the 'learning' item took up the whole line, despite setting the display property to inline-block. Align-self: flex fixed the problem
What specific areas of your project would you like help with?
Font size/weight for the main body of text. I can't seem to get it exact.
@Zy8712
Posted
Hi there! Your site looks great!
To answer your question:
Hope this helps 👍
@JordonGoodsir
Submitted
What are you most proud of, and what would you do differently next time?
The speed in which I built it, have a boilerplate
What challenges did you encounter, and how did you overcome them?
N/A
What specific areas of your project would you like help with?
Any feedback is nice
@Zy8712
Posted
Hi there! Your site looks great.
The only changes I would suggest are:
<h1> tag instead of <p> for the title of the qr cardfont-['Outfit'] on the div containing your text, so you don't need to place font-['Outfit'] twiceAside from that your site is solid. Nice work 👍
Marked as helpful
What are you most proud of, and what would you do differently next time?
I finished this honestly really quickly
What challenges did you encounter, and how did you overcome them?
I thought getting the padding/ margin pixel perfect was pretty difficult but got the pretty close.
What specific areas of your project would you like help with?
I would like tips on cleaner code. I don't think its messy but maybe ways to make it easier going forward?
@Zy8712
Posted
Your site looks pretty solid.
The only things that really stands out to me as needing to be changed are:
<a> instead of a <button> tag as thats what the project calls forfont-weight to the link's textBesides that your code looks great!
@CardboardPL
Submitted
What are you most proud of, and what would you do differently next time?
That it is at least close to the design and I will probably try harder next time to get it close enough.
What challenges did you encounter, and how did you overcome them?
Implementing the design was my biggest challenge and I overcame it by just telling myself that it doesn't have to be pixel perfect.
What specific areas of your project would you like help with?
Feedback.
@Zy8712
Posted
Your site looks great and code is easy to read. Nice work!
Some changes I'd suggest are:
alt description on images empty (alt=""). Descriptions for images are mainly used for images that convey some type of information. So decorative images that don't have any information can just have their descriptions be left blank<h1> tag instead of an <h2> tag as headings are supposed to be used in order from h1 to h6 without any skips. The headers come with default font sizes that can be changed using the font-size attributeHope you find this feedback useful 👍
Marked as helpful
@kevsmartini
Submitted
What are you most proud of, and what would you do differently next time?
This was my third challange so far and I made it in a short time.
What challenges did you encounter, and how did you overcome them?
I would say none, this one was very fluently I really enjoyed it and i felt very confident doing it.
What specific areas of your project would you like help with?
Any little detail you see that can be improved, I am really willing to learn!
@Zy8712
Posted
Hi there! Your site looks pretty good and your code is easy to read.
Some changes I would suggest:
<h1> tag instead of an <h2> tag as headings are supposed to be used in order from h1 to h6 without any skips. The headers come with default font sizes that can be changed using the font-size attributeAside from that your sites looks pretty solid. Nice work 👍
What are you most proud of, and what would you do differently next time?
I'm proud of making the solution quite similar to the design, but I feel like there's still areas that are different.
What challenges did you encounter, and how did you overcome them?
I was hesitant on using certain html tags for sectioning layouts. I wasn't sure if aside was necessary.
I also need help with the hover state! I want to trigger the increase in box shadow as well as the change in H1 font color to yellow, but I don't know how to trigger both of them at once. If I add :hover to card container, I can only increase the box shadow.
If I simply add H1:hover, the font change will only trigger when I hover on H1 specifically. How can I change the H1 font color when I hover over the entire card?
What specific areas of your project would you like help with?
I think I have a tendency to write redundant code, so if anyone has tips on how I can change my code to be more efficient that would be really helpful. I would also like to know if I chose the right html tags. All other critiques are also welcome!
@Zy8712
Posted
Hi there! To change the color of the <h1> text when you hover over the card you can do something along the lines of:
main:hover h1{
color: #F4D04E;
}
Hope this helps 👍
Marked as helpful
@joacomenda
Submitted
What are you most proud of, and what would you do differently next time?
I'm most proud of the analysis before making the website, this made the transition to bigger displays much more easy.
What challenges did you encounter, and how did you overcome them?
I found difficult to assign the relative units to the different parts of the webpage.
What specific areas of your project would you like help with?
How to center vertically the container of my whole design, so it looks good in all the displays.
@Zy8712
Posted
Hi there! Your site looks pretty good.
To answer your question, one of the most basic ways of centering the card for this page would be to just use flexbox for your <body> tag. It could look something like this:
body{
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
The attribution may interfere with your centering so you could just use this to get it out of the way:
position: absolute;
bottom: 0px;
Hope you find this feedback useful 👍
What are you most proud of, and what would you do differently next time?
I'm proud that I didn't use many resources and that I finished it really quickly. I'm not sure I'd do anything different I just don't know if having so many flex boxes is best practice.
What challenges did you encounter, and how did you overcome them?
I had a hard timing getting the padding between texts ended up removing all padding and margins from the whole project with * and then adding them individually.
What specific areas of your project would you like help with?
Creating neater code?
@Zy8712
Posted
Appearance wise, your site and code look pretty solid.
The main things I'd change are:
<div> with class cotainer to a <main> tag for accessibility reasons, also you don't refer to the this class anywhere in your css so that div is sort of redundant<h2> tag you should use an <h1> tag as headers are meant to be used in order from h1 to h6 without any skips. The headings come with default font sizes that can be changed using the font-size attribute in css:hover selector in cssHope you find this feedback useful. If you have any questions feel free to ask 👍
Marked as helpful
What are you most proud of, and what would you do differently next time?
I'm most proud of having the final product look very similar to the design. Having access to the figma file is very helpful to the process. Next time I should organize all the font styles and colors before I start coding so I don't have to go around looking for them in the middle of coding.
What challenges did you encounter, and how did you overcome them?
I had a bit of trouble with flex. I mistakenly tried to center the container in the child instead of the parent class, which ended up in me centering it horizontally only. I figured out that display: flex should have been in the parent, and upon changing it, I successfully centered it vertically.
What specific areas of your project would you like help with?
I am not sure if the code I wrote could have been written more efficiently. I think I have a habit of writing excess code, or doing things in a way that use more code than necessary. If anyone has more effective ways that I could implement, please let me know.
@Zy8712
Posted
Your site looks great and your code is really minimal. Nice work!
Some things I'd suggest you to change:
<h1> instead of <h3>, heading tags are meant to be used in order from h1 to h6 without any skips. All of these heading tags come with default font sizes which can be modified using the font-size attribute<article> tag is perfectly fine, though most people would include the <main> tag for their page's main contentHope you find this feedback useful 👍
Marked as helpful
@raphaelperfi
Submitted
What are you most proud of, and what would you do differently next time?
Keep the layout identical, I still need to fix the font-size
What challenges did you encounter, and how did you overcome them?
The responsiveness, I changed the font size with media queries
What specific areas of your project would you like help with?
I want tips on responsiveness
@Zy8712
Posted
Your site looks pretty solid. The only thing I'd change is how you are centering your card. You should assign flexbox to the body of your page, so instead of using margin-top you should use something like this:
body{
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
Hope you find this feedback useful 👍
Marked as helpful