All comments

• 

  Sahil Yadav• 70

  @Sahil-Yadav

  Submitted over 3 years ago

  If anything is wrong fell free to give an advice.

  

  Html, Css, Desktop first

  1

  10

  

  Brett Wood• 35

  @woodbrettm

  Posted over 3 years ago

  Looks great :)

  Two tips =>

  Tip One:

            <p class="why-us">
              Tutorials by industry experts <br />
              Peer & expert code review <br />
              Coding exercises <br />
              Access to our GitHub repos <br />
              Community forum <br />
              Flashcard decks <br />
              New videos every week
            </p>
  

  Instead of using a <p> tag here with breaks, a more screen-reader friendly way would be to use an unordered list, like so =>

  <ul class="why-us>
      <li>Tutorials by industry experts</li>
      <li>Peer & expert code review</li>
      <li>Coding exercises</li>
      <li>Access to our GitHub repos</li>
      <li>Community forum</li>
      <li>Flashcard decks</li>
      <li>New videos every week</li>
  </ul>
  

  Tip Two:

  <div class="sign-up-button">Sign Up</div>
  

  Can't be focused by a keyboard. A more accessible way could be using the anchor tag.

  <a role="button" href="">Sign Up</a>
  

  You can then give it an a:focus-visible { } pseudo class for people using the tab key through a website.

  Cheers :)

  0

  This comment has received 2 repliesShow
• 

  wisniewskiz• 55

  @wisniewskiz

  Submitted over 3 years ago

  I'm not sure that I went up setting the background svgs the right way. You can tell because I didn't really refactor my code from trying a couple of options so the bem naming might not make sense.

  I first tried to use the both as backgrounds using pure css. I ended up making separate divs and using some absolute and relative positioning with some transformations.

  Any feedback is useful! Thanks!

  

  Profile Card Component using Flexbox

  1

  31

  

  Brett Wood• 35

  @woodbrettm

  Posted over 3 years ago

  Using an img tag for decorative items works, just make sure you include an empty alt tag.

  <img src="file-url.svg" alt="">
  

  Without an alt tag, screen readers will read the src url to the user. Another way you can do it for example => (::before works as well)

  item::after {
    content: ' ';
    height: 100px;
    width: 50px;
    background: url('relative-file-path.svg') no-repeat;
    background-size: 100%;
    background-position: bottom left;
    position: absolute;
    }
  

  It's a bit more finicky that way as you have to explicitly set the height and width, but is sometimes useful in keeping your HTML clean.

  Marked as helpful

  0
• 

  Kyle• 155

  @kyle4real

  Submitted over 3 years ago

  What would be a better way to size the width of the container child elements so that it is responsive? (instead of the min-width method I used)

  

  Responsive site using HTML5 and CSS3

  1

  10

  

  Brett Wood• 35

  @woodbrettm

  Posted over 3 years ago

  Here could be an interesting way to go about it =>

  .container {
    display: flex;
    flex-flow: row wrap;
  }
  
  .container > div {
    flex-basis: 370px;
    flex-grow: 1;
  }
  

  I tried using grid, but it's impossible to set the column span behavior on wrapped items and needed that 3rd item to span 2 columns when wrapped.

  1