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

    Todo List with Backend Task Data and Drag&Drop ☝

    #accessibility#cube-css#vue#vuex#django
    • HTML
    • CSS
    • JS

    1


    Did the frontend for this a while ago but never got round to publishing because I couldn't work out how to get the front end to communicate properly with the back end. Went back to this after getting my first full stack app working earlier!

    Backend in separate repo here: https://github.com/fraserwat/vuengo-todo-list-backend

    Any ways I could have improved this v much appreciated!!

  • Submitted

    Full Stack Crowdfunder App w/ Django REST API

    #accessibility#cube-css#nuxt#vuex#django
    • HTML
    • CSS
    • JS

    0


    This is my first full-stack app, so any pointers there would be very much appreciated!

    Had my backend in a separate repo, which is at https://github.com/fraserwat/frontend-mentor-crowdfunder-app-backend

    Pleased with this one!! 😇

  • Submitted

    D3 Expenses Component

    #cube-css#d3#vue#accessibility
    • HTML
    • CSS
    • JS

    0


    First project I've used D3 for. Kinda had to hack together proper styled tooltips with some javascript and as a result they don't really react well to changing width, is there an easier way to do this?

  • Submitted

    Interactive Rating Modal (Nuxt.js)

    #accessibility#cube-css#nuxt#vue#sass/scss
    • HTML
    • CSS
    • JS

    1


    First time I've used Nuxt.js. Quite easy to use once you work out how to deploy properly!

    Not sure what the parsing error on the HTML validation is about though, presumably a compilation issue?

  • Submitted


    Been working on this one on and off for ages. As a result the code is a bit messier than it usually would be. But I finally got the animation working! (in the end I just decided to look for a tutorial, but even then it probably took a couple hours)

    My pseudoelements still aren't working right, they disappear under the animated divs (even though they have a higher z-index?)

    Anyway, any suggestions on how to fix that (or improve generally) v much appreciated!

    Thanks!! 👍

  • Submitted


    Tried out a new methodology for this, CUBE CSS (there's a good walkthrough of the rationale and a sample web page here). Really really liked this, it's quite utility focused but you don't end up with having to remember 1,000 utilities and make your HTML look incomprehensible like you do with Tailwind (but maybe I'm just using Tailwind wrong!). I feel like my CSS is less repetitive and I feel like I wrote less of it than usual (although that might be due to the relative lack of complexity in the project, and would be difficult to measure given the amt of auto generated classes in the config).

    Still going to take a bit of getting used to but I think I'm going to bring this more into my CSS more generally (it works really nicely with SASS).

    Towards the end I think I got a bit hacky and there's probably a better way I could have done the layout for Desktop than making the hero image and the stats list position: absolute... Any ideas here?

  • Submitted

    Creative Single Page Site

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

    0


    This had a few tricky bits in this. I guess what I'm interested in here is if there's a way I should have gone about this more in line with best practices. Felt a bit hacky in places...

  • Submitted

    Art Gallery 2 Page Website

    #accessibility#vue#sass/scss
    • HTML
    • CSS

    0


    This was good practice with using images, which is something I often struggle with. There are probably more elegant ways I could have done the hero (background) image and its responsiveness but got there in the end. Is there a better way I could have done this?

    mix-blend-mode is quite a cool function!! 😀 Any other feedback v much appreciated!

  • Submitted

    Github Search App w/ Axios & VueX

    #axios#vue#vuex#accessibility
    • HTML
    • CSS
    • JS
    • API

    1


    Had this lying around half-finished for a while but been learning state management (VueX) recently so seemed like the perfect opportunity to use that for the user data handling. Getting it working asynchronously was hard!!

    Any feedback v much appreciated!

  • Submitted

    QR Code

    • HTML
    • CSS

    1


    more of a timed project this one. 13 mins from start to deployment.

  • Submitted

    URL Shortening - first VueX project! 🚀

    #accessibility#styled-components#vue#vuex#sass/scss
    • HTML
    • CSS
    • JS
    • API

    0


    Liked this one. Took a while to get the hang of state management, but you can quickly see how it comes in handy even for simpler projects (in terms of data needs) like this.

    I'm sure there's a more elegant way I could have done the hero image, couldn't get it to play nice without shrinking the hero content or messing with the screen widths. Got there in the end, but is there a better way of doing this?

    Any other advice v much appreciated!!

  • Submitted

    Bookmark Landing Page w/ CSS Animations 🎨 (but messy pseudoelements?)

    #accessibility#sass/scss#vue#styled-components
    • HTML
    • CSS
    • JS

    1


    After a nice break over Christmas, thought I'd ease myself back in with a single-page app.

    Quite pleased with this one, there are a few things I think turned out quite well (none of the animations on the FAQ/feature images/form use javascript!), a few things I think turned out less well (the pseudoelements don't seem right). Seems a bit messed up on the preview but can't replicate in-browser so assume its a rendering thing

    Was good to get a bit of practice using CSS Keyframes, and I think I'm going to start thinking about workflow going forward and taking a more modular approach (form validation was essentially stripped off an earlier project I did). Instead of writing my 100th hamburger menu in a few days, I now have a nice Vue component I can plug in and basically just adjust the list items and CSS accordingly.

    But yes, any tips on how to get that kind of pseudo-element behind the hero image and the features image scaling properly at different screen sizes v much appreciated!

  • Submitted


    Extended the challenge to add a search functionality for the different filters! Quite pleased with how already active filters appear when they come up in search - proud of that one!

    Lots of tricky stuff here around comparing objects with objects, there's a few best practice things I'd do differently next time around, learnt a lot doing this one.

    Only bit I couldn't get right in the end is I want my search bar to keep its inline-block placement giving it that element of flexibility, but for the size of the <input> element to equal the remainder of the line. How it is now you can click within what visually makes sense as the input, but it's beyond the rightward boundary of the <input> element. Tricky... 🤔

    Any suggestions on how I could improve this one v much appreciated!! 👍

  • Submitted


    This was a tough one!! 😄

    Tricky parts were getting the borders working at different page widths, and getting the Vue CLI to properly access the correct images in the public directory for the portfolio/inner pages. As the project pages are the same page with data and images populated with a query, I was trying to autogenerate the img urls with a method. This worked locally but caused havoc when deployed into production 😫

    In the end I put the image paths in the JSON file alongside the rest of the info on the page and it worked fine.

    This project was good to get the hang of more complex routing. As ever, any way I could have improved on this v much appreciated 👍😎

    says there's an accessibility issue on one of the buttons, but ive got it aria-labelled with a title how the documentation says it should be so should be fine 🤷‍♂️

  • Submitted


    Issue I had here was with the testimonial on desktop view. Not sure how I'd approach having an animated slide in for the carousel. In the end its still functional, but I think that would be a cool way to expand it...

  • Submitted


    This was an interesting one to do. Was able to work on my Javascript / Vuejs with the live countdown, and then learnt how to do Routing by making it a multi-page app. Also had some fiddly z-index stuff in and some slightly more complex form validation than I'm used to! 🚀🥳

    I'm sure there's bits I could have done better - any suggestions very much appreciated!!!! 👍

  • Submitted


    Any pointers v much appreciated! 😎👍

    Accessibility something I've had a bit of trouble getting right, so anything I could have done better around aria attributes, semantic HTML etc would be great (do I really need the logo wrapped in something else? Seems like a screen reader would pick it up as an image without any added content needed?).

  • Submitted


    Nice and straightforward, but I couldn't quite get the orange filter on the image after the hero section to match the figma files on this. The darker parts are much more defined on the original. Any suggestions on how to get there v much appreciated!

    Also on forcing line breaks on titles in a few places is there a simpler way of doing this than with <span> tags?

    Aside from those questions, any tweaks that could have been made v much appreciated!! 😎