Skip to content
OverviewSolutions
20
Comments
25
Guerinik Abderrahmane
@AbderrahmaneGuerinik

All comments

  • Undertesting21•10
    @Undertesting21Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of how the QR Code Component looks on different screen sizes. Using Flexbox and CSS Grid made it easy to create a responsive design that works well on both mobile and desktop devices. Next time, I would explore using CSS custom properties to manage colors and spacing more effectively for better maintainability.

    What challenges did you encounter, and how did you overcome them?

    One of the main challenges was ensuring the component stayed centered on all screen sizes. Initially, I struggled with alignment issues, but I overcame this by utilizing CSS Grid's centering properties. Additionally, setting up Git and pushing the project to GitHub was a bit tricky, but following detailed guides helped me get everything configured correctly.

    What specific areas of your project would you like help with?

    I'd appreciate feedback on the responsiveness of the component. Specifically, I'm curious if there are more efficient ways to handle the layout adjustments for different screen sizes. Any tips on optimizing the CSS for better performance would also be highly valuable.

    Responsive QR Code Component using Flexbox and CSS Grid

    2
    Guerinik Abderrahmane•480
    @AbderrahmaneGuerinikPosted 5 months ago

    Hey, you did well in general but there is some details that you can improve :

    • add margin bottom and border radius to the image
    img {
   border-radius: 20px;
   margin-bottom: 1.5rem;  
  }

    For responsivity of the container div you can do this :

    .attribution {
  width: min(95%, 350px)
  }
    0
  • ericli18•70
    @ericli18Submitted 9 months ago

    The design doesn't work on iOS, and it's hard to figure out why

    New landing page

    2
    Guerinik Abderrahmane•480
    @AbderrahmaneGuerinikPosted 9 months ago

    Hey @ericli18 ! If it doesn't work for ios (Siri browser) you should probably verify if the properties you used are supported by siri, you can do that here.

    0
  • Irwing•200
    @Irwing-DevSubmitted 9 months ago

    Well, this challenge was really cool for me, I reviewed old concepts that I had already forgotten and learned other very useful concepts that I never used, but that improve my work a lot. I discovered features of the tools I use that I had never used before and I didn't even understand how to use, but now, in practice, I was able to make good use of them. I still have a lot to improve, but I'm going to make an effort to get back to doing these challenges more often.

    E-commerce product page with ReactJS, TailwindCSS and TypeScript

    1
    Guerinik Abderrahmane•480
    @AbderrahmaneGuerinikPosted 9 months ago

    hey Irwing! 👋

    I liked the carousel (the animation when you change an image), what library you've used ?

    1
  • Ynotlocin1•80
    @Ynotlocin1Submitted 10 months ago

    Hello! On this project, I encountered an issue with the image. I used 'display: block, width: 100%, object-fit: cover' on the image, but when switching from mobile to desktop format, the image does not fill the div. Additionally, I had another question: for code readability, is it better to use as many .class and .id as possible, or is the goal to use as few as possible? Thanks in advance!

    Stats preview card, problem with the image width !

    3
    Guerinik Abderrahmane•480
    @AbderrahmaneGuerinikPosted 10 months ago

    Hey @Ynotlocin1! For the image issue try : width: 100%.

    for your question about class and id , usually for styling developers use classes, id's are often used with JS.

    0
  • salmonkarp•260
    @salmonkarpSubmitted 10 months ago

    i may have used too many flexboxes... was there any other way to achieve the very flexible divs required?

    Responsive News Homepage

    1
    Guerinik Abderrahmane•480
    @AbderrahmaneGuerinikPosted 10 months ago

    Hey @salmonkarp, your page looks good, to answer your question about flex you could use Grid instead to avoid a lot of flex divs. I hope this would help you.

    0
  • Kamran Kiani•1,280
    @kaamiikSubmitted 10 months ago

    • I want to know is it better to use media query with min-width or max-width ?

    • my plus and minus icon position is good for desktop and mobile screen size but it does not work in the middle. I mean between these two sizes. what can i do to make it responsive for all sizes? shall i use js instead of ::label pseudo classes?

    • If you see any other problem or have any suggestion please tell me. thanks.

    FAQ accordion

    1
    Guerinik Abderrahmane•480
    @AbderrahmaneGuerinikPosted 10 months ago

    Hey kamran ! Pretty nice component and close to the design good job,
    for your first question there is no difference between using max-width and min-width in media queries, it depends on your working strategy (mobile first approach or desktop first), in mobile first approach you'ill often use min-width and for desktop first approach you'll use max-width.

    2- for minus and plus i suggest you use two images, in intial state the image with plus has display: none, and on click you should make the other image display: none , and reset the display of the minus image, you can do that using js or if you're using react just use conditional rendering, Btw i recommend you use <button> tag instead of span for more accessibility.

    I hope this would help you! 😊

    Marked as helpful
    0
  • Guerinik Abderrahmane•480
    @AbderrahmaneGuerinikPosted about 1 year ago

    Nice work !

    For using grid is pretty easy here is the code :

       main {
     display: grid;
     grid-template-column: repeat(3, 1fr);
   }
    • btw i recommend using rem unit instead of px

    Hope this will help you !😉

    4
  • Guerinik Abderrahmane•480
    @AbderrahmaneGuerinikPosted about 1 year ago

    Hey👋 it's great you finished this project ! but you can improve your work :

    • in desktop devices the image should be in the right side and the text part in the left, for this you can just do the following :
    @media (min-width: 1170px) { 
main {
       display: flex;
       flex-direction: row-reverse;
    }
}

    or change the order of the flex items using order property in css

    • you should consider more the margins, spacing, font-weight, text-align specially in desktop devices

    I wish this would help you😉, Keep it up ! and enjoy coding

    0
  • Guerinik Abderrahmane•480
    @AbderrahmaneGuerinikPosted about 1 year ago

    Hello 👋 You're doing well but you can improve this points :

    • The image is not showing for mobile devices and that's because you are defining the flex-basis of .card-img to 35%, that will not not work because pourcentage height works only if you give a fixed size to the parent element which is not the case here so you have to explicitly define the height of the parent (.card-box).
    • you should also change the font-weight of text to match more the design.

    I hope this would help you 😃

    Keep it up and enjoy coding

    Marked as helpful
    0
  • ShinobiKoda•460
    @ShinobiKodaSubmitted about 1 year ago

    I had problem with the mobile Design and making the website responsive

    Using flexbox

    1
    Guerinik Abderrahmane•480
    @AbderrahmaneGuerinikPosted about 1 year ago

    Hey nice component👋 You can improve your work by :

    • using rem unit instead of px for resistivity aspect, I suggest you search some documentations about CSS units and the best ones to use in different cases.

    • Try the mobile first approach its possible that you would be more comfortable with this approach.

    • I suggest also to search more about BEM methodologie for naming classes in CSS

    • Keep it up and Enjoy coding😉

    Marked as helpful
    1
  • Guerinik Abderrahmane•480
    @AbderrahmaneGuerinikPosted about 1 year ago

    Hey👋 Nice work ! but you can improve it

    • You should use more semantic HTML like section, main instead of div of class main.
    • Use rem unit instead of px for more maintainability and for responsive purposes
    • and Also the images in the background are not positioned perfectly like in the design, i've just finished the project and i also struggled width keeping this background images positioned in the right way and stay responsive 😥

    Good Luck and Enjoy coding 😃

    Marked as helpful
    1
  • daniel-howorth•130
    @daniel-howorthSubmitted about 1 year ago

    Help! How can I improve the responsiveness of my app?

    I used relative units so that elements would respond to changes in screen size but they don't seem to shrink. What properties and values should I use to make my app responsive?

    Any other feedback welcome :)

    Custom Validation with JavaScript

    2
    Guerinik Abderrahmane•480
    @AbderrahmaneGuerinikPosted about 1 year ago

    Congrats for finishing the project ! For responsive aspect i wouldn't recommend using % unit but rem instead % unit can be very small or very big in some cases .

    Enjoy coding!

    Marked as helpful
    1