Skip to content
OverviewSolutions
18
Comments
10

Abdallah Hamada

@AbdullahHamadaxEgypt340 points

Hi! 👋 I'm Abdallah (or Abdullah). I'm just a person with a big passion & love for coding, I'm currently trying to become a fully-fledged full-stack web developer. Feel free to criticize my projects ( I'm open to improvements! )

I’m currently learning...

🔸 HTML 🎨 CSS 🔹 TailwindCSS

Latest solutions

View more solutions

Latest comments

  • Namaste AR•100
    @mrankitwithcodeSubmitted 10 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•340
    @AbdullahHamadaxPosted 10 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 10 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

    #react#tailwind-css
    1
    Abdallah Hamada•340
    @AbdullahHamadaxPosted 10 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•420
    @Miki0035Submitted 10 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

    #react#vite#typescript
    1
    Abdallah Hamada•340
    @AbdullahHamadaxPosted 10 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•340
    @AbdullahHamadaxPosted 10 months ago

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

    Marked as helpful
    0
  • Gilbert Koomson•350
    @Gilbert-KoomSubmitted 10 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

    #sass/scss
    2
    Abdallah Hamada•340
    @AbdullahHamadaxPosted 10 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 10 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•340
    @AbdullahHamadaxPosted 10 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
View more comments