Skip to content
OverviewSolutions
3
Comments
2
P

Chris Eden

@Chriseden83Carlisle, Cumbria, UK60 points

Aspiring front end web developer using HTML, CSS, JavaScript, React Currently working hard to achieve my goal of becoming a front end developer now I have left my previous role in a different industry. I started creating websites at the age of 15 back when 'tables' were the in thing ha...

I’m currently learning...

CSS (Flexbox, Grid, SCSS), React, Next.JS

Latest solutions

  • HTML, CSS Grid & JS Responsive News Page

    P
    Chris Eden•60
    Submitted 11 months ago

    How to rectify the hamburger menu transition showing for a brief second when resizing the browser. A gentleman suggested it was because I was using the one nav in desktop as well as mobile but I just don't know? I personally think there should be a fix out there?

    I'm still learning JS and it's still early days.

    0 comments

  • HTML / CSS profile card component

    P
    Chris Eden•60
    Submitted 12 months ago

    Generally went ok but I just have to check W3C for placing background images

    0 comments

  • Blog Preview Card

    P
    Chris Eden•60
    Submitted 12 months ago

    Check semantic HTML and best practices for images these days as I see some say a fixed width / height on images are now best practice for performance?

    I don't like to put a fixed height on the overall article tag so the height won't be exact.

    1 comment

Latest comments

  • P
    Chris Eden•60
    @Chriseden83

    One thing that helped me when undertaking the project was using the HTML picture tag for two different images rather than javascript. You can set a min width of when it should change. The first source is when the picture should change along with the source as I planned for mobile first this was the desktop image, the fallback is the primary mobile image, see here:

     <picture>
          <source
            width="730"
            height="300"
            media="(min-width: 48em)"
            srcset="./assets/images/image-web-3-desktop.jpg"/>
          <img
            width="343"
            height="300"
            src="./assets/images/image-web-3-mobile.jpg"
            alt="hero image showing building blocks"
            class="feature__image" />
</picture>

    Try adding a no scroll class on the body so you cannot scroll when the hamburger menu is open.

    The layout starts to collapse into other elements around 760px so maybe try using the mobile / tablet version upto 700px and desktop after that?

    I think you've done a good job, just a few things to look at for future projects

    Marked as helpful
  • P
    Chris Eden•60
    @Chriseden83

    I find it's best to build using a mobile first approach then use @media adding a breakpoint for different devices but that's my preference.

    Take a look at https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/ this should give you an insight into responsive design. Kevin Powell also has some great youtube videos on responsive design.

    It's best to add the background images inside the CSS file using background-image property as you have one image for mobile and one for desktop devices.