Skip to content
OverviewSolutions
7
Comments
13
Aziz Najjar
@Njoura7

All comments

  • Aziz Najjar•240
    @Njoura7Posted over 2 years ago

    hello friend, your solution looks good, but I guess you forgot to change the font family and some line heights :D good coding journey

    0
  • Aziz Najjar•240
    @Njoura7Posted over 2 years ago

    Hello mate, your work is almost perfect, and I like how you are customizing your Readme section, lot of people don't do it x'D, I also liked the smooth animation that you ad I'll consider adding it to :D

    there is a small detail that might improve your solution, which is giving a gap between the two cards of 30 px, and then make the width of the right card a bit smaller

    Marked as helpful
    0
  • Daniel•30
    @danielfrontendjourneySubmitted over 2 years ago

    This is what I am able to build with the level I am at.

    It would be helpful to get some points on what I need to study more. What it seems I did right and should keep doing.

    QR code box

    2
    Aziz Najjar•240
    @Njoura7Posted over 2 years ago

    hello friend, good job for this project, and congrats for your first project on github here are two tips that might improve your project give the body a display flex like this body{ display:flex; justify-content:center; /to center the container horizontally in your case/ alignm-items:center; /to center the container vertically in your case/ } another method to do it without flexblox is to center your container directly: .container{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

    the other tip is to give your QR code img a width of 90% or 85% instead of max-width:100%; or you can give your container a padding of 1rem maybe hope it was helpful :D

    1
  • Aziz Najjar•240
    @Njoura7Posted over 2 years ago

    Hello friend, good job for your project, you're almost there, here are two tips that might help you improve your solution. 1)try to give a bigger width to your container (75% or 80%) 2)give more width to your img container and give it a background-size:cover; so it can cover the whole space hope it was helpful, good luck in your code journey :)

    Marked as helpful
    0
  • Aziz Najjar•240
    @Njoura7Posted over 2 years ago

    hello, nice try you are almost there ! here is what you should do:

    <div class="container"> <img src="images/image-header-desktop.jpg" alt="Image" class="image"> <div id="overlay"></div> </div> you should nest your image with another div and then give .container{position:relative;}

    #overlay{ position:absolute; width:100%; height:100%; }(so that it takes the whole space and then add the color with a specific opacity between 0.5 and 0.2 maybe)

    Marked as helpful
    1
  • Aziz Najjar•240
    @Njoura7Posted over 2 years ago

    Hello mate, you need to refresh your gitHub images and then repost your url solution again :)

    0
  • Rina•100
    @dodrinSubmitted over 2 years ago

    Hi, this is my 3rd project on frontend mentor. I used CSS grid for the responsive design. Somehow I could not make the container rounded.

    I appreciate your feedback! Happy coding🙌

    3 column preview card component using CSS grid

    2
    Aziz Najjar•240
    @Njoura7Posted over 2 years ago

    Hello, good job for this project You might want to read the comment below of @stijnmeershoek it's a good tip, And secondly you might add a position absolute for the buttons and postion relative for their parents and then add bottom:10px (that's what i did) so that the button stick in the same position no matter what is the size of the view. Hope it was helpful :)

    0
  • Aziz Najjar•240
    @Njoura7Posted over 2 years ago

    Hello mate, nice try for this challenge, you are almost there I have 3 small tips that might help you improve you solution -try to change the size of the main container especially the width is remarkably small comparing to the design -give the left box (which contains the text) a display flex and flex-direction:column; and justify-content:space-between; and then play with the margins and paddings -finally make a div for the image and an overlay div inside it and give it the pink color with an opacity 0.5 to get the result. Please check my result for better understanding i tried to make as clear as possible https://github.com/devsekar-1992/frontendmentor-stats-preview-card have a good day, and enjoy coding

    0
  • Travolgi 🍕•31,400
    @denieldenSubmitted almost 3 years ago

    Hi community :)

    In this challenge I used tailwindcss for the first time.

    Tailwind is very convenient but sometimes in the elements that need many classes I find the html too long and confusing.

    What do you think about it?

    NFT preview Card component with TailwindCss

    6
    Aziz Najjar•240
    @Njoura7Posted over 2 years ago

    Hello, good job man , almost exactly the same pattern I came here trying to understand how did you make the eye totally visible but I didn't really understand since u used tailwinds and am still stuck in vanilla CSS xD, but I guess you used transition which a very good idea, I ll might try it, but I came across this '-webkit-"property":' and I ve ben searching about it and I didn't understand it well so I was wondering if you could explain it. Thank you

    1
  • Aziz Najjar•240
    @Njoura7Posted over 2 years ago

    This small project is nothing but a quick reminder to us that no matter how easy or simple the project is it might help to sharpen our skills (practice makes perfect as we all know), but also it can improve new skills, for example, I am not the UI/UX guy, but such projects will definitely help me improve my "designing eye"(colors, fonts, shapes and features that can attract users), Your feedback is appreciated(about the design or this paragraph) oh, and btw can someone explain to me what's wrong with those accessibility issues, I visited the link of the report and it felt overwhelming. Thank you and have a good coding journey

    0
  • Rina•100
    @dodrinSubmitted over 2 years ago

    Hi, Im newbie coder who want to become front end dev. In this project I have a few difficulties that I couldn't figure out.

    1. Overlay is somehow not matching with the image position.
    2. I want the card to be vertically centered when opened with smaller display.

    I appreciate your help and feedback on my project. Thanks!

    NFT preview card component

    6
    Aziz Najjar•240
    @Njoura7Posted over 2 years ago

    hello, I 've just finished this project (and I couldn't submit it idk why) anyways those are two methods to center your element (horizontally and vertically) set the parent element (the element that contains the specific element that you want to center) to display flex for example let's say you want to center a <div> inside a <body>: body{ display:flex; justify-content:center; /horizontally/ align-items:center;/vertically/ } but be careful display flex will center all the elements, so in this case, you have to use only one container inside the body then nest the rest of the elements in it

    second method go to the element that you wanna center: let's say it's a <div> div{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }

    hope that was helpful :)

    Marked as helpful
    1
  • Yemisrach•1,430
    @Yemisrach15Submitted over 2 years ago

    Hello community

    With this challenge I've tired out styled-components and styled-system. It was interesting working with these libraries since there are no css/sass files, only js. When starting out, I had difficulty on how I should define spaces and sizes in the theme file, it was all jumbled up. I would appreciate any kind of feedback🙏🏾

    Responsive huddle landing page with react and styled-components

    2
    Aziz Najjar•240
    @Njoura7Posted over 2 years ago

    Hello mate, your solution looks good overall, I mean it doesn't have to be exactly the same, it's okay to adjust tp padding and margins, but try to fix those HTML issues in the report, I submitted the same work yesterday and I was amazed by this report it gives a lot of support try to use it.

    Marked as helpful
    0