Skip to content
OverviewSolutions
18
Comments
4

Chee Kian Teoh

@teoh4770330 points

My name is Chee Kian Teoh, or CK in short. Currently 21, studying computer science as a sophomore in Wilfrid Laurier University, Waterloo. I have been learning to code for 2 years already, but started to get serious about learning it few months ago. I find code fascinating and fun to learn.

I’m currently learning...

Currently strengthen my front-end foundation: HTML, CSS, and JS.

Latest solutions

View more solutions

Latest comments

  • Chee Kian Teoh•330
    @teoh4770

    Hi Lucas,

    This is awesome ⭐⭐⭐

    I had done this challenge a few months before and struggled greatly during the progress. Instead of making more projects, I felt I should improve the foundation of HTML and CSS by looking at some good examples in Frontend Mentor. Luckily, I came across yours and learnt a lot from it.

    Just wondering, how do you practice your HTML and CSS and become so good at it? And do you need to fully commit to HTML and CSS first before learning about JS?

    Best, CK from Canada

  • Chee Kian Teoh•330
    @teoh4770

    I appreciate your efforts on making this project :) Mr David, just wonder how much time it took you to finish this project?

    Humble opinion: You can make it better ;)

  • Chee Kian Teoh•330
    @teoh4770

    Hi Khaled,

    In this case, I would start from the mobile design first, design the card from top to bottom. Then I would use media query to produce the grid layout.

    Mobile Design -> Desktop Design, this way you would saving yourself tons of time to media query stuff.

    To understand the media query, I would suggest one of the video of Kevin Powell (CSS guru for real) on Youtube called Responsive Design Made Easy, a 45 minutes video you can follow to see how he reproduce a web design from the ground up, from HTML to set the structure, to CSS to set the color and spacing, to eventually media query for complexity.

    this is the link : Responsive Design Made Easy

    I gain a lot of insight from it, which helps me restructure my thinking to approach the frontend mentor challenge.

    Sincerely,

    Chee Kian Teoh

  • Chee Kian Teoh•330
    @teoh4770

    I think using grid is a better and easier approach here, but my first instinct on achieving this layout is to use positioning style attribute.

    Firstly, at the desktop view, I set a max-height and max-width for the cards section and the cards themselves, and set the card container to relative position. Then, I position each cards with absolute positioning and translateX / Y, and adjust the position based on preview.

    For example, to position the supervisor cards, I set its position value to absolute, follow by top: 50%, which set the top-left corner part of the card to the left centre of the container. Then, to make sure the card is positioned exactly at the centre, I use transform: translateY(-50%) to position the card itself up of its own height.

    Follow by the same logic, you do the same thing to each of the cards, and you would eventually achieve the same layout.

    Best, Chee Kian Teoh