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
OverviewSolutions6Comments123

All comments

  • bikeinman• 1,080

    @BikeInMan

    Posted

    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

    0
  • bikeinman• 1,080

    @BikeInMan

    Posted

    Hi,

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

    background-repeat: no-repeat;
background-size: cover;

    Marked as helpful

    0
  • bikeinman• 1,080

    @BikeInMan

    Posted

    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

    0
  • Ted• 180

    @sharipoff-0-1

    Submitted

    Hello every one, here is my solution to the accordion card challenge, feel free to look at it, and please share your thoughts about it, I look forward to suggestions to improve my code...

    Responsive accordion, mobile first, accessibility

    #accessibility

    1

    bikeinman• 1,080

    @BikeInMan

    Posted

    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.

    0
  • Htein Linn• 130

    @hteinLinn210

    Submitted

    In this challenge, I mainly used grid for responsiveness. I made three layouts: desktop, tablet, mobile. And I started with mobile layout first. In the last part, I am not happy with my code that I have to use top: 25% to centre a div. How can I use other ways like align-item: center to center that. Feedbacks are warmly welcomed.

    Happy Coding!

    Four Card Feature Section

    2

    bikeinman• 1,080

    @BikeInMan

    Posted

    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

    1
  • Ratnesh sahu• 410

    @alexmercer500

    Submitted

    HI I'd appreciate any valuable feedback, It'd would be very helpful to provide correction and more easy approachable and cleaner way for the design.

    Four Card Feature Segment

    1

    bikeinman• 1,080

    @BikeInMan

    Posted

    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.

    1
  • Julian Florez• 190

    @juliflorezg

    Submitted

    Hello frontendmentor community! this is my solution to this challenge, feel free to tell me if you find any bug or something funny on your devices while seeing this, thank you guys and keep on coding!

    multicolumn card feature section, using sass

    #sass/scss

    1

    bikeinman• 1,080

    @BikeInMan

    Posted

    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

    0
  • bikeinman• 1,080

    @BikeInMan

    Posted

    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

    0
  • bikeinman• 1,080

    @BikeInMan

    Posted

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

    1
  • bikeinman• 1,080

    @BikeInMan

    Posted

    so cool..

    0
  • bikeinman• 1,080

    @BikeInMan

    Posted

    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

    0
  • Nick OD• 270

    @NickODxyz

    Submitted

    Hi all,

    I really enjoyed doing this one. I was expecting it to be really difficult to get my head around all the styling, but felt like it came pretty easy to me. Seems all the previous projects are paying off lol

    As always please leave any and all feedback.

    Thanks, Nick

    Chat App CSS Illustration | CSS Art

    2

    bikeinman• 1,080

    @BikeInMan

    Posted

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

    0
  • bikeinman• 1,080

    @BikeInMan

    Posted

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

    1
  • bikeinman• 1,080

    @BikeInMan

    Posted

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

    0
  • VINÍCIUS DOS SANTOS VERISSIMO• 250

    @viniciusdsv93

    Submitted

    Hello guys! Greetings from Brazil! I'm really excited to see my development by doing the projects and the challenges. I would love to receive your feedback about this one.

    Four card feature

    2

    bikeinman• 1,080

    @BikeInMan

    Posted

    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

    0
  • bikeinman• 1,080

    @BikeInMan

    Posted

    Pretty Impressive ! Congratulations.

    0
  • Nick OD• 270

    @NickODxyz

    Submitted

    Hi all,

    Just a couple of questions on this one please. Would be great to hear your feedback.

    1 - I played around with min & max for things like font-size and my .logo to make it responsive. Is this a good practice at all? Or should I just hard code the changes in my media queries?

        width: max(120px, 14.71%);
}```

2 - Given that I get the figma drawings, is it best to actually hard code the paddings into my `.wrapper` class the way I do? As I use it to set out where elements start / end. When ever I come to the complete 1440 desktop version, I'm always off and have to play around with them a bit.

I'm juist wondering how the professionals would tackle responsive mobile first workflow knowing the desktop version needs to be a certain size.

Thanks again for all comments.

Nick

    Huddle Landing Page | Flexbox | Responsive

    3

    bikeinman• 1,080

    @BikeInMan

    Posted

    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.

    1
  • MazzCode• 120

    @MazzGuille

    Submitted

    only mobile for now, hope to update tomorrow, follow me on twitter for my 100DaysOfCoding challenge!!!

    https://twitter.com/MazzGuille

    flexbox

    1

    bikeinman• 1,080

    @BikeInMan

    Posted

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

    1
  • VINÍCIUS DOS SANTOS VERISSIMO• 250

    @viniciusdsv93

    Submitted

    Hello guys. Greetings from Brazil. I would appreciate a lot if you give me a feedback about this one. By the way, can anyone tell me how do i get icons that can change their colors in a hover state? The icons i got ate fontawesome have just one color. Thanks!

    Huddle landing page

    2

    bikeinman• 1,080

    @BikeInMan

    Posted

    Nice work, again ! Works well in both sizes.

    1. About icon colors, you have used them as images, so I don't know. I too have used fontawesome, (a little older version) as text element like below <span class="icon fa fa-facebook"></span>

    Since it is a font, I was able to style them as a text element with regular color . But as an image tag, I don't know yet. If it were svg, may be you could have used fill property. I too am struggling with svgs, please let me know if you find a solution.

    1. Another unrelated suggestion You can use max-inline-size: 20ch; on h1 and p to adjust the line size, so that you can break the text at a desired location, getting you closer to the design.

    Hope this helps. Good Luck.

    Marked as helpful

    0
  • 👾 Ekaterine Mitagvaria 👾• 7,640

    @catherineisonline

    Submitted

    Hello, Frontend Mentor community! This is my solution to the URL shortening API landing page.

    I appreciate all the feedback you left that helped me to improve this project. I fixed the issues I had previously and added new features per your recommendation.

    I have done this project a while ago however if you are here and have any feedback, tips, or ideas to share, I will be more than glad to hear them out!

    Thanks

    URL shortening API landing page

    14

    bikeinman• 1,080

    @BikeInMan

    Posted

    If @nakoyawilson 's solution works for you, then please ignore. Unlike her, I didn't get time to clone and test it.

    But I get a feeling, mainClone.classList = "search-result"; is wrong.

    May be it should be written as mainClone.className = "search-result"; or mainClone.classList.add('search-result');

    Just a thought.

    BTW, you always say, it is not about design and just practicing js, but most of your work seems to be spot on. Great work as always.

    0
  • bikeinman• 1,080

    @BikeInMan

    Posted

    Very Nice!

    0
  • bikeinman• 1,080

    @BikeInMan

    Posted

    Nicely done with a single flexbox. Markup is neat too. And works well. Congratulations.

    1
  • bikeinman• 1,080

    @BikeInMan

    Posted

    Looks nice on all sizes. Works great. You have nailed it. Congratulations.

    Marked as helpful

    0
  • DevArtifact• 20

    @DevArtifacTs

    Submitted

    If you'll kindly to comment my work, I ,m very appriciate. 1.Could you please give my a suggestion about how to include the icon into the input form in a better way of my own. Remark : any mistake you can also notice me. I'm a newbie in this field here. Thank you in advance and sorry for my bad english.

    Intro component with sign-up form challenge hub

    1

    bikeinman• 1,080

    @BikeInMan

    Posted

    May be there are better ways, but most people have used the same technique as yours to position the icon. So, I think you are on the right track. So far so good.

    Try to fix rest of the design and validation problems.

    Don't worry about English. Most people talk in code :) .

    Good Luck.

    Marked as helpful

    0