Skip to content
OverviewSolutions
7
Comments
5

Alejandro25A

@Alejandro25ARColombia220 points

Front-end developer with a strong background in web development. With an aptitude for problem solving, attention to detail and active communication. My goal is to achieve significant contributions in developing high quality and efficient applications in order to provide the best user experience.

I’m currently learning...

React JS, TypeScript, Jest, Next.js

Latest solutions

View more solutions

Latest comments

  • Alejandro25A•220
    @Alejandro25AR

    Hello @laryssacarvalho congratulations for completing the challenge

    • The nomenclature is fine but you could follow an already defined nomenclature such as BEM (Block - Element - Modifier), besides it is very similar to the one you used., with BEM it would look like this:
    // Block
.score-summary {...}
// Element
.score-summary__item {...}
// Modify
.score-summary__item--red {...}
.score-summary__item--blue {...}
    • Along with BEM you could use the ITCSS (Inverted Triangle architecture for CSS), this would be to organize and divide the styles by purpose in different folders.
    • Finally to facilitate the use of this architecture and in general the writing of styles, you could take a look at SASS.

    I hope it helps you. Great job, keep practicing.

    Marked as helpful
  • Alejandro25A•220
    @Alejandro25AR

    Hi @rhyuen.

    You can't align the list of options to the left, because the inputs are still visible and taking up space, so the justify-content:space-between also affects them. To fix this you could place the hidden entries as follows:

    .card-row input {
   display:none;
}
// or you could 
input[type="radio"] {
  display:none;
}

    That way they don't take up space and the list is already left-aligned.

    Good job, keep up the good work!

    Marked as helpful
  • Alejandro25A•220
    @Alejandro25AR

    Hi @tylermaksymiw. You can use an object to avoid the if, so you will have a much more scalable and clear code. series as follows:

    const convertTimeframe = {
  Daily: 'Yesterday',
  Weekly: 'Last week',
  Monthly: 'Last month'
}
let returnValue = convertTimeframe[props.timeframe];

    And that would be all, I hope it helps you. Great job, keep practicing.

    Marked as helpful
  • Alejandro25A•220
    @Alejandro25AR

    Hi @murray122,

    • The svg is filled with black on the outside, since you must apply the property to the stroke instead of fill.
    • It is better to embed the svg directly in the html than to place it as an image, since being in svg it can be resized without losing quality and its properties can be modified with css.
    • I advise you not to change the font-weing property when hovering the menu, as this increases the size of the box, causing a slight displacement of the other elements, which is not very pleasant visually.

    Good work, keep it up

  • Alejandro25A•220
    @Alejandro25AR

    Hi, your desktop solution is fine, but you could:

    • Specify a "max width" on the header (menu) and on the hero and put a class on the parent to center it, so if there are larger desktop measurements the layout stays the same but centered

    Regarding CSS styles, I would advise you:

    • Stop using pixels and use rem or em measurements.
    • It is not a good practice to make selectors with more than 2 elements, in "menu ul li a img" you would be using 5, this is for specificity reasons.

    Keep practicing, good job.

    Marked as helpful