Skip to content
OverviewSolutions
8
Comments
7
Christopher Nance
@ctnance

All comments

  • Jonny Ngo Luong•80
    @ShirajukiSubmitted over 3 years ago

    Hello! 👋

    This is my 2nd solution on Frontend Mentor, and also my 2nd week here! As this was a newbie challenge with no dynamic elements, I chose to build it using static HTML5 and CSS.

    I had little time working this week and thus only used about 2 hours on the newbie solution, which means that there is probably still lots to improve code quality-wise. Even though I do believe that I did quite well on this, I still hope for some feedback from the community! Any feedbacks on my use of "percent" (%) on the opposite side for the background-circles as well as the CSS syntax, since i tend to write lots of redundant code for styles, are greatly appreciated!

    This time, I used Figma for measuring which has made it a lot easier to get the measurement right even though the monitor on my laptop is smaller than 1440px. All in all I've had a good time relaxing while working on this solution and enjoyed it very much.

    I'll be back for another challenge next week, see you all there!

    • Shirajuki

    Responsive landing profile card page using Flexbox and Grid

    1
    Christopher Nance•240
    @ctnancePosted over 3 years ago

    Hi Shirajuki,

    Great job on this project, especially considering your time restraints and this being your 2nd project!

    My first impression is that you did a fantastic job matching your design to the original. I would only recommend adding some margin between the text in the "info" classes (inside the "infoWrapper").

    I also find your use of the ::before & ::after selectors an interesting, but an effective choice for the background images within the body tag. I like how it turned out!

    Happy Coding!

    • Chris
    1
  • ShingoAoi•30
    @MuneguSubmitted over 3 years ago

    Hello, This is my first Frontend Mentor challenge and I'm a noob :-D . Any feedback is welcome :-)

    Thank's

    Profile card component

    1
    Christopher Nance•240
    @ctnancePosted over 3 years ago

    Hi Munegu,

    Great work on this challenge! Your HTML & SASS code looks very clean and well organized. For your first Frontend Mentor challenge, I'd say you hit a home run!

    One small recommendation I can think of would be to add a box shadow around your card to fit the original design (if you'd like).

    You could also play with margin/padding values to closer replicate the original design if you feel the need, but this isn't really necessary. I think you've done a fine job as is.

    Happy Coding!

    • Chris
    Marked as helpful
    0
  • Christopher Nance•240
    @ctnanceSubmitted almost 4 years ago

    This is my first Premium challenge on Frontend Mentor and it really challenged my critical thinking and CSS skills!

    If you have any overall best practice suggestions, or methods in which I can improve my code in a particular way, please let me know! I'm always aspiring to improve, so I greatly appreciate any feedback you have.

    Mobile First using HTML, CSS & JS

    2
    Christopher Nance•240
    @ctnancePosted almost 4 years ago

    Thank you for taking the time to leave your feedback, Matt!

    These are helpful pieces of advice and they all make perfect sense for best practices. I will update the code as soon as I get a moment.

    Again, I appreciate your feedback. Happy coding! :)

    0
  • Christopher Nance•240
    @ctnancePosted almost 4 years ago

    Hi Folarin, great job on this one!

    I noticed you used several media queries for the same min-width; I'm not sure if this was intentional, but you could use only one for the same effect to trim down your code.

    Also, don't forget you can add the background images as well with the background-image attribute.

    Again, really good work--keep it up!

    1
  • Christopher Nance•240
    @ctnancePosted almost 4 years ago

    Hi Mohamed, great job on this one!

    I would recommend cleaning up two HTML code snippets--line 46 reads "<spa class="close-icon">"; I figure you're wanting the span tag, which is an easy fix (just be sure to correct the closing tag as well).

    Also, for your attribution div, the first <a> has the attribute rel="noreference". I'm not sure noreference is valid. Did you mean noreferrer?

    Otherwise, I really like how your challenge turned out. It's very close to the original design!

    1
  • Kevin Salina•70
    @KevinSalinaSubmitted almost 4 years ago

    Had a lot of trouble with the footer section and the wave/dual background. I came up with some pretty janky solutions so any feedback on those areas would be great, thanks!

    Fylo Website

    2
    Christopher Nance•240
    @ctnancePosted almost 4 years ago

    Hi Kevin--really good job on this one!

    Don't forget to give your email input a name attribute for referencing purposes (not necessarily needed for the challenge, but necessary for standard HTML code).

    I saw you mentioned that you struggled with the footer; for the telephone and email icons, you could try putting your img and p tag inside of a span tag (you may need to play with the padding for proper orientation). Otherwise, just generally playing with your margins/padding should help in other cases.

    Overall, you did a great job!

    1
  • Christopher Nance•240
    @ctnancePosted almost 4 years ago

    Your site looks good, Esteban!

    I'd recommend styling your h1 and h2 tags to be a little bigger if you want to more closely mimic the design.

    I'd also challenge you to make the responsive mobile version for extra practice if you'd like.

    Overall, great job!

    1