Skip to content
OverviewSolutions
31
Comments
4

Sang Le

@sqle157Edmonton, Canada520 points

I have finished my degree in the University, and I'm currently practicing on coding to improve my skills on Front-End Web Development. I'm looking forward to doing more fun challenges in Frontend Mentor

I’m currently learning...

I'm learning ReactJS recently, and most of my recent projects were done using ReactJS. I also applied SASS/SCSS in some of them as a practice to CSS predecessor. Aside from ReactJS, I intend to learn more about React Hooks and Redux, and in my future project, I will apply them into my code.

Latest solutions

View more solutions

Latest comments

  • Sang Le•520
    @sqle157Posted almost 3 years ago

    Hi,

    It's a really nice solution! I like the transition you made with framer-motion. I did the same thing with my solution on this challenge too but it wasn't as smooth as you did.

    1
  • Sang Le•520
    @sqle157Posted almost 3 years ago

    Hi,

    Congratulations on completing your challenge! For your question, you can try to use pseudo element ::after or ::before instead of having another img tag in your code.

    For example, this is how I'm gonna handle the image hover

    .art-div::after {
	content: ''; // you can also put the image as the content in here
	display: none;
	position: absolute;
	inset: 0;
	border-radius: 0.75rem;
	background: url(./images/icon-view.svg), hsl(178, 100%, 50%, 0.5);
	background-repeat: no-repeat;
	background-position: center;
}

.art-div:hover::after {
	display: block;
}

    I hope this answers your question!

    Happy coding and good luck with further challenges!

    Marked as helpful
    0
  • Sang Le•520
    @sqle157Posted almost 3 years ago

    Hi,

    Congratulations on completing your challenge! For your question, you can try to use min in your width so that it will change the width base on the smaller value.

    For example, your css can be like this

    .container {
   width: min(100% - 1.5rem, 450px ) // This will make the width of the container equals the width of the 
parent width minus 1.5rem on each side and it will apply when the screen is small

    This is a common way to define a container that wraps around all the content.

    I hope this answers your question, and have a nice day!

    Marked as helpful
    3
  • Sang Le•520
    @sqle157Posted about 3 years ago

    Hi,

    First of all, congratulation for completing this challenge. I think you did a pretty nice job, and I have some tips from my personal experience to help you organize your CSS.

    1. I see that you have some classes like middle, flex-type, text-accent, ... which are the utilities classes, you can group those classes into 1 comment block, like this
        .flex-type { your code }
    .middle { your code }
    .text-accent { your code }

    I think that will help you create a more readable and organized structure for your CSS.

    1. You can group your component CSS base on your HTML structure from top to bottom. Also, if you have any hover effect or anything for your component, try to write it right after your css for your component. For example, if you have a hover effect on your card, you can write your CSS like this
        .card { ... }
    .card:hover { ... }

    I recommend watching Kevin Powell and Traversy Media on Youtube. They have great content for CSS and Frontend Skills in general, and I think you will learn a lot from them!

    1