Skip to content
OverviewSolutions
14
Comments
13

Noel Hoppe

@noelhoppe380 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

  • Responsive Easybank Landing Page

    #bem
    Noel Hoppe•380
    Submitted 4 months ago

    In general: image styling and dealing with position: absolute

    1. Styling and placing .hero__img
    2. Is there a good way to have the same height on als pictures with class articles-card__img without destroying the ratio?
    0 comments

  • Bento grid challenge

    Noel Hoppe•380
    Submitted 9 months ago
    0 comments

  • Social Proof Section using Tailwind CSS

    #tailwind-css
    Noel Hoppe•380
    Submitted about 1 year ago
    1. Please check for right use of negative margins.
    2. Please check for HTML semantic structure.
    3. When should I use instead of (considering star's svg files)

    Edit: Colors are not äquivalent to design sheet

    0 comments

  • Preview card component using Tailwind CSS

    #tailwind-css
    Noel Hoppe•380
    Submitted about 1 year ago
    1. Is it good practice to use order properties?
    2. Project structure (Do I need .node_modules .package.json .package-lock.json .tailwind.config.js in my repository?)
    0 comments

  • Product Preview card using Tailwind CSS

    #tailwind-css
    Noel Hoppe•380
    Submitted about 1 year ago
    1. Considering Tailwind responsive classes in `` tag

    1. Considering files pushing in my repository: I don't need .idea, node_modules, package-lock.json, package.json, tailwind.config.js in my repository, right?

    2. Right use of `` tag?

    Edit: I used similar colors to the design template from Tailwind CSS

    0 comments

  • FAQ accordion

    Noel Hoppe•380
    Submitted about 1 year ago

    Can somebody check for:

    1. Right use of px, rem, em and %
    2. HTML semantic (nest inside )
    3. Handling images, making images responsive (especially my icon plus and icon minus images look wierd on small devices), dealing with background pattern
    0 comments
View more solutions

Latest comments

  • P
    Stefan Holmgren•220
    @stefan-holmgren
    What are you most proud of, and what would you do differently next time?

    The grid system was a bit complicated to get right for the desktop view... Managed it, but feels like it could probably be done in a more efficient way.

    But it's cool to be able to do so much stuff with it.

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

    The grid system, figuring out how to merge two cells together.

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

    Well, becoming more fluent with css :D

    Four Card Feature Section - grid-based

    1
    Noel Hoppe•380
    @noelhoppe

    Hi,

    1. Make your HTML cleaner:
    <h1>
Reliable, efficient delivery
<span>Powered by Technology</span>
</h1>
    1. Nice use of CSS variables
    2. Nice idea to get this color lines on top of the cards
    3. Use grid-template-areas property to simplify your code and use flexbox instead of grid in the cards
    Marked as helpful
  • Maryam Nasir•150
    @maryam-nasir
    What are you most proud of, and what would you do differently next time?

    I have newly learnt Tailwind CSS framework and used in this project for styling.

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

    The most challenging thing in my opinion is to guess the spacing between the elements, font weights, padding, etc.

    What specific areas of your project would you like help with?
    • What other efficient approaches can I use to design the same layout?
    • Any feedback on how my code can be improved in terms of code quality and accessibility?

    Social links profile component using Tailwind CSS

    #accessibility#tailwind-css
    1
    Noel Hoppe•380
    @noelhoppe

    Hi,

    1. Use min-h-screen on <main> to avoid bugs when the contents overflow
    2. Set p-10 to your card container because the padding is equal on all four sides
    3. "London, United Kingdom" seems to be a <p> tag
    4. Improve the link structure (use <ul> and <li>instead of <div>):
    <ul>
<li><a href=""></a></li>
...
5. Use flexbox in your card instead of using so much margin properties. 
Happy coding!
</ul>
    Marked as helpful
  • cloudpc7•180
    @cloudpc7
    What are you most proud of, and what would you do differently next time?

    I am most proud of learning about resposive design. I was able to perform this challenge and complete it using what I learned about working with mobile design and media queries.

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

    The challenges I face was getting the cards to line up correctly. I was able to overcome them by setting the template rows and columns using fractional units.

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

    I would like to know what I can improve in this design and if I need to make any changes in my media queries. I went back and forth between media queries to get it right but I would love the criticism and welcome any feedback on responsive design. Thank you

    Responsive Four Card Feature Using CSS grid and flexbox

    2
    Noel Hoppe•380
    @noelhoppe

    Hi,

    1. Each site should has only one <h1>tag. Suggestion to improve:
    <h1>
Reliable, efficient delivery
<span>Powered by Technology</span>
</h1>
    1. You dont need .header. Use instead headerin your CSS. Also use maininsetad of .card in your CSS
    2. grid-template-areas and grid-area can easily replace grid-row and grid-col. As conslusion your code is readable
    3. Why you have a empty *.js file in your project? :)
  • Mouwvfic•210
    @mouwaficbdr
    What are you most proud of, and what would you do differently next time?

    Learned some useful JS methods:

    .nextElementSibling .classList

    FAQ Accordion

    1
    Noel Hoppe•380
    @noelhoppe

    Hi, some suggestions:

    1. div.contentshould be <ul>
    2. div.sectionshould be <li>
    3. div.section-headshould be a <button>
    4. h3should be <p>
    5. event should target <button>
    6. Use ària-expanded, aria-controlson<button>`
    7. Use ària-hiddenondiv.section-details`
    8. Toggle attribute ària-expanded` on click and if (aria-expanded == true) button + div.section-details.classList.remove(hidde).
    Marked as helpful
  • darryncodes•6,350
    @darryncodes
    What are you most proud of, and what would you do differently next time?

    Having completed the original FAQ challenge it felt only right to complete the updated version!

    I tried to make this component as accessible as possible by:

    • using semantic html and the most appropriate interactive elements
    • styling the accordion with focus states to improve the experience for those who navigate the accordion using a keyboard
    • utilising aria-expanded, aria-hidden, aria-controls attributes
    What specific areas of your project would you like help with?

    Any accessibility specific feedback would be very welcome.

    FAQ accordion - HTML, CSS, & Vanilla JavaScript

    #accessibility
    1
    Noel Hoppe•380
    @noelhoppe

    Hi, some suggestions:

    1. Remove display: grid properties from body, main and footer and use
    display: flex;
flex-direction: column;
justify-content: center; 
align-items: center;

    and remove margin properties from main to center your FAQ container.

    Nice js!

  • Noel Hoppe•380
    @noelhoppe

    Hi, here are some suggestions:

    1. Try to use HTML semantic elements such as <main> instead of div.container
    2. body's width should be 100% by default
    3. With the use of CSS variables your code looks cleaner (color variables)
    4. Considering js: You can put line 7-9 and 15-17 in a function and can call this function. But notice you can do this project without any js because of use of <details><summary></summary><p></p></details>tag. This is how I solved this project. Maybe you have also some suggestions to my solution of this challenge in my profile. Thanks and happy coding!
View more comments