Subskill - Transport Society

Table of contents

• About

• Overview

  • Links
  • Screenshot

• My process

  • Built with
  • What I learned
  • What I can improve

• Me!

About

This is a web integration exercise that I realized from a desktop mockup which was provided to me by the company Subskill; it's a technical test that have for goal to validate my knowledge from a front-end point of view (precise integration, respect of the creation, animation, …).

I had to integrate and respect the design as closely as possible and imagine and then make the page fully responsive without a mockup provided beforehand

Overview

Links

• Figma : https://www.figma.com/file/JHpfKTPTi4VyQvBjIbAvYf/TEST-INTE?node-id=0%3A1
• Live Site URL : https://transport-society-yvelchrome.netlify.app
  

Screenshots

My process

Built with

What I learned

• It's the first time I made a landing page, by that I mean a page with multiple different sections; they were all requiring a different approach, it was a really great exercise that improved my skills by A LOT, especially in terms of responsiveness, I'll try to list some tips and tricks I learned :

  • Setting a width according to a number of defined characters (here 60) thanks to the ch unit :

    max-width: 60ch;

  • Setting a width or height of a grid element to it's max-content :

    grid-template: max-content/repeat(3, max-content);

    I kept using pixels or percentages to try to find the best width or height for each element but this is a way better solution; the element can take the space it needs without having to shrink or make its container take too much empty space. (since it doesn't adapt to the screen width however, it's needed to pay attention for it to not overflow.)

  • Using the clamp function to resize a length, a width or a font-size dynamically according to the screen width :

    font-size: clamp(0.5rem, 3.8vw, 0.9375rem);
    ||
    width: clamp(30ch, 60%, 44ch);
    
    /* If using a preprocessor like sass/scss, you can use the following syntax since those functions
    (min / max / clamp ) are not recognized when compiling as written above */
    
    font-size: #{"clamp(0.5rem, 3.8vw, 0.9375rem)"};
    ||
    width: #{"clamp(30ch, 60%, 44ch)"};

    This function takes 3 parameters, the minimum value, a default value and the maximum value. It's a really great way to make elements resize dynamically without having to use media queries.

  • This one is not about a specific function or unit but I learned a lot about media queries, I used them a lot in this project to make the page fully responsive (or at least the best as I could 😅); I think it's also a good part of my responsive learnings.

  • It's also the first time I made use of an API, I used here the Google map API to display a map and markers on the page.

To-do list

Everything I wanted to do is done 🥳

Me!

• LinkedIn - @Steven Godin

Some more of my front-end development projects here :

• Frontend Mentor - @yvelchrome