@Swati7819Submitted 5 months ago
P
Arnold Limberg
@CreativeLogicAll comments
- @CreativeLogicPosted 5 months ago
Hi. Good Job. One thing I think would improve the project is that it shows some advice on load, so you can include a document.addEventListener('DOMContentLoaded', getAdvice); or similar statement that calls a get advice function right away when a user loads the page instead of loading an empty state.
Marked as helpful1 - @Si1entERASubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
The completion of the project.
What challenges did you encounter, and how did you overcome them?I struggled with the validation since I was using regular expressions and even though I'm satisfied with the results, it can always be improved.
What specific areas of your project would you like help with?All feedback is welcomed.
@CreativeLogicPosted 5 months agoHi. Good job. An improvement could be adding a success state with the traditional green outline on the input when the user has typed a valid email.
1 - @roidzuhSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I am proud that I successfully completed this challenge, as it pushed me to expand my skills and overcome obstacles along the way.
What challenges did you encounter, and how did you overcome them?Creating a responsive design with Tailwind CSS.
What specific areas of your project would you like help with?any feedback
@CreativeLogicPosted 5 months agoHi. Nice job. I'm about to finish this challenge myself. One minor detail you can improve is that on the success screen show the user email that was entered instead of the placeholder.
Marked as helpful1 - @Vanillatte68Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?
this time i tried using react framework to build this. i learn how to fetch an API and using react hooks to render the data. i can't get the page look as close to the design like usual but i'm proud i can make it responsive.
there are some hurdle i need to overcome as to be fair my understanding in react is quite low, but i'm would like use react framework in more challenges in the future.
What challenges did you encounter, and how did you overcome them?when i read the challenge i thought i'm going to use
What specific areas of your project would you like help with?math.random()to randomize the advice, but at first i didn't know where to put it. after some time i decided to make another fetch function for handling the button and usemath.random()to randomize the id instead.since i can't get my solution as close to the design, i would like to ask for help with the button placement and how do you keep it "anchored" to the card's border.
and also this is the first time i use react framework for a challenge like this, feel free to review my live site and code and tell me your feedback.
@CreativeLogicPosted 5 months agoHi. I just did this challenge myself. To get the button centered there is a trick using absolute and relative positioning.
The way I tackled it was like so: I made a div container and put the button icon inside it. I built this container to resemble the actual button. To center the container, you make it position: absolute and anchor it to the card by making the card position: relative.
Then you set the button container to left: 0, right: 0 and margin: auto. The combination of these properties centers it. Then I made the container flex to use the centering properties on the icon to center the dice icon within the container.
Marked as helpful0 - @ify47Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?
N/A
What challenges did you encounter, and how did you overcome them?N/A
What specific areas of your project would you like help with?N/A
- @GD-neoSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
- This was the first time I have ever worked with CSS Grid and I am really pleased with the result. I also managed to combine Flex Property with the Grid set up, so below 1200px I have a flex set up and above that it changes to the grid as specified.
- As mentioned above this was the first time I worked with grid, so I had to look up the correlating properties regularly. This was also my first Junior challenge and a decent step up from the challenges I completed so for.
- Any suggestions related to my approach, readability and structure or any other aspects you see that I could approve on or think I might be better of doing in the future are welcome. :D Thaks
@CreativeLogicPosted 6 months agoOverall, great job. If you want to be closer to perfection you can notice in the design where text breaks and in your design add some margin to the text block or max-width to control how text breaks. Take a look at Patrick's card and where the bottom text breaks.
0 - @yoyov51234Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of using the BEM . I learned minmax for grid, but haven't got a closer look at the grid basics... will submit the solution again after get more concepts of the responsive grid
What challenges did you encounter, and how did you overcome them?Learned to use BEM
What specific areas of your project would you like help with?Responsive page using grid.
Any suggestion is appreciated!
@CreativeLogicPosted 6 months agoHi. Good Job. The typography needs a bit of work regarding line-height, font-sizes, and more to make them fit their card containers. The design calls for the card to be about the size of the content. For responsiveness, I tackled this challenge recently using grid-template-areas. This is simpler and more intuitive to use than having to deal with grid line numbers. In your current solution, if you open it up and slowly shrink your browser window, there is a point where the cards are being squished too much before switching to the next media query. The solution is to either adjust the media query so that it switches before it gets squished, or to set a minimum width on the cards in your template-columns using minmax appropriately. You can use your browser dev tools to get the sizes.
You can do something like
@ media (desktop) { 'c-1 c-1 c-2 c-3' 'c-3 c-5 c-5 c-3' }
@ media (tablets) { Here, I did a two column solution) 'c-1 c-1 'c-2 c-4' 'c-3 c-3' 'c-5 c-5' }
And for mobile I did the typical one column solution: @ media (mobile) {
'c-1' 'c-2' 'c-3' 'c-4' 'c-5' }
You can see my solution on my page.
Marked as helpful0 - @gabrieltrtlSubmitted 6 months ago@CreativeLogicPosted 6 months ago
Hello. Good job. I recommend lowering the font weights for your H2 elements. Also, typically for tablets, we make a 2-column solution as a transition into mobile to effectively use more of the screen real estate. Take a look at my solution to see how I did it.
0 - @jaojogadezSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Consegui centralizar os quatro cards
What challenges did you encounter, and how did you overcome them?O posicionamento dos cards, apenas precisei da propriedade "position" e flexbox
What specific areas of your project would you like help with?Qualquer feedback é bem vindo
@CreativeLogicPosted 6 months agoHi. You got the overall layout correct, but it needs work with the sizing of components and spacing. You can start by either centering everything using Flexbox or bringing everything down with added padding up top.
0 - @vitorianfonsecaSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
Responsiveness
What challenges did you encounter, and how did you overcome them?Changing images from desktop to mobile with media query.
What specific areas of your project would you like help with?None :)
@CreativeLogicPosted 6 months agoYour background color for the right side should be white.
Marked as helpful1 - @TakstanSubmitted 6 months agoWhat challenges did you encounter, and how did you overcome them?
The mobile responsiveness. I've encountered it on my first challenge creating the QR code and it isn't mobile responsive. So, I studied it, and in this challenge the blog post I used it. It's now mobile responsive.
What specific areas of your project would you like help with?Hey guys feel free to check my code. and please be honest about the things that I can improve better. Thanks for checking and helping me to be a better developer.
@CreativeLogicPosted 6 months agoHi. Good job. You can add more padding on top for the desktop version to bring it down a bit more, like the design. Also for mobile, what I did was bring the card all the way to the top with Flexbox and use less padding to bring it down again. On mobile, the design calls for the card to be a bit higher up than desktop, so the user doesn't have to scroll as much to see the content.
Marked as helpful0 - @R3ygoskiSubmitted 7 months ago@CreativeLogicPosted 6 months ago
Hi. Great job. However, the design called for different prices. You seem to have an extra 9 for each price. May I ask, why do you like SASS so much? I recently learned native CSS has nesting. Is there a justification to learn SASS for some more minor features?
1
