Skip to content
OverviewSolutions
14
Comments
14

tOnski86

@tOnski86330 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

View more solutions

Latest comments

  • Mpass•230
    @Benson0721
    What are you most proud of, and what would you do differently next time?

    I finally completed something that doesn't fully adhere to the design file; it's entirely my creation. I'm so happy that I can create "MY" own work, and I will strive to create more and more things like this

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

    At the beginning of this practice, I focused solely on following the design patterns provided by my mentor. However, I felt a desire to do something more interesting, so I decided to incorporate some personal elements into the practice. I'm really pleased with the outcome and how it turned out.

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

    If anyone can give that I can add to this profile practise, I will really appreciate that!

    My simple profile

    #sass/scss
    1
    tOnski86•330
    @tOnski86

    Checked your code, and there's not much to clean up here - you're using a CSS preprocessor, and since this is a simple design a single CSS file would be fine.

    My only feedback is to keep accessibility in mind. It's definitely subjective, but you might want to use more readable fonts next time. Other than that - this is an awesome take on the challenge. Keep trying out new stuff and stay creative. This will definitely set you apart!

    Best of luck and keep going!

  • P
    Jose•160
    @josenegrete123
    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•330
    @tOnski86

    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!

  • masalatimothy•100
    @masalatimothy
    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•330
    @tOnski86

    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!

    Marked as helpful
  • Erkant•780
    @erntTt94
    What specific areas of your project would you like help with?

    Any feedback is greatly appricated.

    Testimonials Grid

    1
    tOnski86•330
    @tOnski86

    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!

  • Colt•100
    @Xerver8694
    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•330
    @tOnski86

    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
  • P
    DevAilurus•10
    @DevAilurus
    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•330
    @tOnski86

    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!

View more comments