Skip to content
OverviewSolutions
11
Comments
13
tOnski86
@tOnski86

All comments

  • Jose•150
    @josenegrete123Submitted about 7 hours ago
    What are you most proud of, and what would you do differently next time?

    Most proud of not rewriting but reusing CSS code.

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

    Main challenge was the " graphic on the first card. I read on how to manipulate a background, position and repeat.

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

    If possible, I would like assistance on whether or not the CSS code here is acceptable. And any tips would be much appreciated.

    Testimonial Grid with CSS Grid and Flexbox

    1
    tOnski86•240
    @tOnski86Posted about 7 hours ago

    This was a great solution!

    • I just checked your code and adding the 2 background properties (one for the color and the other for the quote) was an elegant solution. Another solution would be to absolute position the quote relative to the card.
    • The only issue I can see here is your body width on the 1440px viewport. Setting it around 80% would probably make it better.

    Other than that great work on using grids! It's nice to see you are using the concept of explicitly spanning and ordering elements using grid-column and grid-row. You're on the right track here.

    Great job and keep going!

    1
  • masalatimothy•100
    @masalatimothySubmitted about 9 hours ago
    What are you most proud of, and what would you do differently next time?

    I am proud of my CSS skills, this project helped me to rate my advanced CSS skills specially on Grid Layout, I've learnt new techniques and got more experience on CSS

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

    I encountered challenges about organizing the seventh and the last section on the desktop design, to align them in the left side of the page, and making them to be higher that the others. So I overcame that by giving the seventh a specific height and using the margin-top property in the last section

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

    I would like any feedback on the solution, about the Grid layout specially on the desktop design, and also about the devices breakpoint so I can know if I've respected the W3C recommendations

    Bento-grid-main solution using CSS Flexbox and Grid

    1
    tOnski86•240
    @tOnski86Posted about 7 hours ago

    This is well executed - great job! Here's my suggestion:

    Constructing your grid

    • Using a mobile first design, I would start with the smallest viewport of the project (I think it's at 375px). Create a single-column grid and style each card accordingly.

    • Once you're done with the design, you can create your desktop grid. I haven't started this challenge so I'm just assuming this is a 4x3. Instead of simply setting your grid-template-rows and grid-template-columns to auto, you can explicitly define the grid accordingly e.g. grid-template-columns: repeat(4(1fr)). This creates a grid with 4 equal columns. Check out the minmax function here as well for responsive grids.

    • Once the grid template is defined, you can then place your cards in the grid using the grid item properties: grid-row, grid-col or if you prefer grid-area etc. etc. and span and order accordingly. There are countless approaches to position your items but this would be exponentially easier since you already have your grid setup.

    Once you're comfortable with this, you can add a medium breakpoint as well.

    Separating styling the grid vs the card layouts would make this easier IMO. Try out what works for you and feel free to ask if you have questions.

    Best of luck and keep going!

    0
  • Erkant•160
    @erntTt94Submitted 2 days ago
    What specific areas of your project would you like help with?

    Any feedback is greatly appricated.

    Testimonials Grid

    1
    tOnski86•240
    @tOnski86Posted 2 days ago

    Nice implementation of grids! One feedback to make this better - you can use height: 100vh on the body to ensure that the grid only occupies the full height of your screen (removing the unnecessary scrollbars). Then, apply flex justify-center align-center on the body to make sure your grid stays in the middle of the screen.

    Awesome job and keep going!

    1
  • Colt•90
    @Xerver8694Submitted 2 days ago
    What are you most proud of, and what would you do differently next time?

    I'm finally getting the hang of CSS and styling elements for pragmatically. It was fun to learn how to use the flex box model to center the profile card and making sure everything matches the style of the design as close as possible. Plus, making something that I actually showcase my personal expertise and socials was something that I never thought I would be able to do until now.

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

    I had some struggles with the styling and the CSS, especially with working out the padding and margins to get the spacing right on the links and the card. I managed to get it right through trial-and-error, but I would love to know if there is a more efficient way to get this right.

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

    I feel like I managed to get this project right with minimal help, but I would love feedback as to what could be done better.

    Social Links Profile

    2
    tOnski86•240
    @tOnski86Posted 2 days ago

    I hope this is a joke because this looks close to the original!

    I just reviewed your code and here are my thoughts:

    I see that you have started using rem for some of your units. This is a great start for you to get really fluid designs. However, I was kinda wondering why you did not apply the same process for your container widths (you still used px).

    My suggestion here is to really understand what your rem size is. By default (I think) it's 16px. There is a trick to make it easier for you to think in rem - It's hard to calculate 1rem = 16px, 2rem = 32px and so on. So you might want to define:

    html {
  font-size: 62.5%
}

    What this does

    This makes so that every time you use 1rem anywhere on your project, it now refers not to 16px, but 10px! So 1rem = 10px, 2rem = 20px and so on. Easier right?

    Other suggestions

    • In general, start with the overall layout when designing your element. As much as possible, start with the bigger designs, such as the card - and set the overall padding and margins of the element.
    • When moving to smaller components, such as the buttons, look for commonalities. For instance, the vertical spacing is equal among all the buttons - except for the last one. I would probably implement something like this:
    .your-list-selector:not(:last-child) {
  margin-bottom: value
}

    This way, you are maintaining the integrity of your card styles without having to worry about how the smaller elements interfere with it.

    Hope these small suggestions make sense. If anything, feel free to reach out. Great job and keep going!

    Marked as helpful
    1
  • DevAilurus•10
    @DevAilurusSubmitted 2 days ago
    What challenges did you encounter, and how did you overcome them?

    Rediscovering native JavaScript is a pleasure after spending six years working with JS frameworks.

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

    It's possible that the naming of my classes is more suited to SCSS. Do you have specific naming conventions when you're using just plain CSS?

    Interactive Rating without framework

    1
    tOnski86•240
    @tOnski86Posted 2 days ago

    This is a great question and hopefully can spark some sort of a discussion. Since you're referring to vanilla CSS, I'll come up with my two cents and hopefully the experts can weigh in on this.

    My take: Vanilla CSS Checking out your code, I see that there are a few routes you can go to. For one, you are prefixing most of your classes with .card-content. Here's how I would probably approach it.

    • Using the child combinator. Let's use both .card-content-title and .card-content-description as an example. These refer to both your H1 and p in your HTML markup. I would probably go with .card-content > H1 and .card-content > p on this, explicitly specifying that I only want styles to apply to the direct children of a .card-content div.
    • Using nesting. Although this is still not fully supported - I actually like writing styles this way. Using the same example I would probably nest my selectors like this:
    .card-content {
  &__header {
  }
  &__text{
  }
}

    Modern Options Having tried a few options for my React projects - vanilla CSS, SASS, CSS Modules and recently Tailwind, I would prefer going the Tailwind route for styling. Although it uses utility classes which are directly applied to the element you are styling, I feel like being able to focus on the core logic of the application instead of having to figure out naming CSS classes has been a big advantage.

    This obviously depends on whether you are working as a web designer, where better options are available.

    Hope we get other opinions on this issue. Best of luck and keep going!

    0
  • tOnski86•240
    @tOnski86Posted 3 days ago

    Awesome implementation!

    I don't know if it's the look you were going for - but just saw that you implemented align-items:center on the body to center the card - you might want to try align-items: start so that the card does not open (and expand) from the center, but rather open from the top on smaller screens.

    Great job and keep going!

    Marked as helpful
    0
  • tOnski86•240
    @tOnski86Posted 4 days ago

    Clean implementation of the grid! I like how you added interactivity with the hover effects.

    Great job and keep going!

    0
  • Jaylen Baxter•260
    @JYLNSubmitted 6 days ago
    What are you most proud of, and what would you do differently next time?

    I never really use CSS Grid for layouts. Generally, I've been pretty happy with trying to negotiate flexbox for creating my layouts. This time I wanted to challenge myself to use grid and flexbox to create the layout from the design. Trying to center the outer card columns vertically was difficult but after I practiced grid by playing Mastery Games - Grid Critters, I was able to transfer the knowledge to Tailwind utility classes and center the outer columns.

    Four Card Feature Section using TailwindCSS

    1
    tOnski86•240
    @tOnski86Posted 5 days ago

    Awesome 1-to-1 replication of the project! Really, really close. I like how you were able to get the correct desktop width. Great job and keep going!

    0
  • tOnski86•240
    @tOnski86Posted 5 days ago

    Awesome work! Just checked your code and you know your stuff - might have accidentally missed align-items:center on your price. Other than that - really close to the original!

    0
  • Gino Gallardo•100
    @GinoGallardoSubmitted 8 days ago
    What are you most proud of, and what would you do differently next time?

    tuve mas facilidad a la hora de configurar tailwind

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

    Al no tener los archivos figman, opte por usar las imagenes de referencia.

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

    a la hora de itulizar las etiquetas.

    Responsive, hecho con tailwind

    1
    tOnski86•240
    @tOnski86Posted 6 days ago

    Awesome job keep going!

    Marked as helpful
    0
  • tOnski86•240
    @tOnski86Posted 6 days ago

    Just checked your code and it's amazing that you are already getting the hang of routes!

    One feedback - focusing just on this challenge, you might want to also think of composing your components. For instance - there is an opportunity to create a general <Button/> component where you can then style and pass props, and just render it on the <SocialLinkRender/> component as many times as you want!

    Overall great job and best of luck to you!

    Marked as helpful
    0
  • tOnski86•240
    @tOnski86Posted 7 days ago

    Great attention to detail on the content spacing! If you want to implement the offset shadow, you can start learning pseudo-elements - in this case the ::after CSS class.

    I'll try to explain in pseudocode so you can hopefully understand it:

    1. Create an ::after pseudo-class to your card container (the whole white card)
    2. This ::after pseudo-class is an exact copy of your card, but you can style it in any way you want - in this case, you want to change this ::after card's:
    • color: dark grey,
    • border-radius: similar to the original card,
    • position: the ::after card should have position: absolute, and the white card position: relative
    • z-index: finally, just move this black card to the back using z-index of -1 and position top and left.

    Good luck and have fun!

    0