Skip to content
OverviewSolutions
6
Comments
5
P

Ed Johnson

@edjohnsondevLondon, United Kingdom170 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Product Preview Card, Flexbox

    P
    Ed Johnson•170
    Submitted 2 months ago
    1 comment

  • Bento grid, CSS Grid

    #sass/scss
    P
    Ed Johnson•170
    Submitted 2 months ago
    0 comments

  • Recipe page, SCSS mixins and reusable styling

    #sass/scss#bootstrap
    P
    Ed Johnson•170
    Submitted 2 months ago

    If anyone has any suggestions for improving this, I’d love feedback on how I’m organizing my SCSS especially when it comes to managing maps, functions, and mixins for things like colors, spacing, and breakpoints. I’m also interested in any tips for making my mixins or utility functions even more flexible or efficient. Any advice or best practices on structuring larger SCSS projects would be super helpful!

    1 comment

  • Social Links Profile, Bootstrap grid with custom content

    #bootstrap
    P
    Ed Johnson•170
    Submitted 2 months ago

    I don’t have any major pain points right now everything’s working as expected. But I’d love to hear what people think about using html { font-size: 62.5%; } (so 1 rem = 10 px) for consistent sizing. Any pros, cons, or alternative approaches?

    1 comment

  • QR component solution, html css

    P
    Ed Johnson•170
    Submitted 2 months ago

    I don’t have any major pain points right now everything’s clean, semantic and responsive. But I’m always open to quick wins or pointers. If anyone spots opportunities for performance tweaks, accessibility enhancements, or subtle UI polish I’ve overlooked, I’d love to hear your suggestions.

    1 comment

  • Blog preview solution with Flex, clamp() and Semantic HTML5

    P
    Ed Johnson•170
    Submitted 2 months ago

    I’d appreciate feedback on the accessibility of my semantic HTML specifically whether my <header> and <footer> structure, use of <time>, and focus outlines meet best practices for screen readers and keyboard navigation.

    I’m also curious if my fluid typography approach (the exact clamp() calculations) is maintainable does it make sense to someone else, or would a more straightforward fallback strategy for older browsers be better?

    Finally, I’d welcome suggestions on optimizing my SCSS organization (e.g., nesting levels, variable usage) and ensuring the box-shadow effects render consistently across different browsers and devices.

    1 comment

Latest comments

  • P
    Dudley Seddon•50
    @Dudamania
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the way of aligning the modal vertically. Next time I would look at other ways of overcoming this challenge by use of other methods.

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

    The main challenge I encountered was vertically centering the div modal container the qr code and content. I overcame this by using position absolute, relative to the direct parent container. then aligning with top, left and transform.

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

    Better methods of vertically centering divs and other sections.

    Used bootstrap as well as custom css to create layout to match design.

    #bootstrap#sass/scss
    1
    P
    Ed Johnson•170
    @edjohnsondev

    Nice work! And good one for using transform to bring it back by 50% of what you moved!

    Couple links to help you with some other methods to do this as with something like this it's a valid solution to use. But as position: absolute; removes the element from the normal flow it'll cause more work with responsiveness as it's essentially no loner in the container you have. It's great if you want to layer things on top of another, like a blog post with a tag for the category and so on.

    Theres a couple other methods i'd suggest.

    display: flex; This allows you to position the element or elements anywhere inside the container. If you've had a look at Bootstrap it's what that uses.

    To centre something inside the container both vertically and horizontally you'd do this

    .container {
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center;     /* vertical centering */
}

    Take a look at: Flexbox Froggy. This is a handy tool to pick it up!

    You've also then got display: grid;

    Which turns your container into a two dimensional grid. Settings how many rows/columns as you want and then placing each child element in that cell.

    If all you need is to centre one thing (or line up a simple row/column), flexbox is quicker and easier.

    When your layout is more complex / multiple rows and columns that need to rearrange themselves at different screen sizes. Grid makes it easy to change where things sit when the design “stacks” or shifts on smaller screens.

    Check this out: CSS Grid.

    Marked as helpful
  • Merlcayz•10
    @Merlcayz
    What are you most proud of, and what would you do differently next time?

    I am proud to have completed this challenge sincerely. I had given up a number of times.

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

    My biggest challenge was deploying the code to my Github page. Another such challenge were the media queries.

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

    I was not able to align the social links to the bottom-left for the maximum screen.

    I would need assistance on this if possible

    Landing page using HTML and CSS

    #accessibility#typescript
    1
    P
    Ed Johnson•170
    @edjohnsondev

    This is looking really good, nice work!

    So you have pretty much done it right for the social icons.

    .hero-section > * { flex-basis: 50%; flex: 1 0 20rem; }

    flex is shorthand for grow, shrink, and basis. So if you changed 20rem to 50% the social icons should sit below! Then just tweak the social icons to text-align: right; and you should be good!

    Then when you want to stack this on tablet/mobile inside the media query you can do flex: 1 0 100%

    I hope this helps!

    Marked as helpful
  • helloamresh•70
    @hellomresh
    What are you most proud of, and what would you do differently next time?

    I’m most proud of successfully centering the card using Flexbox and replicating the design with accurate spacing, colors, and typography. It was my first time fully implementing a UI from a design, and seeing it match the original made me feel confident.

    Next time, I’d focus more on making the layout responsive across various screen sizes and explore using CSS variables for better consistency. I'd also try organizing the CSS into reusable utility classes for cleaner code.

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

    One of the main challenges was centering the card both vertically and horizontally on the page. I initially struggled with traditional methods like margin and positioning, but after learning about Flexbox, I was able to center the content using display: flex, justify-content: center, and align-items: center. I also had difficulty with spacing and alignment inside the card, which I fixed by carefully adjusting padding and using text-align: center.

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

    I’d like help improving the responsiveness of my layout so it looks good on all screen sizes. I'm also interested in learning best practices for organizing CSS, especially how to write cleaner, more reusable styles. Additionally, feedback on how to improve accessibility (like proper use of alt text or ARIA roles) would be really valuable.

    Used HTML and CSS Flexbox to center and style a responsive QR card.

    2
    P
    Ed Johnson•170
    @edjohnsondev

    This is looking really good!

    When organising your CSS, you have two main options for managing things like colours and spacing:

    • reusable classes: You could setup classes for the 2 different font styles, and then apply them to the HTML wherever needed.

    • Root-level variables: Setting up root variables means you tweak a value in one place and the change ripples through your whole stylesheet.

    It's also handy when setting these up to follow the Design System, in the Figma file under pages you'll find this. By naming your variables or utility classes exactly as they appear, if something is changed you can quickly go through and find them without having to look for the hex code etc..

    So for example:

    :root { --slate-900: #1F314F; }

    Then you can use these like

    .card h2 { color: var(--slate-900); }

    I hope this helps!

    Marked as helpful
  • P
    Ed Johnson•170
    @edjohnsondev

    Really nice work! Your use of <section> and clear <h2> headings under a single main <h1> gives you a solid, SEO-friendly structure. If you wanted to be extra picky about semantics and accessibility, you could swap your <div id="menu"> for a real <main> element, turn that inner <main> into an <article>, and move your <header> inside that <article>. This makes it crystal-clear to browsers, screen-readers, and search engines where your primary content starts and how it’s grouped.

    Marked as helpful
  • P
    EwkaKonewka•70
    @ER1994
    What are you most proud of, and what would you do differently next time?

    Is there anything that could be improved? Do you notice any bad practices?

    Blog preview

    1
    P
    Ed Johnson•170
    @edjohnsondev

    Overall solid work your card layout, spacing, and typography align really well with the design. One quick win: take advantage of the interactive prototypes in Figma to preview the hover state, where the box shadow should deepen slightly on hover. Implementing that subtle shadow increase will make your component feel even more polished.

    Marked as helpful