Skip to content
OverviewSolutions
6
Comments
6

Dallas

@DasaruCalifornia, United States120 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Submitted 29 days ago

    Four Card Feature Section

    #bem
    • HTML
    • CSS
    0

    I would like to know of alternate ways of aligning the cards for the desktop page.

  • Submitted 2 months ago

    Product Preview Card Component

    #bem#accessibility
    • HTML
    • CSS
    1

    There are multiple areas I would like help with:

    • BEM (block-element-modifier)
    • Accessibility
    • CSS organization
  • Submitted 2 months ago

    Recipe Page

    #bem
    • HTML
    • CSS
    1

    I would be grateful for any advice or tips on how to organize my CSS using BEM and what I could do differently.

  • Submitted 2 months ago

    Social Links Profile

    • HTML
    • CSS
    1

    I would like help with the organization of my CSS file. Any ideas on how I could rewrite it to make it easier to understand to other devs is greatly appreciated!

  • Submitted 2 months ago

    Blog Preview Card

    • HTML
    • CSS
    1

    Any tips on organizing my CSS file is greatly appreciated! I'm always second guessing myself on whether my CSS is readable enough.

  • Submitted 3 months ago

    QR Code Component

    • HTML
    • CSS
    1

    The organization of my CSS file is what I need the most help with. I feel like I can accurately create CSS solutions but maintaining these style sheets seem difficult.

Latest comments

  • P
    Dallas•120
    @DasaruPosted 29 days ago

    I like your CSS Grid solution to the desktop page. That's a good way to align the cards.

    One small problem I found is that you put the header inside of the main tag. Both header and footer tags should be outside of main. Other than that, you did a great job.

    Marked as helpful
    0
  • SHAKIR•90
    @shakirbakareSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the fact that I used Sass @mixin, @media query and @content directives to make the solution responsive

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

    None

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

    None

    Responsive product preview card using Sass, @content, @mixin, and more

    #accessibility#bem#pure-css#sass/scss
    1
    P
    Dallas•120
    @DasaruPosted 2 months ago

    Excellent solution. Nice use of mixins. I have not used Sass but I can see how useful it is to have your responsive styles next to the element in question.

    1
  • SHAKIR•90
    @shakirbakareSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the number of problems I solved in this challenge:

    • I coded a border for all the table cells but the last one

    • I aligned the cells to match the design provided

    • I coded spacings for the table cells.

    • I styled the lists. Especially the bulleted lists. I controlled their size and color.

    And I did all these using the :not(:last-child) and :mark selectors, and the Sass nesting and mixin functionalities.

    I'm so proud of myself and skills!

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

    No challenges. I know my onions about styling in CSS

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

    None. But any feedback on my code structure, organization, and semantic elements choices would be appreciated

    Recipe Page using semantic elements, custom CSS properties, Sass, BEM

    #accessibility#bem#sass/scss#pure-css
    1
    P
    Dallas•120
    @DasaruPosted 2 months ago

    Nice solution. One thing I would suggest using is CSS At-Rules such as @font-face and @media. Font-face is an alternative way to link fonts directly into your project as opposed to linking via CDN. Media queries are also a great way of making your page responsive for different sized devices such as mobile, tablet, and desktop.

    It's also worth noting to be careful of overusing the :not pseudo-class as it can increase the specificity of the CSS rule.

    1
  • davilucas•80
    @Davilucca22Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    Do que você mais se orgulha?: consegui fazer o exercício de forma mais rápida, adaptei a imagem de acordo com o site

    o que faria diferente da próxima vez?: incluiria javaScript

    pagina com meus links sociais

    1
    P
    Dallas•120
    @DasaruPosted 2 months ago

    Nice solution. I like how you customized this by adding in your own personal information. It's a nice touch. Here are some pointers for you:

    • I would recommend learning flexbox. That will allow you to align and center elements inside of containers.

    • For your HTML, you should use an unsorted list and have each anchor be inside a list element. Section tags should be used for larger parts of a webpage:

    <ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>
    Marked as helpful
    0
  • P
    Dallas•120
    @DasaruPosted 2 months ago

    Great solution.

    I would recommend using flexbox to center the card on the screen rather than using the transform/translate method. You can make the body tag a flex object and center the card with justify-content and align-items.

    You can also use the flexbox gap property to align items inside of the card itself rather than using padding/margin on each item. It can help simplify the spacing logic to avoid future confusion.

    0
  • P
    Dallas•120
    @DasaruPosted 3 months ago

    Your solution seems pretty solid.

    I noticed you used Arial for your font. For implementing custom fonts, you can use the @font-face at-rule to import it (https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face).

    You can download many free fonts from google fonts including the Outfit font used in the challenge (https://fonts.google.com/).

    0