Frontend Mentor | thamu-acn's profile

Latest comments

Jun Wei•200
@junwei-wong
Submitted 12 months ago
What are you most proud of, and what would you do differently next time?
99% using grid. Only centering the body html tag that I used flexbox.

For the profile header:
```
    display: grid;
    align-content: space-between;
```
For the overall layout:
```
    display: grid;
    grid-template-areas: 'danial danial jonathan kira'
      'jeanette patrick patrick kira';
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
```
What challenges did you encounter, and how did you overcome them?
- Using grid properly, and lots of mdn, stackoverflow, and googling. I feel that in production or practical experience, everyone is more comfortable with flexbox than grid. This challenge forced me to use grid more effectively than ever before.
- Figuring out how to add the quotation into the background. Using svg as a background instead of a tag. This is cool ngl.
```
  background-image: url(../images/bg-pattern-quotation.svg);
  background-size: 7rem 7rem;
  background-repeat: no-repeat;
  background-position: top right 18%;
```
Testimonial Grid using Grid, SASS
#sass/scss#accessibility
1
thamu-acn•200
@thamu-acn
Posted 12 months ago
Well done, nice work!

Just some recommendations:
- Avoid using element selectors instead add classes to your element tags for code reuse.
- Consider a naming convention such as BEM in preparation for maintainability in large and complex projects
Marked as helpful
Sadik Rahman•190
@Coder-Sadik
Submitted 12 months ago
What challenges did you encounter, and how did you overcome them?
The arrangement for the tablet screen was a bit difficult for me because I placed two cards inside a different `` element. By using the min-width: CSS property, I was able to partially solve the problem. However, my approach is not perfect yet, so I am eagerly awaiting your advice. Please check it out and let me know.
Four card feature section solution
1
thamu-acn•200
@thamu-acn
Posted 12 months ago
- Adding alt to <img> tags for accessibility reasons for example on screen readers
- Setting height and width attribute to <img> will increase performance by reducing layout shifts as space is reserved for image while it's being downloaded.
Sylwia•260
@LesSyl
Submitted 12 months ago
What challenges did you encounter, and how did you overcome them?
The biggest challenge for me was adding an icon to the button. I was able to solve this problem thanks to mdn.
What specific areas of your project would you like help with?
Any comments on the project welcome.
Challenge product-preview-card-component
#bem#gulp#sass/scss
1
thamu-acn•200
@thamu-acn
Posted 12 months ago
I have noticed that you are still using px in some instances, according to this article from a Frontend mentor dev, Why font-size must NEVER be in pixels, we are advised to always use responsive units instead. .
yt021•40
@yt021
Submitted 12 months ago
What are you most proud of, and what would you do differently next time?
making it fully responsive.
What challenges did you encounter, and how did you overcome them?
how to customize tables and how to make flexbox responsive to small screens.
recipe page
2
thamu-acn•200
@thamu-acn
Posted 12 months ago
Looks good, just a suggestion as an alternative to using classes on each <td> element you can make use of :nth-child psuedo class
Marked as helpful
thamu-acn•200
@thamu-acn
Submitted 12 months ago
What are you most proud of, and what would you do differently next time?
Being able to produce a similar page to given design
What challenges did you encounter, and how did you overcome them?
Aligning image to center after adding reset stylesheet was a bit tricky. I managed to align it properly using flexbox display on image container div.
What specific areas of your project would you like help with?
I wasn't sure of the effects of selecting/clicking the links through the keyboard.
Social links profile
2
thamu-acn•200
@thamu-acn
Posted 12 months ago
I removed the hover effect and replaced it with focus after I saw the instruction "Ensure visitors can navigate the links only using their keyboard."

At the moment the background color changes when the button links have focus through keyboard tab
ავთანდილ საგინაშვილი•150
@DeeFyB707
Submitted 12 months ago
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?
CSS FlexBox
1
thamu-acn•200
@thamu-acn
Posted 12 months ago
I recommend using 'rem' for setting font-size instead of in pixels.
Marked as helpful