@dharul619Submitted about 2 months ago
Latest solutions
4-card feature using HTML, CSS, Bootstrap
#bootstrapSubmitted about 2 months agoFor the desktop layout, since I have used Bootstrap, i wonder if there is any effect that prevent the container to reach the desired layout.
Time-tracking Dashboard using Tailwind CSS, jQuery & JS
#tailwind-css#jquerySubmitted about 2 months agoI need help to understand why I couldn't use Tailwind CSS theme and other utilities. I had to use CSS alongside Tailwind CSS (:root instead of @theme). Also, I couldn't get the Desktop layout well, try multiple approach. There is a possibility that there is an existing CSS that is creating a side-effect to prevent the layout to turn out as expected, but i need help on that. Thanks.
Newsletter sign-up form with JS and JQuery
#jquerySubmitted 2 months agoI was able to style the success msg but unable to put the relevant spacing on the button in the mobile layout and move the image on the desktop layout. I have tried using position relative, without success.
Article Preview Component with HTML, CSS and JS
Submitted 7 months agoI was able to use the button share for the social media to appear and disappear. But for the mobile layout, I cannot seem to make the button appear through the image so that i can click it back. As for the desktop layout, I don't know how to make the border similar.
Product Preview Card using HTML, CSS, FlexBox, Grid and Media Query
Submitted 8 months agoI still have some difficulty with the margin in the desktop layout. And even with the use of flexbox, it is not aligned properly when the screen gradually decrease. I tried using justify-content, align-items, align-content, align-self without success.
Latest comments
- @YarAllyMehrinePosted about 2 months ago
Hello @dharul619, You did a great job with this project. Here's some improvements you can do to your code for future use:
line 32- grid-template-columns: repeat(4 1fr);It is easier to create multiples columns and rows that way.line 184- grid-column: span 2;Using span instead of column-start and column-end.Hope this was helpful. Happy coding!
0 - P@leonardoalmeida7Submitted about 2 months ago@YarAllyMehrinePosted about 2 months ago
Hello @leonardoalmeida7, I have been struggling with using Bootstrap with this project and you help me understood how to properly use it so thank you.
Happy coding!
Marked as helpful0 - @herdhebayorSubmitted over 1 year ago@YarAllyMehrinePosted about 2 months ago
Hello @herdhebayor, I look over at your code and it is great, pretty similar too. Here is some tips if you may:
- Try to reduce the padding
- Also if you want to have to type less code, use more JavaScript. For instance, you could fetch the data in data.json so you have an array with all the titles, and hours... Then you could use a map function and innerHTML to render all the containers (work, play...).
Hope this is helpful. Happy coding!
Marked as helpful0 - @Abu-HaneefahSubmitted almost 2 years ago@YarAllyMehrinePosted 2 months ago
Hello Abu, Your code works fine for email sign-up, but you seem to be having an issue with the layout. I would advise you to use flexbox as it is very useful to center your work without much code. Here is a source to learn flexbox: (https://csstricks.com/snippets/css/a-guide-to-flexbox/)
Also, use box-sizing to start to work on a mobile workflow ( * {box-sizing:border-box, margin:0, padding:0} ) This will reduce the default margin and padding in mobile layout.
I hope this will help. Happy coding!
0 - @marcfrancissSubmitted 7 months ago@YarAllyMehrinePosted 7 months ago
Hello, Well done on the challenge.
Nice coding!
Marked as helpful1 - @FeyisholadesignsSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of how I was able to do it in a day, I learnt a lot too
What challenges did you encounter, and how did you overcome them?I didn't encounter any challenges
What specific areas of your project would you like help with?none
@YarAllyMehrinePosted 8 months agoHi, As you said, you did a great job with this project. I just have some suggestions on how you could improve your code:
- Instead of using px, try to use relative units such as rem/em
- Margin and padding should be bigger -To achieve the bold looking character, use font-weight (the size is provided in style-guide)
- For the <hr> tag, try this code
hr {background-color: ...; border: 0; height: 1px;}
Hope these suggestions will be helpful. Happy coding!
Marked as helpful0
