Skip to content
OverviewSolutions
19
Comments
35
Shoaib Shuja
@ShoaibShuja

All comments

  • P
    mrcordova•1,360
    @mrcordova
    What are you most proud of, and what would you do differently next time?

    I was able to put the image over the nav bar and the hero section and limit the size of the nav bar as not to get in the way of the rest of the grid.

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

    How to add an arrow to popover and I ended up making the arrow positioned relative to the hamburger menu.

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

    Any general feedback is welcomed .

    Sunnyside Agency Landing Page Using CSSGrid and Flexbox

    1
    Shoaib Shuja•590
    @ShoaibShuja

    How were you able to design so perfectly? I really need some tips especially on how to match the design according to the given design images.

  • P
    Daniel 🛸•44,810
    @danielmrz-dev
    What are you most proud of, and what would you do differently next time?

    🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊

    🛠️ Built with:

    • HTML 🧾
    • Vanilla CSS 🎨
    • JavaScript 🤖
    • API 🆕
    • Vite ⚡
    • Axios 🔃
    • ESLint ✅
    • Mobile first workflow approach 📲

    Being able to finish this project makes me proud. The first time I tried I just couldn't figure it out the multiple filter logic. A few months later I decided to give it another shot and this is the result. And I got to use Vite, Axios and ESLint as a bonus 😁

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Feedback welcome 😊

    Job Listings w/ filters (Vite + Axios)

    #axios#vite
    4
    Shoaib Shuja•590
    @ShoaibShuja

    Mr. Daniel please tell me how you can match the design perfectly. Is there a secret?

  • Shoaib Shuja•590
    @ShoaibShuja

    Also your Github repository's link is broken. Fix it my friend

  • Shoaib Shuja•590
    @ShoaibShuja

    To center the box perfectly copy these to your CSS file:

    body {
    width: 100%;
    min-width: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    Good Luck.

    Marked as helpful
  • jeevan-v-jijo•80
    @jeevan-v-jijo
    What are you most proud of, and what would you do differently next time?

    Things that I am proud of

    -Learnt about media queries

    -Learnt about center a div, vertically and horizontally in a screen

    -position and display properties

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

    Challenges encountered

    -positioning

    I overcame it by researching online resources

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

    I want to know if my positioning and spacing methods are appropriate or not? If not how can I improve? what are the best practices.

    Responsive landing page using media queries

    2
    Shoaib Shuja•590
    @ShoaibShuja

    First of all for spaces you can use 1rem instead of like 1px which would apply more space at once because 1rem is equal to 16px and this way you can examine different spaces quickly. Also dont forget that you can use an extra one digit decimal with rem like .5rem which is basically 8px to match designs more effeciently.

    Also if you want to put your elements perfectly centered inside the body element instead of using position use flexbox in body element. This way you don't have to worry about positioning when using media queries and applying for smaller or bigger devices. This tip is optional but I believe is a better approach. To test this remove the position, top, left and transform from your .main-dev and the media queries and copy following code to your CSS file:

    body {
    width: 100%;
    min-width: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    I wish you good luck my friend.

  • Sajal•390
    @SJGit15
    What are you most proud of, and what would you do differently next time?

    I am most proud of the result and summary sections. Next time, I would try to write less lines of css code.

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

    I had a bit of difficulty getting the background color of the result section until I realized that it was provided in the style guide.

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

    Efficiency when it comes to code.

    Responsive results summary component using flexbox

    #pure-css
    2
    Shoaib Shuja•590
    @ShoaibShuja

    Amazing job my friend a here is a quick tip for you to perfectly center your .card inside the body element. First remove the margin-top property from your .card then add the following lines of code to your CSS file:

    body {
    width: 100%;
    min-width: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    Everything else looks super clean and perfect. Good luck.

  • Balaji Mahendra•120
    @NameRectified
    What challenges did you encounter, and how did you overcome them?

    For me the hamburger icon was the toughest part. Even in the final solution I did not get a good output for it. will be glad if any one can give suggestions on it.

    Thank you

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

    With the hamburger icon

    Responsive News Home Page

    1
    Shoaib Shuja•590
    @ShoaibShuja

    The repository link is broken. Fix it and we might take a look at your code to give suggestions.

  • P
    Hexerse•460
    @Hexerse
    What are you most proud of, and what would you do differently next time?

    Getting the qr code to the middle of the screen. Next time I know how to use flexbox to tackle this.

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

    Getting the qr code to the middle of the screen. Using and understanding how flex allows for the movement of divs in the x and y axis.

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

    Nil

    QR code

    2
    Shoaib Shuja•590
    @ShoaibShuja

    The image element is not displaying and the only issue is that you forgot a . at the beginning of the img's src and to fix this issues change the image's src to src="./images/image-qr-code.png".

    And also to center your .container perfectly inside the body element copy these lines of code to you CSS file:

    body {
    width: 100%;
    min-width: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    Marked as helpful
  • Khalid Mir•180
    @khalidmir2674
    What are you most proud of, and what would you do differently next time?

    I am proud that I am successful in creating this project

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

    Faced challenges while designing for mobile screensize.

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

    On mobile screensize, I am still not able to center all the testimonials. Any feedback guidance is highly appreciated.

    Testimonials Grid Section using CSS Grid

    #accessibility
    1
    Shoaib Shuja•590
    @ShoaibShuja

    Try and set the main's grid-template-columns: repeat(1, 1fr); and also do the same for rows and if it didn't work try adjusting the size of each section element simultaneously.

    Marked as helpful
  • Sayyed Aaman•270
    @sayyedaaman2
    What are you most proud of, and what would you do differently next time?

    responsive design

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

    grid system

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

    typography

    CSS Grid Layout solution.

    1
    Shoaib Shuja•590
    @ShoaibShuja

    Amazing job my friend and the layout seems absolutely amazing but the page is overflowing a bit and even though you have centered the .wrapper inside the body it was done through setting margins but the better approach would be using flexbox and removing the margins to fix the overflowing issue.

    Just in case these lines of code will help you center the .wrapper inside the body element.

    body {
    width: 100%;
    min-width: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    And also, if you have an issue with putting the attribution (which says who coded the project) to the very bottom of the webpage use the position: absolute; property and then set the bottom: 0;.

    I wish you best of lucks my friend. 👍

  • Colombe G•10
    @colombeg
    What are you most proud of, and what would you do differently next time?

    I only used basic HTML and CSS in order to realize this project but I will use diverse libraries or methodologies for future projects.

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

    I used media queries for the mobile format of the challenge.

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

    I would like to have a better understanding on how I can improve my code and how I can create responsive projects or apps.

    CSS flexbox and HTML for mobile and desktop

    2
    Shoaib Shuja•590
    @ShoaibShuja

    Amazing job my friend, the code looks good and clean but the .container doesn't seem to be perfectly centered like what the design asked for. You can achieve it by removing the margin-top property from .container and copying these lines of code to your CSS file:

    body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    And also, don't forget to use font-family to make text look better or according to design.

    Have a nice day. 👍

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

    working with css flex

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

    media quarry responsiveness i use flex directions : column on mobile and flex direction :row on desktop

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

    media quarry and css flex

    css flex and direction

    2
    Shoaib Shuja•590
    @ShoaibShuja

    Amazing job my friend and here are some suggestions for you to make your code better:

    • First of all wrap all your code in a section or div element especially if the design is basically covered in a box.

    • Also don't use section element unless you are covering a bunch of elements which depends on each other or are related

    • Also, in this particular challenge it would have been better to use a img element inside your div instead of putting it as the background

    • Another thing if you want to perfectly center a box inside the body element use these lines of code:

    body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
    • If you want to use media queries for smaller devices use @media screen and (max-width: 650px) and not min-width. min-width applies the media query to devices which have a width more than the one you set the property equal to.

    You code was overall good and simple. So keep learning and I wish you best of lucks.

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

    Figuring out the responsive grid layout code. That can be tricky. Also figured out how to align the testimonials in height so it looked more aesthetic and correct.

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

    Responsiveness and aligning the containers so they appear to have the same height. Brief searches online helped me discover an efficient way of dealing with these.

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

    Any way my layout can be improved for responsiveness.

    Responsive Testimonials Grid

    1
    Shoaib Shuja•590
    @ShoaibShuja

    Amazing job my friend and for the answer to your question is to use media queries like @media screen and (max-width: 650px) which would apply the styles that you write below it to smaller devices such as mobile devices. Even though you wrote a media query It seems like it is not working so I suggest you study a bit more about media queries and different widths according to devices. And also, another suggestion that I have for you is to not define widths that cause the page overflowing and horizontal scrolling especially when you are in the beginning phases of learning.

    Keep learning my friend and I wish you best of lucks. 👍

    Marked as helpful
  • Shoaib Shuja•590
    @ShoaibShuja

    Amazing job my friend and the layout seem to be perfectly designed and even though you didn't use media queries the layout seems to be responsive and works for smaller devices.

    For now I have two tips for you:

    • First of all you do not need to create a lot of properties as a variable if you are not going to use it several times

    • And second don't forget to add media queries which it's function is basically making the page responsive and work in different types of devices.

    Good luck and have a beautiful day.👍

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

    Did a Great job by giving the first project in frontend mentor

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

    The alignment part

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

    Alignment solutions

    Recipe page using HTML CSS

    1
    Shoaib Shuja•590
    @ShoaibShuja

    Amazing job and a quick tip for you my friend is to wrap the contents that depends on each other with <div> and those which are part of a section inside a <section> element which would help designing, alignment and accessibility much easier and efficient.

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

    Being able to complete this project. And trying to understand the use of flex.

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

    My code in regards to setting the @media queries, I felt as if by default I needed to wrap all my code for it to be be viewed on min 375px, then anything after I added code separately of how i wanted it to be viewed differently. It would be good to have some guidance on the layout of the code. For viewport 376px and above, I had struggled to get the price, button and footer to the bottom left underneath the product description. Also the size of the button and couldn't change the background colour of the button.

    Product preview-card component

    3
    Shoaib Shuja•590
    @ShoaibShuja

    A tip for you my friend is that do not put media query at the beginning of your code especially when you are in the beginning phases and a better approach is finishing the design for laptop or desktop view then applying the media queries for smaller devices and also when applying media queries do not use min-width if your target is smaller devices. You did amazing but I suggest you watch some tutorials like videos because I did the same when I first started, and it helps a lot.

    Have a nice day.

    Marked as helpful
  • Shoaib Shuja•590
    @ShoaibShuja

    Amazing job my friend but you forgot to add the main image element inside the .img-box div and you can center your card inside the body element by pasting these lines of code in your CSS file:

    body {
      width: 100%;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
}
    Marked as helpful
  • Mohammed Ayoub Nedjima•190
    @Mohammed-Nedjima
    What challenges did you encounter, and how did you overcome them?

    -I encountered an issue where sizes defined in rem appeared larger than their pixel equivalents. I discovered that this was due to my browser's font settings being set to large fonts, causing the discrepancy.

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

    -An explanation of the figure element and when to use it. I read some articles about it but I still don't understand it. -How to name CSS classes? should I use hyphen (-) or underscores(__) and what is the convention -Should I use more utility classes (flex-group or grid-flow) instead of inserting my styles directly on classes leading to repetition?

    blog preview card

    1
    Shoaib Shuja•590
    @ShoaibShuja

    Amazing job my friend and for your question I have to say that the BEM naming convention approach which uses underscores is a bit difficult but a much better approach to naming classes and for the layout design although it depends on the situation and design I find the flexbox a lot helpful in certain instances like changing the direction from row to column or reverse according to different height and widths and also the figure element is used to mark up a photo, diagram or similar in a document and group it together with the content its related to like for example you add a photo with a caption.

    Hope this helps and have an amazing day my friend.

    Marked as helpful