Frontend Mentor | Raul A.'s profile

All comments

@MarkynSanSubmitted over 3 years ago

Today I did two challenges for beginners, the first one took a while, but the second one, which had the same principles, was much faster, precisely because of the study I made of the first one.

Grid, Flex and HTML Studies

Raul A.•130

@rarg22Posted over 3 years ago

Nice Job! One minor improvement you could. The card color highlights, I noticed you made a <div> element for those and shaped them according but they don't look too smooth and give you an extra DOM element. Instead, you can try using pseudo-elements ::before or ::after. You can play with those instead to avoid creating an extra DOM element. You can probably position them at the top of the card and then use overflow: hidden to make it follow the shape of the card and make it look smoother.

Marked as helpful

Raul A.•130

@rarg22Submitted over 3 years ago

Any feedback is welcomed! Transition between 1440px to 375px was not something I worked on too much so it might not be the best transition. I focused mostly have it as clean as possible for 1440px and 357px. Everything done by eye only, no design files :(.

Responsive Design Mobile first with plain html/css

Raul A.•130

@rarg22Posted over 3 years ago

Thanks friend, I'll be sure to look more closely into these points for the next challenges :)

Dev Monkey•100

@priopambudiSubmitted over 3 years ago

I'm happy with my result. This is my first time build a web page with SCSS. But there are some thing that I'm confused about. On my solutions, I have code :nthchild(1),(2),(3) and (4). They have same code, just have a different background-color. Is in SCSS I can make a nesting from nthchild(1) to nthchild(2),(3), and (4)? The :nthchild() is in one parent class. Thank you.

Four Card Feature - First time practice SCSS

Raul A.•130

@rarg22Posted over 3 years ago

In my case, I used card specific classes besides having a base class with all the common styles. Then I target the individual cards by doing

.specific_class.base_class::before

.card::before {
  content: "";
  position: absolute;
  height: 4px;
  width: 100%;
  left: 0%;
  top: 0%;
  z-index: 999;
}

.supervisor_card.card::before {
  background: var(--supervisor-card-highlight);
}

.teambuilder_card.card::before {
  background: var(--team-builder-card-highlight);
}

.karma_card.card::before {
  background: var(--karma-card-highlight);
}

.calculator_card.card::before {
  background: var(--calculator-card-highlight);
}