Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All solutions

  • Submitted

    FAQ accordion

    #accessibility#typescript
    • HTML
    • CSS
    • JS

    0


    Hey there,

    This is my solution to the faq accordion challenge. I've implemented it with basic HTML and CSS, no frameworks or libraries involved.

    To provide some nice animations, I used a little bit of TypeScript as progressive enhancement to transition the open/closed state of the details element. However, this works completely without any JavaScript enabled.

    The solution is completely responsive and focuses on accessibility and content declaration using schema.org to. It uses latest CSS features such as nesting and color-mix. Make sure to visit the live demo as the preview will be broken due to the latest Platform APIs being used.

    Let me know what you think :)

  • Submitted

    Blog preview card

    #accessibility#lighthouse
    • HTML
    • CSS

    0


    Hey there,

    This is my solution to the blog preview card challenge. I've implemented it with basic HTML and CSS, no frameworks or libraries involved.

    The solution is completely responsive and focuses on accessibility and content declaration using schema.org to. It uses latest CSS features such as nesting. Make sure to visit the live demo as the preview will be broken due to the latest Platform APIs being used.

    Let me know what you think :)

  • Submitted

    Social links profile

    #accessibility#lighthouse
    • HTML
    • CSS

    0


    Hey there,

    This is my solution to the social links profile challenge. I've implemented it with basic HTML and CSS, no frameworks or libraries involved.

    The solution is completely responsive and focuses on accessibility. It uses latest CSS features such as nesting. Make sure to visit the live demo as the preview will be broken due to the latest Platform APIs being used.

    Let me know what you think :)

  • Submitted

    Recipe page

    #accessibility#lighthouse
    • HTML
    • CSS

    0


    Hey there,

    This is my solution to the recipe page challenge. I've implemented it with basic HTML and CSS, no frameworks or libraries involved.

    The solution is completely responsive and focuses on accessibility and content declaration using https://schema.org to. It uses latest CSS features such as nesting.

    Let me know what you think :)

  • Submitted

    Age calculator app

    #typescript#vite#accessibility
    • HTML
    • CSS
    • JS

    2


    Hey there,

    This is my solution to the age calculator app.

    I built the application using HTML, CSS, and TypeScript. The TypeScript code is compiled and bundled through Vite. The CSS uses cutting-edge features, such as nesting, color-mix, and custom properties, hence the preview might be broken.

    My main focus was on building a maintainable and accessible form validation logic, utilizing constraint validation and ES6 classes. This approach incorporates best practices for form validation such as clear error states, error messages, and more.

    Let me know what you think :)

  • Submitted

    Huddle landing page with curved sections

    #accessibility#lighthouse
    • HTML
    • CSS

    1


    Hey there,

    This is my solution to the Huddle landing page with curved sections challenge. I've implemented it with basic HTML and CSS, no frameworks or libraries involved.

    The solution is completely responsive and focuses on accessibility.

    Let me know what you think :)

  • Submitted


    Hey there,

    This is my solution to the Newsletter sign-up form with success message challenge. I've implemented it with basic HTML and CSS, no frameworks or libraries involved.

    The solution is completely responsive and focuses on accessibility and a pixel-perfect conversion.

    Let me know what you think :)

  • Submitted

    Workit landing page

    #accessibility
    • HTML
    • CSS

    0


    Hey there,

    This is my solution to the Workit landing page challenge. I've implemented it with basic HTML and CSS, no frameworks or libraries involved.

    The solution is completely responsive and focuses on accessibility and a pixel-perfect conversion.

    Let me know what you think :)

  • Submitted

    Profile card component

    #accessibility#lighthouse
    • HTML
    • CSS

    1


    Hey there,

    This is my solution to the profile card component challenge. I've implemented it with basic HTML and CSS.

    The solution is completely responsive and focuses on accessibility and pixel-perfect design.

    Let me know what you think :)

  • Submitted

    E-commerce product page with React & TypeScript

    #react#typescript#vite#react-testing-library
    • HTML
    • CSS
    • JS

    0


    Hey there,

    This is my solution to the e-commerce product page challenge.

    The application is built with React, TypeScript, and Vite. Styling is done through CSS Modules, which are supported by Vite out of the box.

    For complex components such as dialogs and popovers, I went with Headless UI, which makes building these things much easier. Everything is completely responsive, accessible, and works as expected.

    My main focus for this challenge was to test everything thoroughly using unit and integration tests. I decided to try out Vitest in combination with React Testing Library and ESLint for static code analysis. The test coverage is at 100%. Working with Vitest was delightful, I'll definitely use it for future projects.

    Let me know what you think :)

  • Submitted

    Base Apparel coming soon page

    #accessibility
    • HTML
    • CSS
    • JS

    0


    Hey there,

    This is my solution to the Base Apparel coming soon page. I've implemented it with basic HTML, CSS, and JavaScript, no frameworks or libraries involved.

    The solution is completely responsive and focuses on accessibility, especially in terms of form validation.

    Let me know what you think :)

  • Submitted

    Dictionary web app with SolidJS

    #accessibility#solid-js#vite#typescript
    • HTML
    • CSS
    • JS
    • API

    0


    Hey there,

    This is my solution to the dictionary web app challenge.

    The application is built with SolidJS, TypeScript, and Vite. Styling is done through CSS Modules, which are supported by Vite out of the box.

    Everything is completely responsive and supports the font toggle as well as dark mode. By default, the user's preference is taken into account, meaning that dark mode will be used if the user prefers that. Both the dark mode and font settings are persisted in the browser's local storage for when the user visits the app the next time.

    One main focus of mine was accessibility; the dropdown, toggle, and input (including it's validation) are in accordance with WCAG 2.1 and the HTML is as semantic as possible.

    Let me know what you think :)

  • Submitted

    Interactive rating component

    #accessibility
    • HTML
    • CSS
    • JS

    0


    Hey there, this is my solution to the interactive rating component challenge. It's built in plain HTML, CSS, and JavaScript and contains a swiping animation after the rating is submitted.

    I also created a video which shows me solving this challenge: https://youtu.be/j12yejW6v1M

    Let me know what you think :)

  • Submitted

    News homepage

    #accessibility#lighthouse
    • HTML
    • CSS
    • JS

    0


    Hey there,

    This is my solution to the news homepage challenge. My goal was to make the markup as accessible and the design as close to Figma as possible.

    The HTML is enhanced by schema.org to add some structured data to each news article, optimizing it for search engines. The hero image is responsive and loads depending on the viewport's size, thanks to srcset and sizes.

    The CSS uses latest standards such as the media query range syntax, the new color function syntax, custom properties, variable fonts, and more.

    Everything was optimized for semantics and accessibility, especially the mobile menu. Some techniques used are focus traps, aria attributes, and media query change listeners. Let me know what you think :)

  • Submitted

    Single price grid component

    #accessibility#lighthouse
    • HTML
    • CSS

    0


    Hey there,

    This is my solution to the single price grid component challenge. My goal was to make the markup as accessible as possible and the design as close to Figma as possible.

    The HTML is enhanced by (schema.org)[https://schema.org/], marking the container as an offer with appropriate properties, such as name, price, and description.

    Style-wise, the challenge was built desktop-first, introducing a single breakpoint to break the layout for better mobile support. Let me know what you think :)

  • Submitted


    Hey there,

    This is my solution to the Huddle landing page. My goal was to make the markup as accessible as possible and the design as close to Figma as possible.

    The challenge was built mobile-first, using a bit of Flexbox and Grid for the layout. Global and local custom properties are used to write less CSS rules in breakpoints. Let me know what you think :)

  • Submitted

    GitHub user search app

    #accessibility#tailwind-css#lighthouse
    • HTML
    • CSS
    • JS
    • API

    0


    Hey there,

    This is my solution to the GitHub user search app.

    The markup is plain HTML and styling is done through Tailwind CSS. For the search logic and dark mode toggle, I wrote some plain JavaScript functions.

    Dark mode is implemented by toggling a class on the document element. The preference is stored in localStorage, so that the next time one visits the app it remembers the decision. If not set, a media query gets the system's color scheme, so that dark mode is used if it's enabled on the OS level.

    The app is fully responsive and has some basic error handling. Let me know what you think :)

  • Submitted

    Single-page design portfolio

    #accessibility#lighthouse
    • HTML
    • CSS
    • JS

    0


    Hey there,

    This is my solution to the single-page design portfolio. My goal was to make the markup as accessible as possible and the design as close to Figma as possible.

    The slider is powered by Flickity, a lightweight JavaScript solution for accessible, touch-friendly, and easy-to-use slideshows.

    Stylewise, the challenge was built desktop-first, introducing various media queries to break the layout whenever it started to look weird. Let me know what you think :)

  • Submitted

    Product preview card component

    #accessibility#lighthouse
    • HTML
    • CSS

    1


    Hey there,

    This is my solution to the product preview card component. My goal was to make the markup as accessible as possible and the design as close to Figma as possible.

    The HTML is enhanced by (schema.org)[https://schema.org/], marking the container as a product with appropriate properties, such as name, price, and category. The image is responsive and loads depending on the viewport's size, thanks to srcset and sizes.

    Stylewise, the challenge was built mobile-first, introducing a single media query to break the layout for better desktop support. Let me know what you think :)

  • Submitted

    Skilled e-learning landing page

    #accessibility#lighthouse
    • HTML
    • CSS

    0


    Hey there,

    This is my solution to the skilled e-learning page challenge. It's solved with pure CSS and HTML, nothing too fancy. Let me know what you think :)

  • Submitted

    Devjobs web app using React, TypeScript, and Vite

    #accessibility#react#react-router#styled-components#vite
    • HTML
    • CSS
    • JS

    0


    Hey there,

    This is my solution to the devjobs web app challenge. I've used React with TypeScript as the foundation, Vite is the build tool of choice. Navigation is done through React Router and the styling (including the dark/light theming) is achieved through Styled Components. The data is fetched using the native Fetch API Let me know what you think :)

  • Submitted

    Expenses chart component with Svelte and Chart.js

    #accessibility#svelte#vite
    • HTML
    • CSS
    • JS

    0


    Hey there,

    This is my solution to the expenses chart component challenge. I've used Svelte and Chart.js for the front-end and Vite as the build tool. The data is dynamic and read from the provided JSON file. Let me know what you think :)

  • Submitted

    FAQ accordion card

    #accessibility#sass/scss#lighthouse
    • HTML
    • CSS
    • JS

    0


    Hey there! This is my solution to the FAQ accordion card challenge. I used Sass in combination with accessible HTML.

    The FAQ section is powered by the details element, making it work without JavaScript by default. However, to enhance the UX with some nice transitions, I added a little bit of JavaScript to animate the opening/closing state of each question.

    Additionally, I used a combination of responsive images (via srcset) and CSS background-images to glue the illustration together.

  • Submitted

    3-column preview card component

    #lighthouse#accessibility
    • HTML
    • CSS

    0


    Hey there, this is my solution using simple HTML and CSS with custom properties.