All solutions

What are you most proud of, and what would you do differently next time?

I learned to tweak and rename the design containers in figma to make it easier to translate it to html code structure.

  

    
      Reliable, efficient delivery
      Powered by Technology
    
    
    Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful

  

  

    
      Supervisor
      Monitors activity to identify project roadblocks
      
    
    
    
      Team Builder
      Scans our talent network to create the optimal team for your project
      
    

    
      Karma
      Regularly evaluates our talent to ensure quality
      
    
    
    
      Calculator
      Uses data from past projects to provide better delivery estimates
      
    

  
  

What challenges did you encounter, and how did you overcome them?

I found very enjoyable to create a shifting layout using the grid property.

.cards__container {
  gap: rem(30px);
  grid: 
  "    .    t    .    "
  "    s    t    c    "
  "    s    k    c    "
  "    .    k    .    "
  ;
}

What are you most proud of, and what would you do differently next time?

• Mixins for Media Queries

I'm very happy to be able to use my mixins @include mobile-media-query(1440px) and @include desktop-media-query(374px). From now on this is how I'm going to create my media queries.

What challenges did you encounter, and how did you overcome them?

• Image Wrapper

I learned the benefit of wrapping a container on my img

In this particular design, it was needed because resizing the image itself did not reflect the design. I needed to set a smaller container size, added overflow:hidden; to hide the extra contents, and also add display grid to be able to set justify-content: center; to the cropped image.

.blog-image {
  width: 100%;
  height: rem(200px);
  border-radius: rem(10px);
  justify-self: center;
  justify-content: center;
  overflow: hidden;
}

What are you most proud of, and what would you do differently next time?

I'm very proud of the hard work I put it to reverse engineer the design image in .xd for accurate measurements.

I'm immensely happy that I've gotten the output so close to the design without a provided figma file.

Now that I have a pro subscription, I'll be relying on the provided .fig files.

It really helps a lot when you no longer need to think about the design layer and just focus on code.

My respect goes out to all the UI/UX designers out there 💓

Do you know of any other functions that you personally use to make life easier? I really had fun creating a simplified SASS file here for convenience functions. The absence of partials is as intended because of the simplicity of this challenge so I would like to receive any feedback aside from that.

I don't know why, but it's oddly satisfying to watch the focus state cycle when you press the tab key. https://i.kym-cdn.com/entries/icons/original/000/006/077/so_good.png