Skip to content
OverviewSolutions
3
Comments
2
P

Nicholas Crawford

@nicholas-crawford50 points

I'm just building some things on this site for fun.

Latest solutions

  • Responsive Blog Preview Card

    #pure-css
    P
    Nicholas Crawford•50
    Submitted 5 days ago
    • Does this need any changes for other devices?
    • Anything I could do to make this cleaner?
    • Are there any unnecessary or conflicting styles?
    • Does the site look and function consistently across different browsers?
    • Am I following current CSS and HTML best practices?
    1 comment

  • Accessible Recipe Page

    P
    Nicholas Crawford•50
    Submitted 7 months ago
    • Is my HTML semantic and properly structured? Are there any unnecessary divs or better tag choices?
    • How's the organisation of my CSS? Could I improve the grouping or ordering of my styles?
    • Are there any repetitive patterns in my code that could be simplified?
    • Does the site work well with keyboard navigation?
    • Have I used CSS variables (custom properties) where it makes sense?
    • Is my use of media queries appropriate for responsive design?
    • Are there any unnecessary or conflicting styles?
    • Does the site look and function consistently across different browsers?
    • Have I used any CSS properties that might need prefixes or fallbacks?
    • Am I following current CSS and HTML best practices?
    1 comment

  • QR code component

    P
    Nicholas Crawford•50
    Submitted about 3 years ago

    I would like to know if there is a more succinct way of making this particular solution?

    Are there some best practices I missed?

    1 comment

Latest comments

  • browniscoding•40
    @browniscodingSubmitted 6 days ago
    What are you most proud of, and what would you do differently next time?

    i most proud of manage to handle flex box settings

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

    it was a bit difficult for me to understand the usage of clamp.

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

    I am not sure whether clamp is suitable for this situation, or there should be better way to control font size without using media queries and clamp function.

    Semantic HTML5 markup & plain CSS

    #pure-css
    1
    P
    Nicholas Crawford•50
    @nicholas-crawfordPosted 5 days ago

    Good job!

    A few things I noticed:

    1. You probably don't need to wrap everything in <div>. You could definitely get away with just having <p> tags and wrapping only when you need it.

    2. I'd recommend adding a meta description in the header like this <meta name="description" content="Insert text here">. It's good for metadata and improves SEO. Not that you're putting this on a search engine but it's good practice.

    3. You have another challenge folder in the repo which you don't need. I'd add a line to remove it in the .gitignore.

    4. You don't actually need to use media queries in the css at all. You can set a max-width for the card have everything else scale if needed.

    5. You should use grid to centre the box for the screenshot. See here (https://css-tricks.com/centering-css-complete-guide/#aa-both-horizontally-vertically) You can use <html> as the parent and body as the child.

    6. Responsiveness is pretty good on all sizes except for the tag .blogTagBox. It seems to shrink when the size is small. You could have a <div> wrapper for a <span> and add you background color and padding in the span. Something like this:

    .div {
    padding: 50px, 0;
}

.div > span {
    background-color: yellow;
    padding: 20px 50px;
    border-radius: 4px;
}

    (This is obviously not to scale, just a hint. ;) )

    1. The design is a little wider than the design.

    Clamp is a little difficult to understand but great to learn. I think CSS tricks does a good job of explaining it. (https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/) If you want to play around with it, try this: https://fluid.style/type?min=2.25&max=4.5&min-bp=20&max-bp=77.5&unit=%22rem%22

    Let me know if you have any questions. Good job and good luck!

    Marked as helpful
    1
  • xiNeRoar•50
    @xiNeRoarSubmitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I would like to try some css framework next time

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

    not much challenge in this one

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

    best practice of the code

    Pure HTML & CSS QR code component

    1
    P
    Nicholas Crawford•50
    @nicholas-crawfordPosted 11 months ago

    Good use of vars and I like your use of flex.

    One thing to consider is that on a smaller, older phone, this might be a little big. It's something that might come up if your user base doesn't upgrade to the latest phones.

    Targeting elements instead of making CSS classes works in this case, but it would make things difficult in a larger application.

    Also, I think you need to increase the font weight or size a bit more to match the screenshot. (Not entirely sure which)

    Good attempt!

    0