Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions7Comments30

All comments

  • Maria• 130

    @maaghia

    Submitted

    I am gonna need some help to style the range input, I would be glad to receive any help so that I can complete the challenge

    fylo-data-storage-component

    4

    Faruk Abdulganiyu• 380

    @faruking

    Posted

    Visit this link to help you better understand ranges styling ranges

    Marked as helpful

    1
  • Dima• 190

    @tomatikrad

    Submitted

    Hi guys please tell me if I adapted the picture correctly only for mobile devices and for desktop?

    Product preview card component

    1

    Faruk Abdulganiyu• 380

    @faruking

    Posted

    The link is not working

    Marked as helpful

    1
  • Kachi• 20

    @IAmKachi

    Submitted

    Hey Guys, I just completed the product preview card project. I'm a newbie and my code is filled with errors and bad practices. I'll love criticisms and reviews on the code and how I can improve in the future. My questions for this challenge are:

    1. I found media queries difficult to understand. two images were provided for the desktop and mobile designs respectively. I didn't know how to change the image responsively based on the screen size. I'll need all the help I can get on this. Thanks.
    2. I'll love to know more on how to handle events with JavaScript.

    Product Preview Card Challenge

    #accessibility

    3

    Faruk Abdulganiyu• 380

    @faruking

    Posted

    Good effort! you can only get better.

    • I will suggest you visit this link to learn about media queries, event handler and much more.
    1
  • Anthony Guilherme• 190

    @oAnthonyG

    Submitted

    this challenge was cool, I had few difficulties in the footer part due to not having knowledge of certain tools to look like the original, I conclude my way, I accept solutions to solve the footer problem. Feedback welcome!!

    Responsive landing page with html and css

    1

    Faruk Abdulganiyu• 380

    @faruking

    Posted

    Good job! however, your project is not yet responsive and can you be more specific with the 'footer problem' you have.

    0
  • Faruk Abdulganiyu• 380

    @faruking

    Posted

    Your project is not working yet. Kindly look into it.

    1
  • Faruk Abdulganiyu• 380

    @faruking

    Posted

    Good job! An observation though, the 'insight' text doesn't blend well on resizing i.e. the last letters are hidden on resize.

    Marked as helpful

    0
  • Faruk Abdulganiyu• 380

    @faruking

    Posted

    One way to do this is using a combination of flex-wrap, justify-content etc. But you might still need to tweak some things. modify the footer class style to:

    width: 100%;
padding-inline: clamp(0rem, -6.107vw + 2.931rem, 1.5rem);
flex-wrap: wrap;
display: inline-flex;
justify-content: space-between;

    after that you can remove the grid-template-column in media queries. Don't forget to also remove the display: grid and grid-template-column in the footer class.

    1
  • Faruk Abdulganiyu• 380

    @faruking

    Posted

    Good job. This was a difficult one but I completed it. The search functions seems not to work, You can check mine probably, you will find some tips.

    0
  • P
    Nicholas• 205

    @fytrw

    Submitted

    Hi!👋

    My Tic Tac Toe React project! There is error with useEffect, I dont know how to fix it. Is using that many useStates necessary?

    It will be great to hear some feedback from you on what could I have done wrong!

    Tic Tac Toe with React and React Router

    #react#react-router

    2

    Faruk Abdulganiyu• 380

    @faruking

    Posted

    Nice design. I completed this challenge as well and it was a fun one. You can check it but I made it with just HTML, vanilla javascript, and it's rule are a little bit more advanced.

    0
  • Nika• 40

    @NIKAKL

    Submitted

    Is there a way to change the shadow radius without changing changing the radius of the whole card element? I tried wrapping the card element in another div and creating a shadow there but it didn't seem to work. Any tips?

    NFT preview component card

    1

    Faruk Abdulganiyu• 380

    @faruking

    Posted

    I am not sure there is an official way to that because according to web docs: "If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners". Source

    However, there is a way to go about it. create 2 card class(instead of one) and make sure one is atop the other(one is visible and the other is not) by setting the position of the first card to 'absolute'. Then add box-shadow and border-radius to the one behind while setting a different border-radius for the one at the top.

    Here is a codepen example

    Marked as helpful

    0
  • Faruk Abdulganiyu• 380

    @faruking

    Posted

    I would have told you to use the animation feature of CSS but you can't animate the display and height property of CSS. There are however other ways to achieve the desired result. Let's use plain Javascript code. Add the code below to your javascript file(inside the toggle(i) function after the second line).

    let id = null;
  let pos = 0;
  clearInterval(id);
  id = setInterval(frame, 10);
  function frame() {
    if (pos == 50) {
      clearInterval(id);
    } else {
      pos++; 
      description[i].style.height = pos + "px"; 
    }
  }

    Link to explanation Source

    Marked as helpful

    1
  • why-not-phoenix• 90

    @why-not-phoenix

    Submitted

    Hey guys,

    Here's my solution for the stats preview card.

    1. Would've felt better making the side image a background-image but couldn't figure out the right blend with the background-color. I'd appreciate tips on how to mix images and colors.
    2. Main might look terrible on some devices, I tried fixing that, what do y'all think I could've done better?
    3. Wasted a lot of time trying to get the right dimensions. Is there an easier way of getting dimensions that fit?

    My code might be messy, I'd appreciate any tip on optimization and better arrangement. Generally, I just need an assessment on these guys. Thanks for taking the time to help.

    Mobile first stats preview card using flexbox & media query

    2

    Faruk Abdulganiyu• 380

    @faruking

    Posted

    Nice job. What I can add is that you change the width of the card(line 27 css) to 90% to get it closer to the design.

    1
  • Faruk Abdulganiyu• 380

    @faruking

    Posted

    The issue I believe has to do with your usage of 'vh' for height and width. When in portrait mode, the containers scale better compared to when in landscape mode(height significantly lower than the width). One solution is to hardcode the width and height using 'px' and combining it with media queries for responsivity, Another one is to use '%' in place of 'vh'(this is actually my fav). Also, I noticed you increased the font-size of the paragraph in mobile mode without increasing the size of its container, this can cause overflow. Lastly, When done with your design, you can use this site called 'responsinator' to preview your site for responsivity.

    0
  • Faruk Abdulganiyu• 380

    @faruking

    Posted

    You can use flex instead of grid and use flex-wrap to make it responsive but you still have to use media-queries to remove the border-radius in mobile mode. Though grid and flex can be used interchangeably, flex is usually used for arranging items in a single direction(horizontal or vertical) while grid is usually used for arranging items in both directions. Here is a link to learn more about flex link and here is another link to learn about media queries link.

    Marked as helpful

    0
  • Cường• 845

    @docuong0912

    Submitted

    Bonus 1: stuck

    Bonus 2: minimax algorithm implement. Source :greeksforgreeks

    Can any one help me with saving game state, i stucked with it for days, can not figure out which bug i encounterd, thank you for your time

    Tic tac toe game + Bonus 2

    #react

    1

    Faruk Abdulganiyu• 380

    @faruking

    Posted

    You can check my design for some pointers though it works a bit differently. In my design, you can click on tiles to move them(when there is three tiles each from the players) - which is more tricky.

    0
  • Anthony Emede• 60

    @AnthonyEmede

    Submitted

    I found it difficult trying to set the border radius for the <div class="card-container3> when in mobile view. I also applied the "min-height: 100vh;" CSS property, of which I noticed the scroll bar on the page went missing. I still don't understand how it works.

    Any information about this issues will be appreciated.

    Responsive 3-column preview card component page.

    2

    Faruk Abdulganiyu• 380

    @faruking

    Posted

    You can use 'media queries' to style elements when they satisfies a certain condition like when in mobile mode. Visit this link to learn more. media queries

    0
  • Faruk Abdulganiyu• 380

    @faruking

    Posted

    Nice design but you forgot to style the text in the button of the last card i.e. the color of the text shouldn't be black.

    0
  • Faruk Abdulganiyu• 380

    @faruking

    Posted

    Your design is great(omo iya mi) but I believe it shouldn't fill the screen(just like the design itself). You can reduce the width of the main section by adding margin of 10% at (style.css line 107).

    1
  • Reiner Bielert• 10

    @coderhanzo

    Submitted

    First take on this challenge, still a novice in web development and took this challenge test my self. Also didn't build the mobile version for this (it responsive to mobile browsers but isn't perfect)couldn't figure out how to go about it. Aside that,everything works okay, still got some learning to do tho. Feedback will be much appreciated.

    Qr code challenge - first take.

    2

    Faruk Abdulganiyu• 380

    @faruking

    Posted

    change width of the QR code to 100%(style.css line17) to make the edges equal.

    Marked as helpful

    0
  • Adil Rafiq• 120

    @Adil-Rafiq

    Submitted

    Hello People! I completed this project to improve my layout skills which I did up to some point but I ran into few problems, described below: 1- The first one is that the text in the right most card does not fill the empty space. I could not find any method to some how smaller the heights of all the cards EVENLY so that there's no empty space left (as shown in the design).

    2- The 2nd one is about the 'media queries' and it looks like a bug to me. When I first wrote the media queries for mobile and tablet view they worked perfectly but later when I was fixing the above problem I may have edited something that caused those media queries to come into affect at all.

    Any help would be appreciated. Thank you :)

    I used html and CSS grid layout tool

    1

    Faruk Abdulganiyu• 380

    @faruking

    Posted

    I can only help by telling you to adjust the container so that its in the middle by using margin:auto on the container class. Also the color of the h2 class has to be changed from black to the required color. Lastly, you can check my designs for pointers about how to fill the texts in their respective containers. I think it has to do with the size of the container, the padding and the font size, line-height of the texts.

    Marked as helpful

    0
  • Faruk Abdulganiyu• 380

    @faruking

    Posted

    Hi, nice design. I completed this challenge as well but it works a bit different from yours. It has maximum of 3 tiles for each players after which you can move them by clicking on the tiles. You can check it and tell me what you think.

    0
  • Matt Seidel• 570

    @mseidel819

    Submitted

    I couldn't figure out the color styling on the main title in the hero section. Can anyone help?

    I haven't made an attempt at the lazy-loading effect for the images. I'd like to try that out and re-submit this challenge.

    Art Gallery Website using React and MUI

    #react#material-ui

    1

    Faruk Abdulganiyu• 380

    @faruking

    Posted

    1. You can use 'span' element to style the needed letters that should be in black.
    2. The heading in the last box (come and be inspired) should have a vertical space between it.
    3. Design is not yet responsive.
    0
  • Faruk Abdulganiyu• 380

    @faruking

    Posted

    1. The body text is difficult to read(make it brighter)
    2. The action button is styled wrongly i.e. The default style should be for the hover style and vice-versa.
    3. The margin for the mobile version is a bit much.

    Marked as helpful

    0
  • isaac nabil• 220

    @nabil4416

    Submitted

    my head is broken, can someone take a look at this test, I started with the creation of the mobile design, then I wanted to switch to the desktop screen, of course using the flex display, and I I found that the first box is smaller than the others, I found myself having to change the width of the desktop design... what do you say about it?

    3-column preview card component

    3

    Faruk Abdulganiyu• 380

    @faruking

    Posted

    If you still want to use flex, remove "align-items:center;" in the container class(line 85 in style.css). Also, don't forget to style the hover for the buttons.

    1