@InfanteAngel
Submitted
@mbalali63
@InfanteAngel
Submitted
@mbalali63
Posted
Hi @InfanteAngel Thank you for the good work. Although the design is really similar to the target design, but please let me review few points that could improve it.
I hope my suggestions be useful. Good Luck
@halliann
Submitted
@mbalali63
Posted
Hi @halliann Thank you for the great job. your work is really good. But please let me suggest two points, you can add hover effect for the links, as the target design have. and also the font seems to be different than Inter. Good Luck
Marked as helpful
@mbalali63
Posted
Hi @EdwinDev6 You have well used tailwind-css and generated a very good design. However, let me consider few points about the work. The minor differences between your work and the target design, seems to be because you have used tailwind-css values for sizes and colors and so on, and that is completely OK but if you want to use exactly the same colors or font sizes or dimensions, you can use your values in tailwind-css, too. for example to use a custom dimension for width, you can use w-[13px]. and so forth for other selectors. Hope to be helpful for your project.
@jeffgicharu
Submitted
What are you most proud of, and what would you do differently next time?
I'm mainly proud of the fact that I was able to finish this challenge despite being very confused when I started.
What challenges did you encounter, and how did you overcome them?
As I was adding styles in the CSS, there was a element which was not behaving as expected when I tried to style it. I overcame the challenge by trying different possible solutions until I found one that worked.
What specific areas of your project would you like help with?
I would like help in knowing when to add classes to HTML elements and also in the organization of my CSS.
@mbalali63
Posted
Hi @jeffgicharu Thank you for the great work. The html and css file are well structured and excellent. I just think that your font sizes are too small. it may be good enough if it will be increased from 15px to 19px for the header text and the other 17px. And also please consider the background color which is different from the design. Hope this is helpful for your great work.
@roopxx
Submitted
What are you most proud of, and what would you do differently next time?
This was a great challenge. I used CSS flex box to centre the component however this can also be done with CSS Grid. Next time, I would try to use Grid.
What challenges did you encounter, and how did you overcome them?
This challenge was quite easy though I found it hard to make the `` position correctly in the QR component. And also getting the correct box shadow was quite a challenge for me.
What specific areas of your project would you like help with?
Having said that I used flex, though I wasn't able to align the text with the exact spacing as provided in design files. I used margins and padding in the `
@mbalali63
Posted
Hi Rupesh Your work is great. Unfortunately your code is not accessible. But the considering the design comparison above, reveals that the font sizes shall be decreased. if the main container (the white box) height be set to 100%, with extra padding, then the overflow of text below the box will be removed. Good luck
What are you most proud of, and what would you do differently next time?
I am most proud of the progress I have made in HTML and CSS.
What challenges did you encounter, and how did you overcome them?
This challenge at first glance seems simple, but I found myself faced with the challenge of giving styles to the lists, specifically giving color only to the bullets and the numbered list. Investigating the CSS for the lists I only have the following properties:
None of these properties serve to give it color.
To solve the challenge use the ::before pseudo-element. Here is an example:
.section__options {
position: relative;
list-style: none;
padding-left: 3rem;
line-height: 2;
}
.item::before {
content:"" ;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: var(--color-preparation);
position: absolute;
left: 0;
transform: translateY(15px)
}
What specific areas of your project would you like help with?
I think that by using the ::before pseudo-element I found the solution to the challenge with lists. I would like to know if there is another way to solve it.
@mbalali63
Posted
Hi Roraima Your work is very good. it looks very similar to the target design. And about styling list bullets, I think it may simplify if you use marker. here you can find details.
Marked as helpful
@ivara21
Submitted
@mbalali63
Posted
Hi ivara
Your design looks perfect. but as I checked your code, it seems that the mobile and desktop dims are the same. but in the design the desktop is a bit larger. Also the dimensions of your design are much smaller than the target. You know these are really unimportant considerations and the most important fact is that your design looks great. thank you.
Marked as helpful
@Anis-Web
Submitted
@mbalali63
Posted
Hi my friend
Good job. your design seems pretty nice, but I feel I had to inform you about few considerations to improve it:
In your design "HTML & CSS foundations" is a hyperlink and it is OK. but I suggest to set its text-decoration to none and color to #000, then it will look better.
The gap between elements in content section could be increased.
and the button background color would be better if set to the defined --yellow color in the root.
It seems that 16px for box-shaddow extend is too much, I guess it must be around 10.
and again thank you for the nice design. I hope my suggestion be useful for you. Regards
@RubyMary18
Submitted
What are you most proud of, and what would you do differently next time?
Responsive Design
What challenges did you encounter, and how did you overcome them?
--
What specific areas of your project would you like help with?
--
@mbalali63
Posted
Hi Ruby Mary Your implementation is great. It is really similar to the target design.