Skip to content
OverviewSolutions
23
Comments
133
KapteynUniverse
@KapteynUniverse

All solutions

  • Submitted 4 days ago

    Sign-Up Form

    • HTML
    • CSS
    • JS
    1

    Any feedback is appreciated. Probably white texts on the light red background also has bad contrast but i can't see that on the dev tools.

  • Submitted 6 days ago

    Space tourism with some custom animations + framer motion

    • HTML
    • CSS
    • JS
    1

    Any feedback is appreciated.

    I feel like there is a way to create a reusable component for all pages to avoid redundancy, but I couldn’t manage it due to differences in order and styling.

    I wasn’t sure whether to use the or tag for the numbers on different pages. Since screen reader users will already know what page they’re on, I went with .

    I am very beginner to the React. Is the folder structure good?

  • Submitted 11 days ago

    Sunnyside Landing Page

    • HTML
    • CSS
    • JS
    2

    I tried using the tag for the modal in the final stage, but it caused styling issues that i couldn't fix, so i switched back.

    Any feedback is appreciated. Please tell me anything to improve or if i missed something.

  • Submitted 23 days ago

    E-Commerce Product Page

    • HTML
    • CSS
    • JS
    1

    Any feedback is appreciated.

    Just found a bug before posting, it is possible to focus some hidden element and modal with tab button.

  • Submitted 30 days ago

    Landing Page

    • HTML
    • CSS
    • JS
    1

    Any feedback is appreciated but i would especially like to get feedback about accesibility, semantics and grid.

  • Submitted about 1 month ago

    NFT Card Component

    • HTML
    • CSS
    0

    Any feedback is appreciated but i would like to get feedback about accesibility and semantics. Also i can see font family is correct on computed tab of the dev tools and can toggle on styles but for some reason on console there is a 404 error for the font.

  • Submitted about 1 month ago

    News Homepage

    • HTML
    • CSS
    • JS
    1

    I would like to get feedback about grid (had some troubles with imgs), accesibility and semantics. I didn't put aria-labels to anchor elements (except the read more button) because i tought they have enough text information inside them. Is that a right approach?

    Also one thing i couldn't manage is when the navigation bar opened, it is possible to focus background elements like read more button, news. with tab key, which i do not want.

  • Submitted about 2 months ago

    Contact Form

    • HTML
    • CSS
    • JS
    1

    I would like to see feedback about accessibility. There are a lot to digest in this learning path.

  • Submitted about 2 months ago

    Tip Calculator

    • HTML
    • CSS
    • JS
    1
  • Submitted about 2 months ago

    Time Tracking Dashboard

    • HTML
    • CSS
    • JS
    1

    I think only thing i couldn't manage is to change the background color of the card to the initial state when hovering the ellipsis icon.

  • Submitted about 2 months ago

    Newsletter Sign Up

    • HTML
    • CSS
    • JS
    1

    I like to do these basic validations with css instead of js but this time, this doesn't work. I couldn't figure out the reason

    input {
position: relative 
}

input:not(:placeholder-shown):invalid::after {
    content: "Valid email required";
    height: 16px;
    width: 16px;
    position: absolute;
    top:0;
    right:0;
  }
  • Submitted about 2 months ago

    Article Preview

    • HTML
    • CSS
    • JS
    2

    I think i am having trouble with images all the time. Couldn't adjust text section height like %70 of the card because img height didn't reduce ( height = 100% wasn't there at start ) Tried flex .3, max-height etc. Also couldn't find how to crop img either. Maybe overflow = hidden would work normally but here i used flex.

  • Submitted about 2 months ago

    Testimonial Grid Section

    • HTML
    • CSS
    1

    Need to work on grid more. Any feedback is appreciated

  • Submitted 2 months ago

    Four Card Feature Section

    • HTML
    • CSS
    1
  • Submitted 2 months ago

    Product Card Component

    • HTML
    • CSS
    1

    For the "PERFUME" word i used figcaption tag first but couldn't figure out how to put it right side on the desktop version.

  • Submitted 2 months ago

    Blog Preview Card

    • HTML
    • CSS
    0
  • Submitted 2 months ago

    QR-Code

    • HTML
    • CSS
    1
  • Submitted 2 months ago

    Sixth Challenge: Bento Grid

    • HTML
    • CSS
    1
  • Submitted 2 months ago

    Fifth Challenge: Sign-Up Form

    • HTML
    • CSS
    • JS
    1

    Are there range norms for media queries or it depends for every project? While doing this challange my approach felt very wrong.

  • Submitted 2 months ago

    Fourth Challenge: Interactive Rating Component

    • HTML
    • CSS
    • JS
    1

    Even tho i tried some deg values, couldn't manage to get exact gradient background.

  • Submitted 2 months ago

    Third Challenge: FAQ Accordion

    • HTML
    • CSS
    • JS
    1
  • Submitted 2 months ago

    Second Challenge: Recipe Page

    • HTML
    • CSS
    0
  • Submitted 2 months ago

    First Challenge: Social Links Profile

    • HTML
    • CSS
    1

    For some reason, I couldn't adjust the height of the card div. It was responding to the size of its child elements, so I changed 'Front-end developer and avid reader' slightly. Because of the start and end of the sentence now align better with the buttons, I think it looks better.