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


    A hopefully simple solution for this challenge. I'll still tweak a few things before (probably) making a YT video on building this particular solution. I'll possibly add some accessibility-friendly bits and pieces once I learn a thing or 2 about adding them for something like a custom-toggle. If someone has any suggestions I'd welcome accessibility tips!

    Styling the <input type="range"> was simple and yet very 'long' since you have to replicate code for different selectors for chrome/mozilla and if you're bothered - IE. I wasn't bothered 😕.

    Cheers :)

  • Submitted


    Hey all,

    (Question on the bottom, summary on the top).

    Just one I did for fun. I realised I could practice building keyboard-accessible navigation with some thought given to tabindex and when to add/remove it from the collapsible links. Then I realised how badly I wrote my JS and refactored it to be more readable.

    I gave special attention to the transitions/animations for the header. You will see the collapsible menu-categories transition themselves from the direction/location of the buttons that activate them. I also added smooth transitions for the actual link-containers as well, the max-height, gap, padding and margin properties together is what makes the smoothness possible.

    Also learned about what exactly scrollHeight is and that it does not seem to include some aspects of the content, I believe it was omitting/excluding line-height of my <a>'s for example. It also ignores things like the gap property of any parent flex container. So I just wrote my own customScrollHeight variable. All in all I didn't expect to learn so much, as minor as it may seem at first. AWESOME project.

    I paid attention to making sure the grids I used were smooth. I did NOT pay attention to the background image for the hero, just sort of threw it in there with rough calculations, I'm sorry :(.

    Question: Does anyone have any good thinking-framework for working with CSS grid? Some sort of a mental model with which to follow and break grid-down? My current style is based on analysing the design and then just fitting the grid in, mobile first with an OK understanding of the various grid-units we can use for rows/columns. But beyond that it's laissez faire.

    Cheeeeeeers 😁

  • Submitted


    Another one!

    I was asked to make a video for this project with vanilla technologies so I just built it. Going to upload a video on my YT channel soon.

    One question I have and it's rather technical and requires a CSS geek 🤓:

    What would you say is the best practice for defining widths/heights?

    The way I've been thinking about it is that height should be set by the content + padding (box-sizing: border-box) effectively. And width should be similar with SOME rules. Perhaps you don't want it too wide so max-width. Perhaps not too small, so min-width. Otherwise I stick to using % whilst defining these rules or simply leaving elements be if they are display: block.

    Just curious.

    Cheers!

  • Submitted


    I wanted to do another project that might make me think about CSS grid, this seemed like the perfect one that wouldn't take too long :)

    Overall I always try thinking how I can make things responsive and looking as best as they can, on any viewport, with the smallest amount of code. The benefits of this approach are two-fold:

    1. The user experience overall is improved
    2. The readability of code is usually excellent. Usually. Or at least there isn't an overabundance of code that's not needed.

    That's what i did here, I think? I was pondering on whether I should have set the widths/heights of my grid-children or if the approach I went with of mostly using the grid declarations to declare them made sense. In the end I'm not sure. Might have to make a case study of this in the future where I write this code in 2 different ways.

    Anyway, cheers :)

  • Submitted


    Hi all,

    Another solution to a more beginner-friendly challenge. I wanted to take a crack at coding and explaining a challenge that had a smidge of JavaScript so I chose this one.

    Tutorial link if anyone is interested, feel free to criticise the code (and video??) if you wish 🙂.

    The only thing I struggled with was deciding how to best position the images. I ended up going with a mostly grid-approach alongside a bit of position: absolute

    In case you're looking for it, I didn't focus massively on accessibility (if at all). I mostly use FEM as practice for following design that's not my own, apologies!

    Cheers,

    Griz

  • Submitted


    Just another vanilla solution I did for fun, really love the simple design, reminds me of Tailwind with the color-scheme. I wanted to write it up to help share some CSS concepts with a few folks in FEM. Also ended up recording it so if anyone is interested in my thinking as I coded feel free to have a looksie.

  • Submitted


    Just thought I'd make a video covering this for no particular reason.

    Think I could have set the heading as a link, that was a mistake that I haven't gone back to correct yet but not a massive deal to me.

    If you have any interesting feedback, let me know 🙂

    Cheers!

  • Submitted


    Howdy!

    (Feedback requests on the bottom)

    Initially I wasn't sure what I could learn from this project as I have covered similar things in the past. Then it occured to me to build a custom search-modal and change the behaviour from the original design. I thought it'd be more interesting to build, sorry that it won't match the generated screenshot comparison 😁😅...

    A few fun items to mention:

    • I have added keyboard shortcuts to make this feel more 'appy'.
    • If you open up the search modal and use arrow keys and hit enter once you've selected a filter, it will work.
    • If you are on Mac/Windows the shortcuts will change from Ctrl/Cmd + S. I thought it only right to add this.
    • Added a VERY BRIEF custom scroll bar because why not.
    • I have found a jewel of 'filtering' an array with an array. The jewel is using .every() along with .includes().

    Super short example you can run in codepen:

    const filters= [1, 2, 3]
    const data= [1,3,4,5,6]
    const data2 = [1,6,8,4,2,3,9]
    
    const checkMatch = (filterArray, dataArray) => {
         return filterArray.every(filter => dataArray.includes(filter))
    }
    
    console.log(checkMatch(filters, data)) //returns false
    console.log(checkMatch(filters, data2)) //returns true
    

    I don't think that I spent a lot of time perfecting the design, I'll trust that it's close enough without too many errors.

    If I need help with anything it'd be criticism of my HTML. Could I have added more semantic HTML? If so, where and why? If you're really hot and bothered feel free to rip my javascript apart but I know fully well how tiring that is when the project is not yours 😅.

    Cheers!

  • Submitted


    Edit: I tried fixing the small styling variances but I'll stop. It seems (to me) that my figma design differs from the generated screenshot comparison.

    (Seeking advice on: automating a mosaic/masonry-layout without a library. This is a rather complicated matter so I don't expect a response besides resources that I might have already looked at (e.g.: the masonry library).)

    Alrighty - so I wanted to do something more interesting than just build this grid out and call it a day.

    What I have attempted is to build this with some scalability in mind, as if it was a 'real' component in a site. If we add dark or light to any particular .testimonial we will achieve a different kind of styling immediately. Suppose this data was coming from a JSON file with a given theme for a card. Then we can go one more layer deep and add a particular background-color utility class, for example ..bg-gray-300 or .bg-purple-500. We have now set a different background on top of the dark/light styling.

    I kept the font styling identical per dark/light testimonial. I also kept the borders around testimonial-author-images more minimal. If I spent more time on this project I would have added a few more utility-class type of scenarios that would style them more uniquely if a specific bg-col was chosen.

    I also made the quotation-mark into a utility class. So if you add highlight as a class to any given testimonial you will add a quotation mark. They differ according to dark/light background colors. The purple testimonial has its' own unique color since it was the original 'highlighted' testimonial.

    What I wish I spent time on: writing some JS to create a mosaic-layout with css grid that automatically plots the various testimonials according to the viewport but quite frankly I'm not ready to dive into that sort of Javascript yet. It would take too much time due to the various calculations I'd need to consider. So for now a simple grid with grid-template-areas will have to do.

  • Submitted


    Howdy!

    Another project I plan to do a video for. I mostly wanted to do this project to understand images, how their heights work, how their 'inbuilt ratios' automatically update their heights as the viewport expands horizontally.

    I also wanted to see how this plays into a grid solution and practiced a bit with grid-template-rows: min-content /// auto /// max-content. In the end it was a worthwhile project. I'll spend a bit more time polishing my understanding of my own solution - as weird as that sounds - and will attempt to record a useful video or two to use in replies for anyone who might be struggling with the concepts I explored.

    Cheerio 😁

  • Submitted


    Howdy gang,

    As a rule I avoid pixel-perfection and tend not to use heights to keep everything as responsive and scalable as possible.

    Another example of a basic component coded in the most responsive fashion I currently understand. If you look through the code and find any improvements that pop to mind immediately please share!

    I don't think that I used 'height' for anything in this project to keep it responsive. Whilst not going for pixel-perfection I got pretty close. Think the height of the entire component in desktop is 5pixels short, I left it as such 😁.

    Cheers,

    Rafal

  • Submitted


    Howdy!

    This looked awesome to make so decided to give it a quick try.

    I quickly realised that the biggest challenge is something I haven't attempted yet in this site: a fully responsive piece of code for a masonry layout, I don't like using libraries when I can avoid it so instead of using masonry (js) I will spend time making my own piece of code that works with CSS Grid - I might update this project once finished.

    This will take a bit more Javascript that I was willing to spend time on this week 😅, I got close but quickly reverted to a more 'manual' approach of getting close to the original design before I got obsessed.

    If anyone has dabbled with a masonry layout before and got very far, let me know please 😁, I'd love to bounce off my js thoughts against someone's brain.

    The rest was relatively simple. I think the interesting focus-point is always how to avoid 'fixed' sizes with CSS Grid, or CSS in general, and how far can we push for responsivity. More than anything I think this project armed me with a great set of questions that I will use in future grid-layouts. Opting more for min-content / max-content / fr units / minmax instead of just throwing out px / rem units around is the interesting and honestly FUN part of thinking with CSS grid.

    I have not attempted to be pixel perfect as I tend to avoid that these days to force myself to think in more responsive terms. Being very fixed on how close I am to something in pixels usually defeats this mindset quickly for me.

    Anyway, thanks for the fun and really calm design FEM 😁, I'm actually dying to see how other people will solve this challenge, I think I'm the first one ( 🥳 ), perhaps some neat masonry code will be applied 😋 or people will use more intelligent approaches to CSS grid than I did.

    Happy coding 😁

  • Submitted


    Howdy!

    Straight off the bat, I don't usually greatly care for background images so didn't spend time on that, just did 1 version by eye and left it.

    Most of my time I spent on CSS trying to ensure the card is as responsive and well structured as it can be, not to achieve a perfect card, but to ensure I'm maintaining best practices (as far as I understand them at the current time).

    Note: I avoid pixel-perfection as I try the sizing to be determined by the content, padding, margin and gaps.

    1. More content can be added and it doesn't break the design

    2. Whether this has a max-width of 350px or 500px, nothing breaks and everything remains responsive.

    3. I didn't use fixed height values anywhere outside of the body and grid-template-rows. This is because I try coding with the content creating the 'height' by itself. This is in effect more 'flexible' and dynamic.

    One thing I don't understand is how background-position works.

    To explain: lets focus on the top-left image. In order to make this position itself relative-to-the-body-center I had to use bottom-right, as opposed to the intuitive top-left. Top-Left made the background-image dissapear. Bottom-right, after setting it up, keeps it 'fixed'. To me this is extremely strange behaviour and I guess I'm missing some fundamental understanding in CSS 😯

  • Submitted


    Just another project I wanted to have access to as an example for newer developers as to some flexbox/css grid functionality, as well as clamp.

  • Submitted


    Howdy gang!

    I just decided to quickly code this up to use as examples. I've been trying to help newer coders with some CSS advice and a lot of people pick this challenge up. I coded it up to use within my explanations to re-enforce learning.

  • Submitted


    Howdy!

    (I completely ignored accessibility in this project. I was focused on dynamic routing and ssr, along with learning tailwind (which in itself 'made' me write worse HTML)).

    I had fun in this one. I haven't used SvelteKit and routing before nor have I tried Tailwind.

    Good news: Both are awesome. SvelteKit provided a great way to build the website and to create the product and products pages via dynamic-routing. That is building the pages with a data-file on click, with a soft touch of SSR.

    Tailwind was fun to learn, it didn't take very long which was nice. I particularly enjoyed how intuitive the classes felt. Whilst I find it weird to see such convoluted HTML I THINK that Tailwind provides more benefits than shortcomings.

    Let me know if you find any bugs :)

    G.

  • Submitted


    Hey all,

    Took my time with this one. I think overall it took me 3 weeks with a lot of refactoring.

    Key FEATURE (bug) 🤩: When you create a new account it will populate 3 default invoices into the app. For some reason random inline-styling is being added to them and changes their size to something ridiculously small. Just refresh and we're golden. No clue, sorry. Oh yeah, it doesn't always happen. So I can't replicate it on demand.

    Feel free to login with: username: [email protected] password: 123456

    Some things to points out:

    • If you delete all invoices and refresh you will trigger an automatic function that adds the invoices (locally as well as to firebase). Only when there are none left and the app starts from scratch. Thought it useful for testing purposes.
    • You can create a 'fake' user. Like '[email protected]', I just wanted the auth to work for testing purposes/simulation. Otherwise I would have probably added email-confirmation, but that was unnecessary for this.
    • I tried to be as close to the original design as possible so I did end up creating a custom datepicker, styling the sidebar, etc. I think overall the result is quite pleasing.
    • I did adjust how the Invoice Items look like in tablet/desktop mode as I didn't think the original design left enough space for larger numbers. I don't hate the final result 😅
    • I found a 'fun' little solution for the price input field per input item. When you click (focus) into it, it turns into an input type='number' and it takes the core value from the invoice-object (100000). When you focus:out it turns back into a string and goes through a function that converts it via toLocaleString (100,000.00). Thought this was a nice touch 🤡

    OVERALL... Great project for learning about data-flow, structure and general planning. I wish i spent more time planning everything as I did find multiple issues towards the end. But I'm super happy with this project, I think it's the biggest learning curve I've had (per project) from anything I've done so far.

    Any thoughts, suggestions, etc welcome.

    Cheerio

  • Submitted


    Howdy,

    Just wanted to mess about with this project, mostly in vanilla JS. Creating a bunch of cards from an array of objects, injecting header/footer with JS, etc. I chose this project for it since it was only 3 pages large, not quite sure it belonged in the advanced section.

    I'll be doing some basic code cleanup in the next few days just to see how many mistakes I've made but the overall result will remain identical.

    Small note: Arthur's positioning seems way off when comparing to the design, but the netlify link will show you that's not the case. No clue how to fix that bug 😅

    Happy coding 😁

  • Submitted


    Hi Community!

    Second project. Picked this one to practice SCSS architecture, reusing components and just generally writing SCSS as well as possible. Honestly it was a blast, I learned more about HTML + CSS in this project than anything else I've done to date in the last 12 months!

    Feedback would generally be criticism of the code. Semantic HTML, SCSS. I tried to fill out every single alt attribute this time round but perhaps I missed some, we shall see 😁.

    These are big asks so I don't expect anything, but if someone is curious enough about my code go nuts!

    The form page has some custom code where the 'placeholder' (it's actually a label) text moves upwards with reduced size and opacity when the input is either selected or filled.

    Happy Coding :)

  • Submitted


    Hi Community!

    Firstly: I had a time limit for this so I didn't have time to correct some images which means I only used the mobile and desktop version, skipping mobile. I did the proper fix on the pricing page just to see if I can do it.

    First challenge i took up after I learned about this service!

    I focused entirely on just practicing 2 things:

    1. Using someone elses design instead of my own. This was TOUGH. When I design I think developer-friendly I guess. So using another design forced me to use grid, was great.

    2. HTML/SCSS structure. I found it hard to order my SCSS in a logical way as this was the biggest project I've done to date. I'd love any feedback/criticism on this.

    I didn't focus on accessibility, apologies for that. By that I mean adding alt="" into my images, etc. I gave myself a limited time and struggled following another person's design. Ended up redoing a LOT of the HTML and SCSS within the week I coded this after work.

    Thanks for the awesome challenge to the designer, loved it.

    P.S. I wanted this to be imperfect as I struggle putting out work that feels unfinished. Tough but managed to upload it........