Solutions Timeline

  • Desktop design screenshot for the Four card feature section coding challenge

    box-shadow, position

    • HTML
    • CSS
    Submitted

    Hi there, I was wondering if solving the challenge using the grid html element is a valid way to do so, or I shouldn't style the page layout with html..

  • Desktop design screenshot for the Profile card component coding challenge

    Flex, Display, Position

    • HTML
    • CSS
    Submitted

    It's not 100% matching but I did my best :'(

  • Desktop design screenshot for the 3-column preview card component coding challenge

    HTML & CSS Flex - 3 column preview card

    • HTML
    • CSS
    Yue20
    Submitted

    I designed the column view/mobile version first and then added a media query 'for viewports bigger than 376px...' do you think this approach is ok?

    Any tips to improve this code? Thanks!

  • Desktop design screenshot for the URL shortening API landing page coding challenge

    React + SASS + Font Awesome

    • HTML
    • CSS
    • JS
    • API
    Glen245
    Submitted

    Used bitly API as shrtcode was very slow. The trickiest part of this challenge was getting the main image of the person working to stick to the right side of the page but also keep a consistent margin on the left. I did eventually manage to achieve this but my solution is rather 'hacky', I would be very interested to hear what others did to achieve this!

    Cheers, Glen

  • Desktop design screenshot for the Stats preview card component coding challenge

    stats preview card using CSS Flexbox

    • HTML
    • CSS
    Submitted

    Which color to use to achieve the exact color of the image as shown in the preview of the challenge? Also what should be values of the opacity to do so?

  • Desktop design screenshot for the URL shortening API landing page coding challenge

    Shortly URL shortener using Next.js & styled-components

    • HTML
    • CSS
    • JS
    • API
    Submitted

    Hey!πŸ‘‹ This is my build on this URL shortening API challenge. I used Next.js here just to learn but then this magic happened. I figured it out that Next.js is just so awesome and sexy. It's so faaaassssttttt 🀘πŸ”₯.The hydration technique it uses is just marvelous and then the SEO comes after.OMG!! 🀯 Any feedback will be highly appreciated!✌️

  • Desktop design screenshot for the Testimonials grid section coding challenge

    Just a little Grid and flex

    • HTML
    • CSS
    Submitted

    Any feedback is welcome! Thanks

  • Desktop design screenshot for the Sunnyside agency landing page coding challenge

    Mobile first design with Sass and BEM

    • HTML
    • CSS
    • JS
    Submitted

    I had fun doing this challenge and it's a great way to review my fundamentals (HTML, CSS/Sass, and JS). Any feedback is appreciated!

  • Desktop design screenshot for the Launch countdown timer coding challenge

    Coming Soon Page w/ Countdown Timer (Grid And JS)

    • HTML
    • CSS
    • JS
    Submitted

    Hello World,

    This challenge required an understanding of setting dates and getting time in milliseconds, setInterval, clearInterval and just generally how to calculate days, hours, minutes and seconds from milliseconds.

    So I went ahead and obtained that understanding and Boom!

    Coming soon on the WWW baby!

    If something catches your eye, something that can be improved upon, especially if you saw the code, you know what would be great? Some feedback!

    Alright keep that keyboarding clicking and clacking!

  • Desktop design screenshot for the Huddle landing page with a single introductory section coding challenge

    Used the basic css and html knowledge I knew

    • HTML
    • CSS
    Submitted

    Please inform me how was that. And could you all please tell me why is the image not displayed in the live url.

  • Desktop design screenshot for the Fylo landing page with two column layout coding challenge

    My first mobile first workflow solution ^^

    • HTML
    • CSS
    Submitted

    Hi. This is my first solution using mobile first workflow and was happy with it^

    At first, I was thinking a lot on how to properly make the desktop design since I will start mobile, but as soon as I create the first section and transition it to desktop design, I found it relatively easy and was happy about it. From now on, starting always in mobile first so ba-bye desktop first :(

    If there are any issue and recommendation, would be really glad to hear it^^

  • Desktop design screenshot for the Profile card component coding challenge

    HTML & CSS Profile Card Design

    • HTML
    • CSS
    Submitted

    Any feedback is appreciated!

  • Desktop design screenshot for the Easybank landing page coding challenge

    Used Sass and this is my first ever full landing page.

    • HTML
    • CSS
    • JS
    Submitted

    Used sass and Bem for this, let me know what can i improve on.!

  • Desktop design screenshot for the Article preview component coding challenge

    Mostly used flex and used absolute positioning for the popup.

    • HTML
    • CSS
    • JS
    Submitted

    Any feedback is appreciated!!

  • Desktop design screenshot for the 3-column preview card component coding challenge

    Mobile first using CSS

    • HTML
    • CSS
    Submitted

    I'm improving my clean code with css :) some feedback would be wonderful :)

  • Desktop design screenshot for the Single price grid component coding challenge

    single-price-grid-component (HTML and CSS)

    • HTML
    • CSS
    Submitted

    Hello, this is my 7th challenge and first time using grid layout this challenge is so fun and it takes 3 hours for me to complete this challenge.

    Feel free to drop your suggestion or feedback. ^^

  • Desktop design screenshot for the Stats preview card component coding challenge

    Stats Preview

    • HTML
    • CSS
    Submitted

    I will be glad to know some issues in my work and some good suggestion as am a newbie

  • Desktop design screenshot for the Social media dashboard with theme switcher coding challenge

    Social Media Dashboard using Bootstrap/Sass/Javascript

    • HTML
    • CSS
    • JS
    Submitted

    This is my first solution in a while. This one had some tricky parts and I have questions for the community.

    -How can I make the toggle transition smoother? I want to make the dark/light modes transition and not just switch immediately.

    -I struggled with the top border gradient. Is there a way to tap into the border-top-image?

    -How would I go about making the green/red color stat at the bottom of each card more dynamic, as if it were a real-life situation. So the logic is something along the lines of "if this contains up arrow, color green, if this contains down arrow, color red".

    Happy coding everybody :)

    -Matt

  • Desktop design screenshot for the Social proof section coding challenge

    Social proof section challenge with Html and Css

    • HTML
    • CSS
    Edy50
    Submitted

    I would appreciate any comments to improve and apply it in future coding

  • Desktop design screenshot for the Huddle landing page with a single introductory section coding challenge

    Huddle Landing Page (Flexbox & Grid)

    • HTML
    • CSS
    Submitted

    I would love tips on getting the background image to look the way it is intended to without editing the svg myself. Any other feedback is also appreciated!

  • Desktop design screenshot for the Job listings with filtering coding challenge

    Job-listing site using HTML, SCSS and vanilla JavaScript

    • HTML
    • CSS
    • JS
    Submitted

    I used vanilla JavaScript for the functionality, but it is quite verbose and definitely needs refactoring - would love some constructive feedback on this!

  • Desktop design screenshot for the Stats preview card component coding challenge

    html, css flexbox

    • HTML
    • CSS
    Submitted

    please feel free to add any feedback about anything

  • Desktop design screenshot for the Stats preview card component coding challenge

    First challenge only with HTML and CSS.

    • HTML
    • CSS
    Submitted

    hello, I am Braian. I'm just beginner but I'm trying my best to comprehend how to create responsive websites with media queries. for this first challenge I committed some mistakes trying to make the cellphone version of the page. I just couldn't put that image in the upper side of the main container. if someone could give some advice, I would really appreciate it.

  • Desktop design screenshot for the Testimonials grid section coding challenge

    Testimonials grid section

    • HTML
    • CSS
    P
    Submitted

    Definitely got lots of practice with grid on this project. For some reason the right most card is sticking slightly out from the bottom of the rest of the cards on the solution comparison, but I'm not sure what is causing it since the live site doesn't have that problem, but otherwise this project went pretty well.

    Tips/feedback always welcome.

Slack logo

Join our Slack community

Join over 50,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!