@0GeNN0
Submitted
This is my E-Commerce challenge and I hope to discover it also any feedback will be appreciated
Looking to hire developers?
@nikoescobal
@0GeNN0
Submitted
This is my E-Commerce challenge and I hope to discover it also any feedback will be appreciated
@nikoescobal
Posted
Hello Omar! 👋
Congratulations on finishing your challenge! 🎉 Amazing job! Looks really close to the original!
Here's some feedback/suggestions on this solution:
I hope this is helpful and all the best with your coding journey!
Marked as helpful
@JulienK94
Submitted
ALL FEEDBACK IS WELCOME
@nikoescobal
Posted
Hello Julien! 👋
Congratulations on finishing your challenge! 🎉 Unfortunately, you haven't properly gotten the site deployed, as you have a 404 error.
Here's some feedback/suggestions on approaching this solution:
I hope this is helpful and all the best with your coding journey!
Marked as helpful
@dvbenthem
Submitted
Hello Coders,
This is already my third design and this one was challenging but I had a lot of fun coding it.
What is the best way to approach the design? Is the best way mobile first or desktop first? I know that people now a days use their mobiles phones the most, so i would say, mobile first. But i find it harder to begin with mobile first.
In my css style.css at the bottom of al my code i have the code for de screen-size of 375px.
Is that good practice to put it beneath my code or is it better to make a new file, name it screen-size-small.css and link it in the head of the html document like <link rel="stylesheet href="screen-size-small.css">
?
I am also struggling what to use to make a layout, flexbox or grid. First i started with flexbox but i ran into some problems that the left and right side of the card where not excatly the same size. And also when resizing with flexbox the image got squeezed instead of scaling down. Then i tried css grid that worked alot easier. When do you use flexbox or grid or is that just your own preference?
I would like to get some feedback. :)
Thanks in advance,
Danny
@nikoescobal
Posted
Hello Danny! 👋
Congratulations on finishing your challenge! 🎉
One lesson that really stuck with me, which I got from Kevin Powell, is that the web is responsive by default, meaning that any time you build a project, as long as you don't mess with negative margins or absolute positioning, your content is by default, responsive. That said, it makes so much more sense to go with a mobile-first approach, then meaning all your CSS classes should apply to the mobile viewport first, after which you then add media queries to manage the other screen sizes. Doing it this way also makes it easier to scale and adjust in the future, even if you will add changes to your layout.
As for using flexbox vs grid, it's best to practice both. For anything that has to do with tables, you should use the grid approach, whereas flex can be used to manage layouts that are simpler. Given that you ran into the difficulty of trying to make the columns the same size, the only solution is to use grid-template-columns with the fractional (fr) value, which guarantees they will always be the same size. An example of this looks like this grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));;
Try giving it a shot -- the best way to learn is by practicing and applying new things little by little.
Here's some other feedback on this solution:
I hope this is helpful and all the best with your coding journey!
Marked as helpful
@AgusSaMac
Submitted
This is the first challenge I work in, any feedback would be welcomed.
@nikoescobal
Posted
Hello there! 👋
Congratulations on finishing your challenge! 🎉
Here's some feedback on this solution:
I hope this is helpful and all the best with your coding journey!
Marked as helpful
@binthroot
Submitted
Built with tailwindcss. Mobile first. The mobile and tablet screens look fine but desktop could use revision. Would love to hear from anyone who was more successful so I can revise.
@nikoescobal
Posted
Hello there! 👋
Congratulations on finishing your challenge! 🎉 Feel free to check out my project here, and the source code here
Here's some other feedback on this solution:
I hope this is helpful and all the best with your coding journey!
Marked as helpful
@aryandogra2003
Submitted
Hello guys
I am having trouble making this page responsive . Need some suggestions to make it responsive
@nikoescobal
Posted
Hello there! 👋
Congratulations on finishing your challenge! 🎉
Here's some other feedback on this solution:
I hope this is helpful and all the best with your coding journey!
Marked as helpful
@master8848
Submitted
I could not impliment those cuts in between counter how could have I done it.
@nikoescobal
Posted
Hello there! 👋
Congratulations on finishing your challenge! 🎉
To answer your question, there are multiple ways to approach this. One way you could use is to create black circles that have the same color as the outside, then adjust the positioning using margin to create that "cut effect."
Here's some other feedback on this solution:
I hope this is helpful and all the best with your coding journey!
@Khemmie-Ray
Submitted
Is the use of negative margin bad practice? What are the best alternatives to that?
@nikoescobal
Posted
Hello there! 👋
Congratulations on finishing your challenge! 🎉
I think using negative margins is completely fine, although it should only be used when necessary. The alternative is to use absolute positioning -- keep in mind that if you do use absolute positioning, the parent container must have a position relative applied to it.
Here's some other feedback on this solution:
I hope this is helpful and all the best with your coding journey!
Marked as helpful
@Sahitya2006
Submitted
Order summary component card HTML AND CSS #Likes and comments welcome
@nikoescobal
Posted
Hello there! 👋
Congratulations on finishing your challenge! 🎉
I have some feedback on this solution:
I hope this is helpful and best of luck with your coding journey!
Marked as helpful
@Yglove11
Submitted
First time with everything - from writing a code from scratch, to setting up a github and publishing. I found it difficult to decide my starting point, went in circles and wanted to jump back and forth between writing a single html line and jumping to css right away. And wanting to get it perfectly right the first time. Eventually, my goal changed to just completing it. I made it more complicated than it was.
I'm unsure on the sizing, feel like I need A LOT more practice with the sizing and desktop vs mobile flexibilities and thought it would come a little more naturally. Can the code be simpler?
@nikoescobal
Posted
Hey! Good effort, but it seems like your project isn't compiling. The live link is broken. Do update it so that the community can provide feedback on your solution! Also, other than GitHub Pages, I suggest try exploring Netlify -- it's fairly straightforward to deploy projects from there. All you need to do is import the file then deploy.
Marked as helpful
@milinbhade1214
Submitted
Please give your valuable suggestions.
I was unable to give tint to the image, so please suggest the hint
@nikoescobal
Posted
Hey there! Great job with this first try. This video was helpful for me - https://www.youtube.com/watch?v=uLvhAJfx3T0&t=3s
Also, you seem to have too much letter-spacing for some of your text. It also looks like you haven't made this fully responsive. I'd recommend starting with mobile-first. You'll have to spend some time to grasp the fundamentals of flex-box and grid to be able, but the good thing is that this will definitely get better with more practice. I recommend checking out Kevin Powell's videos - he has tons of content on responsive layouts, and many of them are pretty short! All the best with improving!