Skip to content
OverviewSolutions
18
Comments
35
Shoaib Shuja
@ShoaibShuja

All comments

  • mrcordova•1,360
    @mrcordovaSubmitted 5 months ago
    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•560
    @ShoaibShujaPosted 5 months ago

    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.

    0
  • Daniel 🛸•44,310
    @danielmrz-devSubmitted 6 months ago
    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)

    4
    Shoaib Shuja•560
    @ShoaibShujaPosted 5 months ago

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

    1
  • Shoaib Shuja•560
    @ShoaibShujaPosted 5 months ago

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

    0
  • Shoaib Shuja•560
    @ShoaibShujaPosted 5 months ago

    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
    0
  • jeevan-v-jijo•50
    @jeevan-v-jijoSubmitted 5 months ago
    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•560
    @ShoaibShujaPosted 5 months ago

    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.

    1
  • Sajal•390
    @SJGit15Submitted 5 months ago
    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

    2
    Shoaib Shuja•560
    @ShoaibShujaPosted 5 months ago

    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.

    0
  • NameRectified•100
    @NameRectifiedSubmitted 5 months ago
    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•560
    @ShoaibShujaPosted 5 months ago

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

    0
  • Hexerse•460
    @HexerseSubmitted 5 months ago
    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•560
    @ShoaibShujaPosted 5 months ago

    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
    1
  • Khalid Mir•180
    @khalidmir2674Submitted 5 months ago
    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

    1
    Shoaib Shuja•560
    @ShoaibShujaPosted 5 months ago

    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
    0
  • Sayyed Aaman•210
    @sayyedaaman2Submitted 5 months ago
    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•560
    @ShoaibShujaPosted 5 months ago

    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. 👍

    0
  • Colombe G•10
    @colombegSubmitted 5 months ago
    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•560
    @ShoaibShujaPosted 5 months ago

    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. 👍

    0
  • patricknoni22•90
    @patricknoni22Submitted 5 months ago
    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•560
    @ShoaibShujaPosted 5 months ago

    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.

    0