Skip to content
OverviewSolutions
12
Comments
17
P

Steve Xero

@stevexeroLas Vegas210 points

Hello 👋 I'm Steve! I consider myself a creative person and love learning and making things, especially for the benefit of others! I love art and grew up drawing and oil painting, my favorite subjects being people. I've found the same sense of creation in programming, esp. front-end development!

I’m currently learning...

a11y, Tailwind CSS, Intro to Programming and Python - CS Degree

Latest solutions

View more solutions

Latest comments

  • Romário J. Santos•270
    @romariojs94
    What are you most proud of, and what would you do differently next time?

    .

    What challenges did you encounter, and how did you overcome them?

    .

    What specific areas of your project would you like help with?

    .

    Four Card Feature using Flexbox

    1
    P
    Steve Xero•210
    @stevexero

    I wasn't able to find the code repo. Do you have a link?

  • Shaun Pour•630
    @ShaunPour
    What are you most proud of, and what would you do differently next time?

    Despite not being specifically designed for it, 99% of the design is functional for 1440p monitors and tablets. It would only need a few slight tweaks to be more visually consistent with the other devices it is designed for.

    What challenges did you encounter, and how did you overcome them?

    The html had to be rewritten several times to allow the design to be made responsive enough to work on larger screen sizes.

    What specific areas of your project would you like help with?

    In general, I feel like the core element is too large and would go back and shrink it down somewhat if I ever return to this project.

    Mobile First Responsive Product Preview Card

    2
    P
    Steve Xero•210
    @stevexero

    Have you thought about revisiting this project and implementing what you've learned since?

  • Mirjax2000•720
    @Mirjax2000
    What are you most proud of, and what would you do differently next time?

    In this challenge i made deep dive into "resolution switchnig" and "art direction". It is complex theme, but in the end you can speed up your pages and increase quality pictures on retina displays.

    What challenges did you encounter, and how did you overcome them?

    on list the number of items has different color then text inside. A solved with pseudoelements and sass cyklus to make it faster with codding.

    What specific areas of your project would you like help with?

    Still BEM. I dont know how to adress name of children which have two parents.

    Recipe-page

    #bem#sass/scss#gulp
    1
    P
    Steve Xero•210
    @stevexero

    Woah! I've never seen this before!

    <div class="card__img">
    <img
        sizes="(max-width:770px) calc(100vw - 80px), 736px"
        srcset="
            ./assets/img/main_325-test.webp   325w,
            ./assets/img/main_650-test.webp   650w,
            ./assets/img/main_1300-test.webp 1300w,
            ./assets/img/main_2600-test.webp 2600w
        "
        src="./assets/img/main_1300-test.webp"
        width="1300"
        height="594"
        alt="Omelet from recipe"
    />
</div>

    I learned about why woff2 and ttf but didn't deep dive too much into where or how I can acquire the woff2. When I download and install from Google fonts or the Frontend Mentor files, it's been ttf. Can you give me insight on how you got the woff2?

    @font-face {
    font-family: 'Young Serif';
    src: url(../assets/webfonts/Font-face/YoungSerif-Regular.woff2) format('woff2'),
        url(../assets/webfonts/Font-face/YoungSerif-Regular.ttf) format('truetype');
    font-weight: 400;
}

    Haha thank you for the shoutout!! I am learning from you too! This has been one of my favorite parts about pursuing tech, we're all always learning from each other! I am in a labor job now, so it's a totally different setting, where the people have poor attitudes (because they are tired, I don't blame them) and there is a huge lack of forward momentum. This structure moreso benefits from their people staying in the same place as opposed to empowering them and helping them get ahead. I feel out of place and do my best to try and help them rediscover their passions.

    Sorry for the rant, back to the code!

    Your sass is unmatched! Well structured, and inspiring me to dig deeper in.

    Is em(360, 16) particular to Sass? It is interesting

    .container {
    max-width: em(375, 16);
    margin: 0 auto;
    background-color: $clr-bg-container ;

}```

When I was working with BEM alongside Sass, I got confused about the BEM structure too.  I am still researching it further, but here's what I understand.  BEM is referencing the selector's role, Block, Element, Modifier.  Our recipe page doesn't really have any modifiers (buttons, interactive elements, etc.), but there are plenty of Blocks and Elements.  Blocks are like the parent, Elements are the children.  So if we have a container (block) of some sort, say "main-block," then all of it's children would reference it by including "main-block" + "__element-name."  Also, every element SHOULD have a class name.  I know nesting is awesome in Sass and it's one of my favorite features, but BEM doesn't suggest more then 1 or 2 levels deep.

So for Sass:
```scss
.main-block {
   &__element-name {
      property: value;
   }
}

    or CSS

    .main-block {
   property: value;
}

.main-block__element-name {
   property: value;
}

    I haven't experienced using modifiers with BEM yet, so I'll keep you posted on that.

    Very clean code! And while browsing more, I now found the Sass functions and the answer to my above question, but I'm going to leave it there as maybe it will inspire someone else to look into it.

    Cheers!

  • P
    Steve Xero•210
    @stevexero
    What are you most proud of, and what would you do differently next time?

    I am most proud of the improvements I'm making towards semantically correct HTML, accessibility, and reusable CSS variables.

    What challenges did you encounter, and how did you overcome them?

    I ran into a few minute problems, one being that an element I gave a display of inline-block to had some margin on it, even though I had all margins and paddings reset. It had to do with a vertical-align property that is automatically set to baseline. I was able to fix it by setting it to top.

    What specific areas of your project would you like help with?

    The main focus of this project was to use relative units as opposed to fixed pixel sizes. I was trying to keep the solution as close to the design as possible, resulting in some crazy rem's, like 0.875rem. Is this ok?

    Blog Preview Card - focusing on relative units

    #accessibility#bem
    2
    P
    Steve Xero•210
    @stevexero

    Hey! Thanks so much for your feedback! Check my code now, I did my best to implement what you're talking about, checked with different scales by setting

    html {
 font-size: 500%; /* 200%, 300%, 400%, etc. */
}

    I got a nice view of how to make things work for accessibility.

    I'd like to point out a few things, if that's ok...

    My a11y mentor Corina sent me this article about refraining from using relative units for margins, padding, and other spacing techniques as the focus is to modify the important content for the user to read or interact with. It's a great read!

    I understand what you're saying about ems vs rems, and the best way I can make it make sense is by referring to inheritance. Every child element inherits it's parent's properties, so in the case of rem, it inherits from the root, while em inherits directly from it's parent.

    I did use Figma, and did have my max-height set to 200px. I checked out your solution as well and kind of had the same question, as I see there's no border-radius on the pill tag.

    I need to dig deeper into "little hint "resolution switching" and "Picture art" techniques, it will save bandwith and also wil show better quality imiges on retina displays."

    Thank you again for your feedback! I am going to revisit my other challenges and apply what I'm learning, but I've also starting the second learning path and, funny enough, it's about responsive media.

    How's the recipe page coming along?

  • Mohammad Aminul Islam•160
    @aminbd90
    What are you most proud of, and what would you do differently next time?
    What challenges did you encounter, and how did you overcome them?
    What specific areas of your project would you like help with?

    Recipe page

    1
    P
    Steve Xero•210
    @stevexero

    Love how clean your code is!

  • P
    Steve Xero•210
    @stevexero

    Your solution is very elegant! I love it! Your code is minimal and nothing is overused. Great job!

View more comments