Skip to content
OverviewSolutions
6
Comments
122
bikeinman
@BikeInMan

All comments

  • bikeinman•1,080
    @BikeInMan

    Hi,

    Nice work so far. Desktop design is close to the requirements.

    However, on small screen sizes, there are a couple of problems. The first card is missing border color on top. And there is no gap/margin between cards.

    Also, on tablet sizes. The cards seem to stretch all the way to the sides. To prevent this consider setting a max-width on cards. eg:

    .card-content {
max-width: 300px;
margin: 10px;
}

    Good Luck

    Marked as helpful
  • bikeinman•1,080
    @BikeInMan

    Hi,

    Nice work! Try setting the following properties on your body. Looks much better.

    background-repeat: no-repeat;
background-size: cover;
    Marked as helpful
  • bikeinman•1,080
    @BikeInMan

    Hi,

    The layout and css part are very good. Works well. Congratulations.

    However, validations always return errors, even if enter all the fields correctly. Can you please check whats happening?

    Good Luck.

    Marked as helpful
  • bikeinman•1,080
    @BikeInMan

    Very nicely done. Works well in both sizes. I could not complete this challenge nearly as good as yours.

    I am just curious about one thing. Why did you choose span for the question. and p for the answer. Why not divs for both or p for both ? Span seems like an inline element according to MDN.

  • bikeinman•1,080
    @BikeInMan

    Hi,

    Nice work with 2X2 on tablets. Regarding your question. You can remove top: 25%; on supervisor and calculator

    and just add the align-items: center; to .feature-section

    Let me know if it works out.

    You can make this challenge more interesting by adding some interactivity to the cards like a hover effect and also making each card a link. They are supposed to lead somewhere, right? Good Luck.

    Marked as helpful
  • bikeinman•1,080
    @BikeInMan

    Hey, nice work so far.

    In the .para you have used <br> to break the line. <br> is not meant for styling but for breaking lines where appropriate, like in addresses etc. Instead you may also use max-inline-size to control the length of a line in p tags.

    Card titles are of different color than design. Intentional?

    You can make this challenge more interesting by adding some interactivity to the cards like a hover effect and also making each card a link. They are supposed to lead somewhere, right?

    If you can push yourself a little more, you may even try to display 2x2 cards on tablet sizes.

    Good Luck.

  • bikeinman•1,080
    @BikeInMan

    The design on desktop seems to be very close to the design. Congratulations.

    Some suggestions about markup.

    1. top-info should be wrapped in a header and not article

    2. h2, h1 is the not the right order. Here you seemed to have used it only for sizing. h1, h2 are not meant for sizing but for section headings in long form articles. You could have wrapped both the lines in h1 and one of them in span inside it and style span separately.

    3. About card titles, span is not the right element. May be h2 or h3 is better. span is mostly used in between long sentences and you briefly want to accent few words inside it.

    Other suggestions.

    1. Some padding is required on the sides on tablet sizes. Now it overflows.

    You can make this challenge more interesting by adding some interactivity to the cards like a hover effect and also making each card a link. They are supposed to lead somewhere, right?

    If you can push yourself a little more, you may even try to display 2x2 cards on tablet sizes.

    Good Luck.

    Marked as helpful
  • bikeinman•1,080
    @BikeInMan

    The design on desktop seems to be very close to the design. Congratulations.

    I have the following comments for you, if you will.

    You should not use div to wrap text. Div is mostly used to group of elements and to style it. .cardTitle, .cardP should be changed to standard html elements like h2 and p.

    Cards stretch the whole screen on smaller than desktop sizes. Try using max-width (about 300px) on your cards.

    You can make this challenge more interesting by adding some interactivity to the cards like a hover effect and also making each card a link. They are supposed to lead somewhere, right?

    If you can push yourself a little more, you may even try to display 2x2 cards on tablet sizes.

    Hope you enjoyed doing this challenge. For me, it took a lot of time and a lot of trial and error.

    Good Luck.

    Marked as helpful
  • bikeinman•1,080
    @BikeInMan

    Nice work, with the whole design in one grid.!

  • bikeinman•1,080
    @BikeInMan

    so cool..

  • bikeinman•1,080
    @BikeInMan

    Beautiful. Nice work as always.

    May be you can add a link to the logo and make 'Try it free' a little more interactive. It seemed to too subtle to be noticed.

    Link to your portfolio is a nice idea. :)

    Marked as helpful
  • bikeinman•1,080
    @BikeInMan

    Very cool. Matches the design almost 100%. How did you do that ? Whats your technique?

  • bikeinman•1,080
    @BikeInMan

    Wow, you have done some.pretty cool stuff with a single grid. Works well in both sizes. Awesome.

  • bikeinman•1,080
    @BikeInMan

    Wow, you have given color to the scrollbars and styled them too. Very creative idea! Looks nice and works well. Great work.

  • bikeinman•1,080
    @BikeInMan

    Nice work ! Works well.

    You can make it much simpler by apply on align-items: center; on container-cards and removing all other flexs on 3 columns. A little margin under red box would get you the same result. Just a thought. I am always looking to work with as much less code as possible.

    Marked as helpful
  • bikeinman•1,080
    @BikeInMan

    Pretty Impressive ! Congratulations.

  • bikeinman•1,080
    @BikeInMan

    Hi Nick,

    You have completed some impressive challenges and far ahead in the game. And for some strange reason you decided to follow me :) I am honored.

    Senior Analyst to Frontend ? Must be a difficult decision. But you seem to enjoy this a lot. Somewhat same here.

    Good Luck.

  • bikeinman•1,080
    @BikeInMan

    100days of Coding? Interesting ! How many hours do you plan to work/code? What are you planning to develop ?