Skip to content
OverviewSolutions
17
Comments
10
Abdallah Hamada
@AbdullahHamadax

All comments

  • Namaste AR•100
    @mrankitwithcodeSubmitted 6 months ago
    What specific areas of your project would you like help with?

    Responsiveness is the area where i lack and please help me out with svg elements because during responsiveness its break down my patience in several way. And can u clarify that site is responsive or not because when i look into developer tools some time it works sometime it doesn't , so it will be helpful if u guys can understand and suggest the necessary requirement i need to do .

    (THANK U FOR UNDERSTANDING MY QUERY AND RESPONDING TO IT)

    Order Summary Preview

    1
    Abdallah Hamada•320
    @AbdullahHamadaxPosted 6 months ago

    Your website is responsive, it just lacks the correct width and height, the pattern image in the background, the font and exact colors, lastly a drop shadow. You should always make websites on mobile screens first then change it to desktop! Also please make sure the image is taking the full width of the card ( width:100% )

    Marked as helpful
    0
  • TPAIN22•390
    @TPAIN22Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    am proud because am leaning more about react and tailwind css

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

    the most challenging thing was to know the spaces between elements and get it right on tailwind

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

    riley need help with the grid box

    meet landing page

    1
    Abdallah Hamada•320
    @AbdullahHamadaxPosted 6 months ago

    Congrats on finishing the challenge! Just decrease the opacity of the picture in the experience more together like in the desired design. And keep an eye for grammar mistakes like Groub instead of Group

    0
  • Mikiyas Kebede•360
    @Miki0035Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud to finish this project, it challenged me a lot and help me understand more features

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

    The challenges I encountered are mostly CSS styling , trying to place elements exactly as the design specifications was a challenge , I managed to solve it using online documentation and a lot of trail and error. And being able to display credit card information in the specified format was challenging , luckily I found a good stack overflow answer for this problem and managed to solve it

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

    I would like to know a better CSS code for the card image elements than what I have used. If some can help in making it responsive without adding a lot of code that would be a real help

    Responsive credit card detail page with interactivity features

    1
    Abdallah Hamada•320
    @AbdullahHamadaxPosted 6 months ago

    Great solution, just make the two cards outside a bit more as in the desired design, it'll make the page look better!

    Marked as helpful
    0
  • Abdallah Hamada•320
    @AbdullahHamadaxPosted 6 months ago

    Neat solution! Just missing the exact width and height and you're good to go.

    Marked as helpful
    0
  • Gilbert Koomson•260
    @Gilbert-KoomSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I love the fact that i have implement css flexbox layout but next time would like to try grid layout.

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

    At first i couldn't make the container grow based on the items in it , so i read css flexbox from css tricks and found the amazing features of flex by just just setting the display of the container to flex.

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

    I would like to know how to use the figma design files

    Blog preview card component

    2
    Abdallah Hamada•320
    @AbdullahHamadaxPosted 6 months ago

    Congrats on completing the challenge ❤️.

    To answer your question regarding the figma design files:

    1. Download the design file and open Figma's website.
    2. Make sure to extract the file.
    3. You'll find import at the top right, click on it and select the folder that you extracted and choose the file with .fig
    4. You'll see the project appear in Figma's page.
    5. When you open it, you can click on the card and look at the right, you'll find w which is width and h which is height
    0
  • Riska997•110
    @Riska997Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of completing the project and achieving the desired outcome. However, next time, I aim to conduct more research on different layout methods beyond flexbox and grid. Exploring alternative approaches will allow me to compare their strengths and weaknesses, enabling me to make more informed decisions in future projects.

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

    One of the main challenges I faced was achieving the desired layout. Despite encountering some difficulties, I persevered and managed to create a layout that, while not exactly as I envisioned, still met my expectations. I'm satisfied with the outcome, considering the obstacles I encountered along the way.

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

    I'm currently seeking assistance with the CSS layout of my project. Specifically, I'm struggling with centering elements within a container using Flexbox. Despite my efforts, I haven't been able to achieve the desired alignment. Any guidance or suggestions on how to properly centre elements would be greatly appreciated. And any other feedback is welcome.

    Blog preview card main using HTML5, grid layout and flexbox

    3
    Abdallah Hamada•320
    @AbdullahHamadaxPosted 6 months ago

    Congrats on completing the challenge ❤️.

    However, there are a few things you need to consider:

    1. The card's shadow is overexaggerated, keep it minimal like in the desired design.
    2. You've mentioned grid layout in the solution's title, I don't see anything related to grid in the code. If you had plans doing this project with grid, it's not needed at all. Google grid css designs and you'll know which designs would actually require grid.
    3. Lastly, the card itself isn't perfectly centered, so have a look at your code and see why it isn't. ( Hint : it's the width and height you gave to the container, alongside the 100px padding )
    Marked as helpful
    1
  • Abdallah Hamada•320
    @AbdullahHamadaxPosted 6 months ago

    Awesome! almost pixel perfect, just make sure to follow the given fonts in the style-guide.md

    Marked as helpful
    1
  • surpoxia•120
    @surpoxiaSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I think I came pretty close. I don't know if all the colors are correct, because I didn't see all of the ones mentioned in the style-guide actually being applied on the MockUp. I don't think I had to use the two blue colors once. But I had to color pick and then add another even darker cyan. that wasn't even mentioned in the style guide, for the active effect on the button.

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

    The Media Query stuff was a bit tricky at first, but it was pretty cool to figurte out how to make one image appear and the other one dissapear. For the mobile screen version I had to adjust the margin between the text elements in order to look like the MockUp. Maybe there is a better way, by applying flex to the divs, but I don't know.

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

    If you find any flaws or mistakes or know any better ways to code, let me know.

    Product Preview Card Component (Responsive)

    1
    Abdallah Hamada•320
    @AbdullahHamadaxPosted 6 months ago

    Very impressive, it's almost pixel perfect. Just change the paragraph and price color to ** --Dark_Grayish_Blue: hsl(228, 12%, 48%);**

    Marked as helpful
    0
  • Koda👹•3,830
    @kodan96Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Made with:

    • HTML 🦴
    • SCSS 🎨
    • JS 🤖
    • mobile-first workflow 📲
    What challenges did you encounter, and how did you overcome them?

    Just did a quick challenge after learning SCSS.

    Product Preview Component ⭐⭐ w/HMTL, SCSS

    2
    Abdallah Hamada•320
    @AbdullahHamadaxPosted 6 months ago

    A piece of cake for you, let me guess? 🔥🔥

    I think you forgot to add hover state tho xD

    1
  • royal334•200
    @royal334Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I was proud of when i was able to center a div.

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

    how to center a div and i googled it

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

    nowhere really

    QR code project

    1
    Abdallah Hamada•320
    @AbdullahHamadaxPosted 7 months ago

    Awesome!, I have one suggestion tho, I think you should learn "Flexbox", it's one of the most important CSS topics you should know, It's used more than position: absolute, etc. You might struggle with it in the beginning but the more you practice the better you'll get.

    1