Skip to content
OverviewSolutions
41
Comments
23
John Norman
@norman02

All comments

  • John Norman•880
    @norman02

    Congrats on completing this challenge. It looks pretty good! The only suggestion I would make is to fix the accessibility issues listed in the report. Happy coding!

    Marked as helpful
  • John Norman•880
    @norman02

    You're right, thank you for the suggestions!

  • John Norman•880
    @norman02

    Thanks for the feedback!

  • John Norman•880
    @norman02

    Thanks! I'll make that change.

  • John Norman•880
    @norman02

    Thank you for the suggestion!

  • John Norman•880
    @norman02

    It is showing up fine for me on both Chrome and Firefox. Only thing I would suggest is to set outline: none; this will remove the blue box that shows up when you click the button.

  • John Norman•880
    @norman02

    It looks good, I like the transition delay animation. Two things I noticed: there is no shadow on the main element. The share element doesn't transition back to default state.

  • John Norman•880
    @norman02

    It looks great! I wasn't able to view your code so can't comment on that.

  • John Norman•880
    @norman02

    Thanks for posting this! I'm just starting to use Sass over raw CSS and yours is a great example of SCSS structure.

  • John Norman•880
    @norman02

    This looks pretty good. A couple things the background color for the bubble should be #FFF. There should be a background image. Looks like you got all the hard parts right.

  • John Norman•880
    @norman02

    I really like this! One minor suggestion, if you add name="email" to the email input it allows many browsers to suggest the user's stored email addresses.

  • John Norman•880
    @norman02

    The main thing I see is that the button should have a white background

  • John Norman•880
    @norman02

    This is a hard project to start with I'm not sure why it's in the newbie section. I'd do some of the others and come back to this.

  • John Norman•880
    @norman02

    The only thing that really looks off is the button. It's sized a bit differently and missing the drop shadow. It's hard to get an exact match without the sketch file, but measuring the jpeg with a free tool can get you close.

  • John Norman•880
    @norman02

    That's just about perfect!

  • John Norman•880
    @norman02

    This looks very good! Only a little off from the design.

    The answers to your questions are pretty subjective but here is what I do:

    For mobile view I usually play around with the responsive design on google developer tools and set media queries where things start to break. I also us Sizzy to see several devices at once while I'm developing.

    The reset css I usually use is

    :root {
    font-size: 10px;
}

*, *::before, *::after {
    margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    z-index: 0;
    box-sizing: border-box;
} ```
  • John Norman•880
    @norman02

    This is a hard project to start with. There are a couple issues with sizing the components and the background. Also see your report for HTML and accessibility issues. There are a couple ways to style the status bar. Here is what I did:

    <div id="status-panel">
    <p id="storage-message">You’ve used <em>815 GB</em> of your storage</p>
    <div id="status-bar">
      <div id="status-bottom">
        <div id="status-middle">
          <div id="status-top"></div>
        </div>
      </div>
    </div>
    <div id="status-text">
      <p>0 GB</p>
      <p>1000 GB</p>
    </div>

    css:

    #status-bar {
    margin-left: 3rem;
    width: 85%;
}

#status-bottom {
    background-color: var(--VeryDarkBlue);
    width: 100%;
    height: 1.8rem;
    display: flex;
    border-radius: 10px;
}

#status-middle {
    background: linear-gradient(to right, hsl(6, 100%, 80%),  hsl(335, 100%, 65%));
    width: 81.5%;
    height: 1.4rem;
    margin: 0.2rem;
    z-index: 1;
    position: relative;
    border-radius: 10px;
    display: flex;
}

#status-top {
    z-index: 2;
    background-color: white;
    height: 1.2rem;
    width: 1.2rem;
    margin: 0.1rem;
    border-radius: 100%;
    position: absolute;
    right: 0;
    top: 1;
}
  • John Norman•880
    @norman02

    This looks good! Only thing that seems to be missing is the box shadow.