Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
18
Comments
43
Justin Connell
@justinconnell

All comments

  • Tharun Raj•1,330
    @Code-Beaker
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    Finished it with 0 help of Google!

    What challenges did you encounter, and how did you overcome them?

    I haven't faced any difficulties this time.

    But, I'm not really confident about the validity and accessibility of my code.

    What specific areas of your project would you like help with?

    I would like to learn more about accessibility of website and how to improve it.

    Social links profile card

    1
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    Great job on the solution! overall it looks great and all the required functionality has been implemented.

    Since you asked for feedback on accessibility, an improvement that can be made is to change

    alt="avatar-jessica"
    

    to

    alt="Jessica Randall's avatar"
    

    The reason for this is because screen readers read out the alt content to people who depend on them to describe the content of the page and Jesica Randall's avatar sounds better than avatar-jessica (imagine robot voice reading this to you)

    I hope you find this comment helpful.

    Keep on coding!

    J

    Marked as helpful
  • FafioluOluwadamilola•50
    @FafioluOluwadamilola
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I have gotten better at coding in general

    What challenges did you encounter, and how did you overcome them?

    Styling it to fit mobile view and adjusting the font width to match perfectly and also determining what font color to use

    What specific areas of your project would you like help with?

    I would love to know how the numbers 1-6 were styled, I tried but I couldn't do it

    Responsive Recipe Page using HTML and CSS

    2
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    Hi @DammyFaffy,

    As per your request regarding making your design responsive you need to use a media query to apply different layouts such as the one below:

      .container {
        max-width: 375px;
      }
      @media (min-width: 768px) {
        .container {
          max-width: 736px;
        }
    
    

    The code above takes a 'mobile first approach' and sets the maximum width for a container - for mobile the max-width is 375px and on screens larger than 768px, the max-width is 736px.

    The key is to use media queries to define styling for specific screen sizes. Starting with the mobile first approach and moving up screen sizes helps to simplify the process.

    You can learn more about mobile first here

    I do have a question for you though, what resources are you currently using to learn web development?

    I hope you find this useful

    Keep on coding and learning! J

    Marked as helpful
  • Rowan•230
    @rowanDeveloper
    Submitted over 1 year ago
    What specific areas of your project would you like help with?

    I am having trouble with the height view (or viewport height), so I will appreacite some advice to fix this. Thanks :)

    Social Media Links

    1
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    Hi Rowan, Your solution looks great!

    It works on mobile and desktop but not for tablet - this is because margin is being used to position the card. A better way to position items like this is to use Flexbox or CSS Grid.

    You could use CSS grid as follows and reduce the code required to centre the card:

    body {
        color: var(--white);
        background-color: var(--off-black);
        font-family: var(--Inter-font-family);
        display: grid;
        place-content: center;
        height: 100vh;
    }
    

    Keep going! J

  • Vitoria Ribeiro Dias•40
    @vitorialrd
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    Maybe I can frame the divs better

    What challenges did you encounter, and how did you overcome them?

    Media query, Responsive design

    What specific areas of your project would you like help with?

    Css grid

    @media, css grid

    1
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    Hi @vitorialrd,

    Congratulations on submitting your solution!

    I noticed that you did use flexbox in your solution and thought the following resources will be helpful - I included CSS Grid because you asked about grid:

    • FlexBox documented here
    • or CSS Grid documented here

    The trick is to have a container that takes up 100vh (100% of the viewport height) and 100vw (100% viewport width) and then to centre the child element in the container element.

    In your code this can be done with the following changes:

    body {
        background-color: hsl(212, 45%, 89%);
        font-family: "Outfit", sans-serif;
        /* margin-top: 40px; */
    }
    
    .container {
        /* display: block; */
        /* margin: auto; */
        height: 100vh;
        display: flex;
        /* align item vertically */
        align-items: center; 
        /* align item horizontally */
        justify-content: center;
    }
    

    Note, I commented out the unnecessary code above and included some comments on centring the content for convenience.

    To answer your question on CSS Grid, you can achieve the same effect as follows:

    .container {
        height: 100vh;
        display: grid;
        place-content: center;
    }
    

    I hope you find this feedback helpful

    Keep on coding! J

  • FafioluOluwadamilola•50
    @FafioluOluwadamilola
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I could do it myself without help

    What challenges did you encounter, and how did you overcome them?

    No challanges

    What specific areas of your project would you like help with?

    Nothing in particular

    QR Code Design With HTML and CSS

    1
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    Hi @DammyFaffy, Congratulations on submitting your solution!

    I noticed that it is not centred on the page so took a look at the code and noticed that you used margins. I assume that using those settings it looked good on your screen, but unfortunately there are may screen sizes that need to be considered when implementing a design - to get elements centred on the screen there are two good options to use:

    • FlexBox documented here
    • or CSS Grid documented here

    The trick is to have a container that takes up 100vh (100% of the viewport height) and 100vw (100% viewport width) and then to centre the child element in the container element.

    In your code this can be done with the following changes:

    body {
        height: 100vh;
        background-color: rgb(213, 225, 239, 255);
        /* width: 1440px; */
        display: grid;
        place-content: center;
    }
    
    .container {
        /* margin-top: 200px; */
        /* margin-left: 760px; */
        /* margin-right: 700px; */
        background-color: white;
        height: 500px;
        width: 325px;
        padding-left: 20px;
        padding-top: 20px;
        border-radius: 20px;
        /* overflow: hidden; */
    }
    

    Note, I commented out the unnecessary code above. I do have a question though - why did you set 'overflow: hidden'?

    I hope you find this feedback helpful

    Keep on coding! J

    Marked as helpful
  • Rowan•230
    @rowanDeveloper
    Submitted over 1 year ago

    Responsive Recipe Menu

    1
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    Hi @rowanDeveloper,

    Great job submitting your solution! - I took a look at your code - it's pretty clean and well docuented - I like that you added comments on the decisions you made, this is really good, keep it up.

    Also your level of commenting is good - you only comment on what needs explination and don't state the obvious. One thing that can improve is to keep your comments consistent in terms of placing them on the line above the code line so that there's no need to scroll right - this will help the legibility of your code.

    Also you may be interested in applying some BEM to your projects going forward - you make good use of naming and I think BEM could be a good fit for you. You can check that out here.

    Last thing, I noticed you tagged the solution with sass/scss but I noticed the style was in CSS - are you using scss for other projects?

    I hope you find this feedback helpful!

    Keep up the good work and continue improving! J

    Marked as helpful
  • David Mani Ibrahim•200
    @DavidManiIbrahim
    Submitted over 1 year ago

    Social Link Profile

    1
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    Hi @DavidManiIbrahim,

    I saw your solution come up in my feed with the tag 'web-components' so I decided to take a look at how you implemented web components for this solution. Unfortunately, the solution is not using web components - you can learn more about web components here:

    I hope you find the resource helpful and hope to see some web components you develop in the future!

    All the best! J

  • viveknagesh21•60
    @viveknagesh21
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I have try different display layout for this like CSS Grid, CSS Flexbox. I will use Firefox for CSS debugging, it suits me.

    What challenges did you encounter, and how did you overcome them?

    I initially faced a challenge centering a QR code without a container div or flexbox/grid. I realized that using flexbox would make this task much easier. This is a common challenge when working with HTML and CSS, and flexbox is a powerful tool for overcoming it.

    What specific areas of your project would you like help with?

    I am happy with this method.

    QR Card Component

    2
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    Hi @viveknagesh21, Congratulations on submitting your QR Code solution! the design looks good.

    I see you managed to centre the card nicely with FlexBox and having read your comment on how you got to that solution, I agree, FlexBox is great for achieving this goal.

    I tried looking at the code repo but the link is broken so I used the browser to take a look at the code and have the following suggestion:

    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        /* margin: auto;  -- you don't need this if you set the width*/
       width: 100vw;
        border-radius: 10px;
    }
    

    An alternative solution is to use:

    .container {
        height: 100vh;
        width: 100vw;
        border-radius: 10px;
        display: grid;
        place-content: center;
    }
    

    I hope you find this feedback helpful!

    Keep up the great work! J

    Marked as helpful
  • Shraban Chakma•30
    @shrabanchakma
    Submitted over 1 year ago

    responsive component using css flexbox

    #fetch
    3
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    Congrats on submitting your solution!

    Thanks for clarifying what feedback you're looking for - this is very helpful to reviewers.

    In response to your concerns:

    • I'm confused about the heights.Should I add height to the parent component or just let the height grow as the content increases.

    This really depends on whether the height should be fixed or responsive - generally a good way to go is to work top down, get your HTML structured then apply layout to that.

    • I believe I have used html headings in a wrong way.Should I always use headings in a sequencial manner? like h1, h2, h3?

    You can read all about that take on stack overflow

    • Should I be using landmarks in the component?

    What are landmarks?

    • Which color model I should generally be using. I used both hex and hsl

    Either way is fine - just pick one and use it consistently

    • Some tips for creating responsive components

    One of the most popular methods is 'mobile first' where you build out your default layout for mobile the add breakpoints at each screen width increment you need ton modify the layout.

    Using CSS Grid and Flexbox are good technologies to leverage for responsive layouts - Flex is great for row/column - dimensional layouts where Grid is best for 2-dimensional layouts

    I hope you find this response helpful...

  • ZAHROUNI Saleheddine•80
    @ZahrouniS
    Submitted over 1 year ago

    Product preview card component built with HTML and CSS

    #accessibility
    1
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    Good work submitting your solution!

    I reviewed the preview site and the desktop layout looks great. The mobile layout has not been implemented.

    I looked at the code and it seems that you have a media query to wire up the layout change at 375px - I suggest you use a higher breakpoint for the mobile view and also that you try following a 'mobile first' approach to implementing the design.

    Another thing you can do to simplify your code is to use the picture HTML5 element or use srcset on a single img to handle multiple images.

    I hope you find this helpful...

    Carry on coding!

    Marked as helpful
  • msulemanaslam1•110
    @msulemanaslam1
    Submitted over 1 year ago

    Product Preview Card

    1
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    Great job submitting your solution.

    Your solution looks good on mobile and desktop, but what does not work well is using 375px as the breakpoint - I suggest this be bumped up to a level that can handle the larger screen width.

    Otherwise the solution looks good and you solved the tricky parts - so good going!

    On the coding side - I noticed you used 2 <img> tags - a better approach would be to use the srcset attribute on the img element.

    I hope you find that feedback helpful...

    You're doing well! so...

    Carry on Coding!

    Marked as helpful
  • P
    Ellyxina•50
    @Ellyxina
    Submitted over 1 year ago

    Social links profile

    #animation#foundation#fresh
    1
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    Your solution really looks great!

    I noticed you are using some semantic HTML5 markup - good going on that!

    Just one suggestion I have is to rather user the article element to markup a 'self contained component' basically it can be used to group anything that can appear on it's own in a document.

    Other than that, you're doing great!

    I hope you find that feedback somewhat helpful...

    Carry on Coding!

    Marked as helpful
  • Hassan Moataz•1,860
    @hassanmoaa
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    proud i did this challenge!

    What challenges did you encounter, and how did you overcome them?

    none.

    What specific areas of your project would you like help with?

    Feedback are welcome!

    Responsive Product Card

    1
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    Great job submitting your solution!

    I first looked at the preview site - looks great on desktop and the tricky parts of resizing the layout and rounded corners works well when resizing down to smaller screens - there is just one improvement that can be made visually for smaller screens and that is to add some space to the left and right of the card as per the mobile design

    Looking into the code, you have well structured HTML and use some semantic HTML5 elements - you can include some more such as article and header as per the example below:

    <article>
      <header>
          /* heading content here */
      </header>
      <section>
          /* main content here */
      </section>
    </article>
    

    Another suggestion is to use the <picture> element for handling multiple images - alternatively you can also use one <img> element with the srcset attribute to specify which image to load for specific breakpoints.

    In terms of accessibility using alt="perfume-product image" is not good for screen readers - you need to imagine that you rely on someone reading a description of the image to you and use that as the alt text.

    Other than that, great work! Keep it up.

    I hope you find this review and feedback useful...

    Carry on coding!

    Marked as helpful
  • MightyLynx•50
    @MightyLynx
    Submitted over 1 year ago

    Simple and responsive social media link page using HTML and CSS

    #animation
    1
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    Your solution looks great!

    I tried to look at your code, but seems that the it's linked to your recipe solution repo ;)

    I did manage to get some insight by inspecting the elements on the page with Chrome dev tools and have a couple of suggestions based on what I could see:

    • I noticed that your container div is not centred on the screen - this can be done with the following CSS:
     {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    

    The other suggestion is to try using semantic HTML - for example you could replace div tags with an HTML5 tag that will provide more context and meaning to the document for screen readers and search engines - this will improve accessibility and SEO.

    For example you could take the following approach to include some semantic elements:

    <article>
      <header>
          /* heading content here: (avatar, name, location, bio) */
      </header>
      <section>
          /* main content here: (link list) */
      </section>
    </article>
    

    Otherwise, you're doing great!

    Hope you find the feedback useful...

    Keep on coding!

  • cwessley•10
    @cwessley
    Submitted over 1 year ago

    QR-Code-CSS

    1
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    Well done on getting your first solution submitted!

    Your solution looks great and you're doing the right thing getting out of 'video tutorial hell'.

    Since you asked about your CSS - there is an improvement I can suggest:

    Try looking at a methodology like BEM it will help avoid a lot of issues that can come up with CSS 'specificity' and the 'cascade'

    Great start!

    I hope you find this comment useful...

    Keep on coding!

  • Autumn•20
    @autgraves
    Submitted over 1 year ago

    Social Links Profile

    1
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    In response to your request for feedback, I hope you will find the following useful:

    HTML structure: I see you used main and footer HTML5 elements - that's good, you can improve by including more semantic HTML - for example a card could be structured using the following markup:

    <article>
      <header>
          /* heading content here */
      </header>
      <section>
          /* main content here */
      </section>
      <footer>
         /* footer content here */
      </footer>
    </article>
    

    Layout and responsiveness: Looks fine, you managed to achieve this without media queries, which simplified the CSS

    Accessibility: 10 fundamental web accessibility tips for front-end developers by Nefe Emadamerho-Atori (6 Feb 2024) is a great resource to get you started on implementing accessibility

    Maintainability: To improve maintainability, reduce the use of element selectors to the bare minimum - if this code has to live in a larger codebase, styling element selectors can result in styles being overridden in the cascade. Rather opt for class selectors for layout and styling. Also consider using a methodology like BEM.

    I hope you find this feedback in line with what you requested and that it's also helpful to you.

    Keep up the good work!

    Marked as helpful
  • Maea Matugas•60
    @hollyBelly2021
    Submitted over 1 year ago

    Social Linkes Profile Main Solution

    1
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    Your solution looks great!

    I viewed it on various screen sizes and the layout is consistent and active states are applied appropriately - nicely done!

    Looking at the HTML I noticed that you make good use of some semantic markup like header and section - the only thing that stood out at a glance is that you can replace the root div with a main element. While on the topic of div - the link list should be implemented as an unordered list ul with list items li - the reason being that div has no markup meaning (aka not semantic) where as <ul><li></li></ul> has meaning ( it's a list ). Another thing is that links need to be implemented as links that is use a for links.

    Other than that, great work!

    I hope you find this feedback useful,

    Keep on coding!

    Marked as helpful
  • misterOumar•60
    @misterOumar
    Submitted over 1 year ago

    Responsive and animated social links profile

    #semantic-ui
    2
    Justin Connell•720
    @justinconnell
    Posted over 1 year ago

    Great job on those animations!

    Your solution looks good across multiple screen resolutions, the animated active states is a nice touch - I loved it!

    In terms of a suggested improvement, you could reduce the animation delay when the page loads - the user experience I got was that the site is loading slowly.

    On to the code:

    • HTML code is laid out well and formatted
    • Great use of class naming to add semantic context to the code!

    In terms of continued improvement - you could try using some semantic markup - for example:

    <article>
      <header>
          /* heading content here */
      </header>
      <section>
          /* main content here */
      </section>
      <footer>
         /* footer content here */
      </footer>
    </article>
    

    I hope you find this review useful.

    Over all I like your approach - keep it up!

    Marked as helpful

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub