Skip to content
OverviewSolutions
38
Comments
38
ِAhmed
@Axsel519

All comments

  • Ajibuwa79•30
    @Ajibuwa79
    What are you most proud of, and what would you do differently next time?

    I'm not really pround of anything yet because it took me way too long to design. Still a work in progress and i'm loving the challenges that comes with learning and i strongly believe with time, i will be able to do something better.

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

    I Had allot of challenges with giving value to some properties of which even now, i still believe there allot corrections in my work but i was able to find arround some of the problems.

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

    I need help with pointing out details i miss out on during the designs.

    Responsive landing page using flex display to column and positioning.

    1
    ِAhmed•840
    @Axsel519

    you can make this in center and use max-width

  • leann1109•20
    @leann1109
    What are you most proud of, and what would you do differently next time?

    I think I got it pretty close to the design.

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

    Doing mobile first is harder for me than doing it web first. I found that I had to re-do and go back to some css stylings I have already done to fix it.

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

    How can I make this more optimize in terms of repeating less code? What did I do that were not the best practice?

    Mobile first Mortgage Payment Calculator using Flexbox

    #react#typescript#pure-css
    1
    ِAhmed•840
    @Axsel519

    Always look for the best path for you and to reduce the code, link all elements with similar properties in one line

  • Kaizenn•120
    @Kaizenn
    What are you most proud of, and what would you do differently next time?

    Next time, I would like to make the HTML more readable by writing semantic CSS classes, for example: .qs-code-block .qr-code-block__title .qr-code-block__description ...

    Then, use Tailwind's modularity to define these classes:

    .qr-code-block__title { @apply text-lg font-bold text-primary mb-2; }

    Frontend Mentor - QR Code Challenge 01

    1
    ِAhmed•840
    @Axsel519

    Great

  • Damaris Barajas•10
    @DamarisMB
    What are you most proud of, and what would you do differently next time?

    I’m proud of successfully implementing a clean and responsive design that closely matches the given challenge. I ensured the layout was well-structured using semantic HTML and CSS, and I’m especially happy with how I used flexbox/grid to center the QR code properly.

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

    One challenge I faced was centering the QR code container properly on the page. Initially, I struggled with making it responsive while keeping it perfectly aligned. I overcame this by using flexbox and ensuring that both the body and container had the correct height and alignment properties.

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

    Is my HTML and CSS well-organized and easy to maintain? Are there any areas where I could improve my class naming conventions or file structure?

    QR code

    1
    ِAhmed•840
    @Axsel519

    good work but you should change this

    .container { width: 90%; max-width: 900px; min-height: 60vh; /* background: #d0daeb; / delete display: flex ; justify-content: center; align-items: center; position: relative; / box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */ delete }

    Marked as helpful
  • Savion 👾•370
    @S4V10N
    What are you most proud of, and what would you do differently next time?

    i'm proud of my precise execution of the challenge

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

    none

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

    positioning and sizzing

    huddle-landing-page

    1
    ِAhmed•840
    @Axsel519

    great but you should use this in big screen { min-height: calc(100vh - 4rem); display: flex ; align-items: center; flex-direction: row; justify-content: space-evenly; }

    Marked as helpful
  • LETICIA SAMPAIO DE SOUZA•50
    @le-sampaio
    What are you most proud of, and what would you do differently next time?

    I'm most proud because i studied more about CSS and it really helped.

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

    I didn't have trouble doing this challenge.

    3-column-preview

    1
    ِAhmed•840
    @Axsel519

    good jop

  • ِAhmed•840
    @Axsel519

    good jop but you can use display flex to make card in center and use width and max-width

  • P
    Davy•320
    @DavyZane
    What are you most proud of, and what would you do differently next time?

    I've been focusing on the clarity of my code. Please let me know if I have anything to review in this regard.

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

    None, just reviewing the basics.

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

    Any advice is welcome. Especially on the clarity of my code for this challenge.

    results-summary-component-main

    1
    ِAhmed•840
    @Axsel519

    Great❤️

  • Josefina•30
    @Josefina-Mayans
    What are you most proud of, and what would you do differently next time?

    Handling the mobile first approach by using Tailwind CSS in a smart way is something I am proud of. Also, the use of clean React components.

    Next time, I would try some testing libraries just to practice TDD, and also try some other CSS approach like Styled Components or even libraries like Material UI.

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

    Probably the keyboard navigation was the most challenging since I had never done it, but I managed to overcome it with some help from my dear friend Google XD.

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

    When not on a 1440px or 375px screen viewport size, items such as the background header image appear in a strange way. Also, there is some problems with visualizing some icons in the Vercel deployment.

    If anyone has any comments, it would be much appreciated!

    Responsive FAQ Accordion component using React and Tailwind CSS

    #accessibility#react#tailwind-css#vite
    2
    ِAhmed•840
    @Axsel519

    good work but you need Ensure the correct path for each image.

    Marked as helpful
  • Alejandro Gispert•10
    @AlejandroGispert
    What are you most proud of, and what would you do differently next time?

    I am proud of the detail level. Maybe to have a figma design would be the ideal for next time.

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

    I set myself the challenge of doing the app without using context.Then i used useSearchParams, which lead to my app failing at the deployment at Netlify. The issue was finally fixed with the addition of the react/Suspense and wrapping the component on it, at the level of the entire component and not from inside the component/fragment.

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

    Best practices for responsiveness and use of all the media queries, responsiveness in a solid way from the start.

    use of css variables, media queries, and hsl colors

    #next#react
    1
    ِAhmed•840
    @Axsel519

    You can use an element and hide it and give it a command that after pressing the button this element is shown and the main element is hidden

    Marked as helpful
  • Natali 👻 Grimm•1,190
    @Grimm-N
    What are you most proud of, and what would you do differently next time?

    And once again, I’ve decided to change the color theme 😅

    I chose that option because, in real-time, customers often don’t know what color theme they want, and the webdev needs to figure it out on their own. So, it’s good practice for me.

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

    Fun in process, nothing else 😁

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

    As always - I'm open to any suggestions and feedback! Let's grow together ❤️

    Article Preview component (html, scss, js)

    #sass/scss
    2
    ِAhmed•840
    @Axsel519

    good work

  • halovii•110
    @halovii
    What challenges did you encounter, and how did you overcome them?

    I'm trying to learn how media queries and responsive web design work so I attempted the mobile version first, however I struggled to actually achieve the responsive design so instead I duplicated the folder and coded the web version separately. Hopefully in the future I'll overcome this and figure out how responsive design works!

    Mobile ver. Results Summary Component

    2
    ِAhmed•840
    @Axsel519

    Use of media query

    /* Extra small devices (phones, < 576px) / @media (max-width: 575px) { / Styles here */ }

    /* Small devices (landscape phones, 576px and up) / @media (min-width: 576px) and (max-width: 768px) { / Styles here */ }

    /* Medium devices (tablets, 769px and up) / @media (min-width: 769px) and (max-width: 991px) { / Styles here */ }

    /* Large devices (desktops, 992px and up) / @media (min-width: 992px) and (max-width: 1199px) { / Styles here */ }

    /* Extra large devices (large desktops, 1200px and up) / @media (min-width: 1200px) { / Styles here */ }

    Marked as helpful
  • rankobinu•70
    @rankobinu
    What are you most proud of, and what would you do differently next time?

    1- This is my first project that i made it all by myself and that something I'm proud of 2-What i will do differently is is to use more position in CSS

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

    -The only challenge was forgetting the html or css-comand. -I solve it by using Chat GPT and you Tube tutorials.

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

    I need help in how to position my box because i feel confused using command position or margin...

    ChatGPT, Google Fonts, Youtube, VS Code

    1
    ِAhmed•840
    @Axsel519

    .box { background-color: hsl(0, 0%, 100%); width: 285px; /* height: 34vw; */ margin: 10vh auto; border-radius: 15px; } remove height and

    add padding-bottom p { color: hsl(216, 15%, 48%); font-weight: 400; padding-right: 20px; padding-left: 20px; padding-bottom: 4vh; }

    Marked as helpful
  • ِAhmed•840
    @Axsel519

    Use the correct path to the image or upload the image with the site so that it appears

  • ِAhmed•840
    @Axsel519

    good work try next time use me Media Query

  • Natali 👻 Grimm•1,190
    @Grimm-N
    What are you most proud of, and what would you do differently next time?

    I utilized a JSON file for this project, making the NFT card super versatile and ready for any occasion! 🎉 Now it can be reused without breaking a sweat—talk about a card that works smarter, not harder! 😄 Who knew JSON could be so fabulous?

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

    Due to my limited experience, I found myself rewriting and tweaking the script for creating HTML `` several times. But hey, every misstep is just a step towards mastery! Now I have a much clearer understanding of how it all works—watch out world, I’m leveling up! 🚀

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

    I've been wondering whether :hover effects are really necessary for mobile devices, especially after finishing the project. It only hit me after completing everything, but I think next time I might avoid adding hover effects for the mobile version altogether. What do you think?

    Interactive NFT Card (html, LESS, .json, js, mobile-first workflow)

    #fetch#less
    1
    ِAhmed•840
    @Axsel519

    i think in hover better because it makes the user feel like they are interacting with the site. and good work

  • jvondungen•140
    @jvondungen
    What are you most proud of, and what would you do differently next time?

    I am proud that I was able to work through the HTML smoothly. I used ordered and unordered lists and a simple table. I am proud that I worked through difficulties getting the content to fit the container and that my final solution is pretty close to the design.

    My @media query seems to work and I was able to get that mostly how I wanted it on the first try.

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

    I had trouble getting the content to fit the container. I solved this by setting the font-size to 55%. I used 20% for the mobile version. Not sure this is best practice, but it did work.

    I also had trouble with sizing/spacing. I did not have the Figma files and realize how useful these are. Had to use trial and error, which takes much longer. I also had trouble getting the black background, with the lighter inner container. I was able to get this to work by adding an .outer-container outside the .card-container.

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

    Not sure if using the 50% font-size is the correct way to size this, so I'd love feedback on that. I appreciate any other feedback. Thanks so much!

    Recipe Card using HTML and CSS

    2
    ِAhmed•840
    @Axsel519

    use this body { background-color: var(--Stone100);}

    .card-container { display: flex; flex-direction: column; justify-content: start; align-items: left; background-color: white; width: 70vw; height: max-content; padding: 25px; border-radius: 15px; }

    Marked as helpful
  • Fauzi Hizbullah•120
    @fauzihiz
    What specific areas of your project would you like help with?

    somehow i have trouble positioning element the same way as design

    First Mobile Design Flex

    1
    ِAhmed•840
    @Axsel519

    You are good, keep going and everything will be fine. You just need confidence.