Skip to content
OverviewSolutions
12
Comments
6
Dragos Popescu
@ospop

All comments

  • Jen•1,230
    @En-JenSubmitted over 3 years ago

    I would love feedback on this challenge! This is my first multi-page challenge and I am still fairly new to React, therefore any React-related feedback would be highly appreciated. What do you think of the file structure and the way the code is organized? Am I splitting up my components appropriately? How is my use of styled-components? This is also my first challenge where I tried to focus a lot on best accessibility practices. Please let me know about accessibility areas I could improve on.

    I wrote a detailed README for this project so feel free to check that out, but I'll just summarize a few of the things I implemented:

    • a skip link
    • smooth scroll animation
    • a sticky Sidebar in the plan page (only on laptop breakpoint and up)
    • a responsive Spacer component to add whitespace between components instead of using margins

    Coffeeroasters Subscription Site | React | Styled Components | a11y

    4
    Dragos Popescu•320
    @ospopPosted over 3 years ago

    The buttons popping up on hover, the animations that occur while scrolling and overall the attention to detail makes the site so much more welcoming. Great job! and props for the accesibility stuff.

    1
  • Dragos Popescu•320
    @ospopPosted over 3 years ago

    First attempt! While working on this project I realised I'm not using css selectors as often as I should, they are powerful, especially in situations where you want to avoid JS.

    0
  • Dragos Popescu•320
    @ospopSubmitted almost 4 years ago

    In this challenge I made use of pseudo elements and background-image/attachment/etc. The only issue I had was adding a margin to the rating stars individually. I didn't want to mark them up in html with another div so I decided to let them in this state.

    Is there a way to individually style ::before elements?

    Social Proof Section

    2
    Dragos Popescu•320
    @ospopPosted almost 4 years ago

    Hi!

    This is a better way to style the stars individually but since there is no content inside the element it is not possible to align the stars with the text and it also removes the ability of moving them beneath the text on media query. This way the stars can't respond to width changes.

    I updated the media queries though, you were right about the threshold. I only looked for the name and status of each person not to move on 2 rows each, I try to avoid having 4 rows of text with one word each.

    Thanks for the input!

    1
  • Dragos Popescu•320
    @ospopPosted almost 4 years ago

    I think grid-template-columns: 1fr enabled grid-template-areas to work in your case. I only updated grid-template-areas in my media query. I will try this next time I use grids. Thanks for the input!

    0
  • Dragos Popescu•320
    @ospopPosted almost 4 years ago

    Hi!

    The 'accordion' elements don't roll back after you click outside the container box. I think the user expects to go back to the original state of it when hovering or clicking outside the stack. Maybe add one more event listener?

    Everything else seems to be on point, great job!

    2
  • Iqbal•135
    @Firdausi-IqbalSubmitted almost 4 years ago

    challenge accepted! can somebody tell me is there any point in my code that i can make more efficient, without using so many class? and i want to know is using many class in css is good or bad thing? since i barely new in this coding skill, i will pretty much appreciate your answer. Thank you

    Profile Card Component using basic html and css

    2
    Dragos Popescu•320
    @ospopPosted almost 4 years ago

    Pretty cool, you actually took the time to align the background circles.

    Try styling the hr with this:

    hr{
      height:1px;
      border:none;
      background-color: rgba(179, 179, 179, .5);
}
    1