@hazhir00Submitted 18 days ago
Sylwia
@LesSylAll comments
- @LesSylPosted 18 days ago
Hi, you have done a good job, whereas the first thing that catches the eye is the Supervisor card. On larger screens, it is stuck to the left edge. Personally, I would have used a grid in this design. More information here: CSS Grid Layout Module,
it is good practice to use a naming convention such as BEM (Block, Element, Modifier) is beneficial as it makes the CSS more organised, readable and easier to maintain. BEM helps to clearly understand the purpose of each class, avoid naming conflicts and create reusable components, leading to a more scalable code base. More details here: BEM,
using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.
Good luck!
Marked as helpful1 - @poorijakSubmitted 18 days ago@LesSylPosted 18 days ago
Hi! Your solution looks grate. I have a few suggestions:
-
the <a href ="">attribute should specify the destination of the link, you can read more here: w3- <a href>, MDN- <a href>,
-
the <img> tag should have the <alt> attribute completed. It is important for SEO. HTML: A good basis for accessibility,
-
it is good practice to use rem and em to specify font size and margins and padding. More information here: CSS values and units,
-
it is good practice to use a naming convention such as BEM (Block, Element, Modifier) is beneficial as it makes the CSS more organised, readable and easier to maintain. BEM helps to clearly understand the purpose of each class, avoid naming conflicts and create reusable components, leading to a more scalable code base. More details here: BEM.
Good luck!
0 -
- @LesSylSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I am proud that I was able to create the project in a short time. I would change the way I code in JS.
What challenges did you encounter, and how did you overcome them?Największym wyzwaniem dla mnie było przycięcie obrazu. Rozwiązanie wyszukałam w internecie.
What specific areas of your project would you like help with?I would like some help/feedback whether I have cropped the image correctly (I think it can be done differently, but I don't know of any other solution). I am also wondering if the way I made the JS is good. Thank you for your time.
@LesSylPosted 18 days agoThank you very much for your time and for your valuable guidance. I will certainly take your advice on future projects.
0 - @LesSylSubmitted 28 days agoWhat are you most proud of, and what would you do differently next time?
I'm proud to have mastered the techniques of building responsive websites, which not only improves the look of the site, but also makes a significant difference to the user experience. I'm also pleased that I was able to learn how to add my own fonts using @font-face, which allows me to fully adapt the design style to my vision. My greatest satisfaction, however, comes from the fact that I can prevent the page from reloading, taking care of the smoothness of the application, and that I have a good understanding of the principles of form validation, which translates into the safety and comfort of the users of my projects.
What specific areas of your project would you like help with?I would be very grateful for any comments or tips on areas I could still improve. Thank you!
@LesSylPosted 23 days agoHi,
thanks for your comment - you're absolutely right. I should focus more on refining the CSS and making sure the sizes match the original. I'm still learning and it seemed to me the design looked better in smaller sizes.
Thank you for your kind words - now I have even more motivation to learn! I'm really grateful for the support.
I have already revised the design.
Good luck!
0 - @vgt3j4d4Submitted about 1 month agoWhat challenges did you encounter, and how did you overcome them?
I didn't know that if you style a `` element then it becomes automatically visible.
@LesSylPosted 28 days agoHi, you did a great job with the challenge. However, I have a few suggestions that you could use in future projects:
-
work more on responsiveness, on very small screens (320px) the text doesn't fit,
-
think about adding fonts via the :root. If you change the fonts you will be changing it in one place. Here is more information::root.
Good luck!
Marked as helpful0 -
- @vgt3j4d4Submitted about 2 months agoWhat challenges did you encounter, and how did you overcome them?
See the next question.
What specific areas of your project would you like help with?I see the share button has 3 colors : 1) The normal color where no share links are displayed 2) The color when the share links are displayed in portrait mode (bottom of the card). The color when share links are displayed in landscape mode (the tooltip is opened). I do know how to change the background of the button (
background-colorcss property) but I was spending too much time to figure out how to change the color of the curved arrow. I'd really appreciate someone letting me know what do I need to do :)@LesSylPosted about 1 month agoHi! Well done!
Your design really is very good.
Good luck!
1 - @DalaScriptSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
- Nothing special this time. It was a simple project but still a great learning experience! ✨💻
- I wouldn’t call it an obstacle, but the radio-type inputs took the most time to style properly. 🎨📻
- Any advice from other developers would be appreciated! 🙏💡
@LesSylPosted about 1 month agoHi, your solution is really good!
For your next project try using em and rem instead of px, for example padding and margin. You can read more about this topic here:CSS units and CSS values and units.
Good luck!
0 - @rekikalemayehuSubmitted about 1 month ago@LesSylPosted about 1 month ago
Hi! Your solution looks grate. I have a few suggestions:
-
try to use em and rem instead of px for example for padding and margin . You can read more about it here: CSS values and units,
-
It is good practice to use a naming convention such as BEM (Block, Element, Modifier) is beneficial as it makes the CSS more organised, readable and easier to maintain. BEM helps to clearly understand the purpose of each class, avoid naming conflicts and create reusable components, leading to a more scalable code base. More details here: BEM,
-
using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences,
-
you should still work on the preparation time section, as the background does not look very good on small screens.
Marked as helpful0 -
- @fowzia-mehediSubmitted about 1 month ago@LesSylPosted about 1 month ago
Hi, great work. Your solution is very good. I have a couple of suggestions:
- why did you put the styles in html? They should be in a separate file. You can read more here: CSS basics
- it is good practice to use a naming convention such as BEM (Block, Element, Modifier) as it makes the CSS more structured, readable and easier to maintain. BEM helps to clearly understand the purpose of each class, avoid naming conflicts and create reusable components, leading to a more scalable code base. More details here: BEM. Good luck!
Marked as helpful1 - @agni-tejasSubmitted about 1 month ago@LesSylPosted about 1 month ago
Hi, great work. I have a few suggestions for future projects:
-
better use em and rem instead of px. More information here: Why you shouldn't use pixels for font-size, CSS values and units
-
it is good practice to use a naming convention such as BEM (Block, Element, Modifier) as it makes the CSS more structured, readable and easier to maintain. BEM helps to clearly understand the purpose of each class, avoid naming conflicts and create reusable components, leading to a more scalable code base. More details here: BEM.
Good luck!
0 -
- @tailor-made-godSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of develop this design in 4 hours without design files as a beginner. Next time I will try to do a more responsive design like elements are resizing according to the devices in between the mobile and desktop design.
What challenges did you encounter, and how did you overcome them?The challenge I encountered was deciding the element sizes without design files and I overcome this by some math, trial and error.
What specific areas of your project would you like help with?I want some help in how to resize the elements with device size changes like fluid in between mobile and desktop.
Example : div size fluidly changing while resizing window but same time elements inside div also resizing and align perfectly.
This my expected output as aspiring developer, So if it can happen. How?
@LesSylPosted about 2 months agoHi, great solution done, while I have a few comments:
-
The h1 should only be one per page, here you can read more: MDN.
-
It is good practice to use a naming convention such as BEM (Block, Element, Modifier) is beneficial as it makes the CSS more organised, readable and easier to maintain. BEM helps to clearly understand the purpose of each class, avoid naming conflicts and create reusable components, leading to a more scalable code base. More details here: BEM.
-
If you want better responsive, try using rem and em instead of px. More details here: font-size.
Marked as helpful1 -
- @GustavoSDSSubmitted almost 2 years agoWhat are you most proud of, and what would you do differently next time?
The desing.
What challenges did you encounter, and how did you overcome them?No challenges found.
What specific areas of your project would you like help with?I'm fine for the moment.
@LesSylPosted about 2 months agoHi, great job. Your design really looks great. My only suggestion is to replace the px with other units. You can read more about it here: https://fedmentor.dev/posts/font-size-px/. Good luck!
0
