@devEduSousaSubmitted 7 months ago
Aryarishi Sikdar
@ArryBlackAll comments
- @ArryBlackPosted 7 months ago
Hi, I like the approach you have taken of using a single HTML page, I was thinking of a similar approach, but ended up opting for a separate success page. The site looks great, great job on the challenge!
Here are a few things I would like to point out that can improve your solution:
- On the success page, you can dynamically add the user's email instead of the placeholder, using JavaScript like given in the design specifics. You can use textContent to display the value of the email input.
- Add the hover states for the buttons on larger screens, including the change in background color and changing the cursor into a pointer to make the buttons more intuitive.
- To match the design specifications, you can add the background color and color of the error state in the input box.
- The site is breaking slightly at the smaller screens approximately from 376px to 768px. You can remove the media query for min-width:376px, as I assume that is causing the issue, and you added the illustration for the desktop version in that query. In my solution, for responsiveness I used a single media query at somewhere around 700 pixels. I gave the card a width of 80% for those awkward medium screens and gave it an appropriate max-width, achieving a look close to the design specs. You can go for a similar approach.
Once again, a great job on the challenge! If you get the time, please check and provide some feedback on my solution for the same challenge. Happy coding!
0 - @delroscol98Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I'm super proud of the CSS, I got it as close as I could to the design. As stated in the README, it's really important that as project become more complex to assign appropriate classes to elements based on their purpose. Also to identify the pattern of certain components in their styling. This would produce a personal CSS library which would be pretty cool.
What challenges did you encounter, and how did you overcome them?Definitely the construction of the tooltip. This was my first time making one. I was tempted to use a CSS library like Bootstrap, but I wanted to build it from scratch first to understand the design and logic.
What specific areas of your project would you like help with?Readability of the HTML file and the assignment of class names to elements. As the class names link directly to the CSS file, I want to make sure that my assignment of class names and the organisation of my CSS code is the best it can be.
@ArryBlackPosted 8 months ago@delroscol98 Great job man! Really concise code. I solved this challenge just now and your solution gave me an idea of how to improve it. Btw, if I can provide any feedback, on smaller screens from around 500px to 767px, the share button is overlapping with the social media links. You can maybe try adding a margin.
0 - @mkhantkSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of doing most of the work done by myself. I'll try to improve to handle this kind of work single-handedly.
What challenges did you encounter, and how did you overcome them?I did encounter my html body only taking half of the height and I got to google how to fix it. Only then, I was able to start with the flexbox.
What specific areas of your project would you like help with?I would like to ask seniors for feedbacks. My code is a mess as it seems to be. So... How can I make it better overall? I appreciate it, thanks.
@ArryBlackPosted 8 months agoHi @mkhantk, great job! The code seems good. You can try making the wrapper div into a main tag for more semantic markup.
Marked as helpful0 - @LorenzoSerra1Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I realize that I'm getting better at running and writing code in terms of speed
What challenges did you encounter, and how did you overcome them?The biggest challenge was finishing the project by perfecting the details
What specific areas of your project would you like help with?I would like to improve on the latest revisions of the project, to understand if my work is valid or not
@ArryBlackPosted 8 months agoLayout looks great.
- One issue I notice is that the card starts to overflow on smaller screens (starting around 396px and below). Instead of setting the width of the card a fixed rem value, you should opt for a percentage value, setting in max and min-width values based on your preference. That is the only thing you need to change to make this layout responsive, no media queries necessary. For reference, I set a width of 30% for my card. I set min-width:256px (80% of 320px), which is the smallest screen size to optimize for. You can set the max-width based on your preference.
- The fonts on your buttons don't match with the given design, although they look good.
- You can make your markup more semantic, maybe add the card into a main tag.
Btw, I solved the same challenge recently, any feedback on it will be appreciated, thank you!
Marked as helpful1 - @MtrxxoSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I would really appreciate it if you all could help me view the page and give me feedbacks.
What challenges did you encounter, and how did you overcome them?I encountered a challenge with the sizing of the section.
@ArryBlackPosted 8 months agoHi Ibrahim, great work on the layout. I've a few suggestions.
- Although the card looks good already, you can reduce it's width a little bit.
- Instead of using border tags to achieve the shadow, you can just add a box-shadow property. You can read more about it here.
- You can use the :hover pseudo class to add the 'active-state' required in the design, by making changes to the box-shadow property mentioned in the previous step.
- Maybe increase the vertical padding of your card, a tad-bit.
Marked as helpful1 - @evsta24Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I am proud, that I used element box-shadow and object-fit in css file.
@ArryBlackPosted 8 months agoLooks great, you can try adding a transition property for the box-shadow. Maybe 300ms.
1
