Skip to content
OverviewSolutions
15
Comments
5
Andrew Southern
@whoamihealay

All comments

  • Andrew Southern•390
    @whoamihealayPosted almost 3 years ago

    Hi, Make the design work for mobile-first, I've found it's much easier to grow a design than to shrink it.

    In practice, for the media queries, I style for mobile, do a @media screen and (min-width: 30em) for tablets, and 60em for desktop. If needed you can increase the number of steps and change little elements style ( a flex col to flex row here and there)

    Marked as helpful
    0
  • DanielK•440
    @DanK1368Submitted almost 3 years ago

    So this is my take on the "nft preview component" challenge. I used sass for this one since i wanted to practice using variables and mixins. I tried to make the site as responsive as I could so that it would look good on desktop verions, as well as tablets, and even the small smart phones like the iphone-5.

    I'm generally curious what you guys think of the html structure of the page and the way it was styled. Could it be done in a more efficient way? Any feedback is greatly appreciated.

    Happy Coding and Happy Christmas :)

    Responsive-Webdesign of the challenge using SCSS

    2
    Andrew Southern•390
    @whoamihealayPosted almost 3 years ago

    Hi ! You nailed the design !

    For the html part, think in boxes. Replace the section with main. Padding on the main to make it a container. Then an a article or section with the image and text. It makes it easier for screen readers.

    For the headings, one h1 per page as the main title. Then a h2 per section and h3, h4, h5 for cascading sub-sections

    And finally this one is optional but you can load svgs in a img src tag. For bigger svgs it makes the code a lot cleaner.

    Hope this helps, have a good one !

    Marked as helpful
    0
  • Jennifer•220
    @Jennifer1919Submitted almost 3 years ago

    Does someone know how to add a purple overlay on the image? Here is the code I wrote but it does not work, I don't know why...

    img{ width: 100%; border-radius: 10px 10px 0px 0px; background-color:hsl(277, 64%, 61%); opacity: 0.3; }

    Stats preview card component Using Flexbox and CSS Grid

    4
    Andrew Southern•390
    @whoamihealayPosted almost 3 years ago

    I did this. You can tweak the filter to have the exact same taint but I found my solution to pop a bit more !

    .img {
    background-image: linear-gradient(
        hsla(277, 64%, 61%, 0.5),
        hsla(277, 64%, 61%, 0.5)
      ),
      url("./images/image-header-mobile.jpg");
      filter: contrast(200%) brightness(70%);
}
    Marked as helpful
    0
  • Daniel•100
    @danM51Submitted almost 3 years ago

    hey, I am self taught- so I dove right in for some practice, I'd appreciate any constructive critic towards my design, code approach and overall thought. This information will highly aid my viewpoint and approach on my future challenge projects.

    Thanks in Advance, stay coding !

    eye balled the design using HTML, CSS NFT card Challenge - beginner

    3
    Andrew Southern•390
    @whoamihealayPosted almost 3 years ago

    Hi, here are a few best pratices to improve.

    Heading: one h1 per page, a h2 per section and h3, h4 and h5 for sub-sections. Id: For selectors & Javascript actions (Document.getElementbyId etc), for style use class instead.

    Divs are mostly for styling purposes, if possible use section, article etc.

    Avoid using multiplie css techniques, ie inline style and css file. For small projects put everything in a single organized and commented file. It will help for bigger projects as they almost always use a css pre-processor ( Sass, Stylus, less, Tailwind or emotion).

    As for css organisation, for small component you can go top to bottom but for bigger projects try grouping by type (ie buttons, titles...) is prefered.

    And for a bonus tip, dive deep into accesibility ! It's extremely important ! Kevin Powell on youtube has some very good videos on the subject.

    Marked as helpful
    0
  • Matthew•50
    @WashemjSubmitted almost 3 years ago

    Hello,

    I struggled to complete the icons - making them go behind the background I couldnt do, and behind the card in front of them I did but struggled to get everything to line up. Any help on how this is actually done would be much appreciated!

    Also how you get the text of the name to go next to the picture - I was trying by changing the display CSS but couldnt work out how to get two lines next to the picture.

    Thanks

    Time tracking dashboard attempt

    2
    Andrew Southern•390
    @whoamihealayPosted almost 3 years ago

    Hi, as Robert said go with a background image and use background-position to place them.

    Also for accesibility reasons, try to follow this rule of thumb: only one h1 per page, a h2 per section and then h3, h4 and h5 per cascading sub-sections.

    Marked as helpful
    0