Thomas Dimnet

@tdimnet

All comments

RespeitaOPai•30
@RespeitaOPaiSubmitted 6 months ago
QR code component
1
Thomas Dimnet•250
@tdimnetPosted 6 months ago
Hi @RespeitaOPai,

Nice work with your project! I read both your CSS and HTML code and most of what I saw was really good for a first project!

Here are some feedback if you want to improve your project:

I saw that some part of your CSS was in the HTML file. Here is an example of what I am talking about: <img src="images/image-qr-code.png" alt="qr code" style="width: 90%; ;">. Most of the time, we tend not to use inline style. It can make your code less maintainable.

You should add box-sizing: border-box at the top of your CSS file. If you want to learn more about it, here is a great ressource: https://css-tricks.com/box-sizing/

Be aware of your indentation. I am thinking of your media queries section in your CSS file.

Other than that, it's great first project!

Have a nice day, Tom.
0
KahSR•170
@KahSRSubmitted 7 months ago
What are you most proud of, and what would you do differently next time?
I'm proud of the notion I'm gaining on how to develop my CSS better.
What challenges did you encounter, and how did you overcome them?
I used this challenge to explore possible solutions with CSS grid and review the properties. First I solved it using just grid-template-columns, grid-row and grid-column, but I found it difficult to make the page responsive. With grid-template-areas it was much simpler
What specific areas of your project would you like help with?
.
testimonial grid main section using css grid
1
Thomas Dimnet•250
@tdimnetPosted 6 months ago
Hi @KahSR,

Great work with your project! Your design looks particulary sharp on different screen sizes. It looks perfect on my 4k monitor :).

Here are some feedbacks if you want to improve your code:

I noticed you use BEM when designing your layout. This is great but I think you could improve some of it. Here is an example: card__username card__username--color. I think the name of this modifier could be improve. You could for example specify the color or the kind of color. For example, card__username--primary or card__username--secondary. BEM is great but it can be tedious sometimes ^^.

Be aware of your namming conventions. For example, grid_card5: is it a element or a block? Most of the time with CSS, we tend to use kebab-case.

I know that these are just tinny details and I am sorry for that. The thing is your project is really good 🙂.

Have a nice day, Tom.
Marked as helpful
0
AmirHossein•130
@amirhirxSubmitted 6 months ago
Blog preview card
1
Thomas Dimnet•250
@tdimnetPosted 6 months ago
Hi @amirhirx,

Great job with your project! I read both your HTML and CSS code and it looks great!

Here are some feedback if you want to improve your project:

You could be better with your alt attributes. I am thinking about alt="Thumbnail" and alt="avatar". For example, for the second one, you could replace it by alt="Greg Hooper". By default, screen readers will reader *Image of Greg Hooper".

You could use normalize.css or a reset css file in order to make your project looks more consistent on different web browsers. Here are some interesting links if you want to learn more about this concept:

https://necolas.github.io/normalize.css/

https://css-tricks.com/an-interview-with-elad-shechter-on-the-new-css-reset/

https://www.joshwcomeau.com/css/custom-css-reset/

I also noticed you used float: right;. This is okay but for your information, we tend not to use float anymore 🙂.

Other than that, this is really solid work!

Have a nice day, Tom.
0
verakissyou17•420
@verakissyou17Submitted 6 months ago
What are you most proud of, and what would you do differently next time?
I would use a framework to make the project.
What challenges did you encounter, and how did you overcome them?
I didn't have any problem in solving this challenge.
What specific areas of your project would you like help with?
Any improvement for my project is welcome.
Article preview component using Vanilla JS
1
Thomas Dimnet•250
@tdimnetPosted 6 months ago
Hi @verakissyou17,

Great job with your project. I noticed that you used the same HTML elements for your social links for mobile and desktop, which is great. You also used classList.toggle for adding and removing classes: this is perfect.

Here are some improvements:

You could add a cursor pointer when hovering over the button with your mouse. Even though you added a hover effect, I think adding a cursor pointer makes it easier.

You used absolute position for your social links card, which is great. However, I noticed that you used percentages for the top and left properties. This is not something I tend to use; I prefer using pixels because it tends to fix the design according to your screen size. Here is a link from CSS Tricks you can use: https://css-tricks.com/almanac/properties/p/position/

Overall, your project looks great, and these minor adjustments will enhance its usability and design even further.

Keep up the excellent work!

Have a nice day, Tom.
Marked as helpful
1
Bishwajeet•480
@Bishwajeet-07Submitted 7 months ago
four card feature section
1
Thomas Dimnet•250
@tdimnetPosted 7 months ago
Hi Bishwajeet-07,

Nice work! I looked at your code and I really enjoyed that you used CSS variables for your project. It makes the CSS easier to read and to use.

I also saw that you created a app.js file in order to toggle dark/light mode. However, I didn't see where I can toggle it on your project? Is there something that I miss?

By the way:

tough.addEventListener("click", (e)=>{ body.classList.toggle("dark") })

You don't need to use the e in your callback function.

Great job so far!

Have a nice day, Tom.
Marked as helpful
1
Rupak Mukherjee•1,070
@hannibal1631Submitted 7 months ago
What are you most proud of, and what would you do differently next time?
I structured the divs much more clearly this time ig.
What challenges did you encounter, and how did you overcome them?
NA
What specific areas of your project would you like help with?
If anyone can explain to me in short how does the length of the webpage works and how i can customize it, on which elements it depends. please help.
Recipe-Page-Hannibal
3
Thomas Dimnet•250
@tdimnetPosted 7 months ago
Hi Hannibal,

Great work with your recipe project. Your project seems to meet the requirements. However, I have a weird issue with my computer: it seems that the website is really tinny.

For example, some of the font size you used are:

font-size: 9px;

I think it's a little bit too small and it should be a bit bigger. On my challenge, mine is 16 pixels. You can have a look here: https://tdimnet.github.io/Recipe-page/ I don't say that my solution is better than yours, I just think your project could be a bit bigger.

Let me know, Tom.
0
Jarrod Ver Hey•150
@jvisme1991Submitted 7 months ago
What are you most proud of, and what would you do differently next time?
I am most proud of the responsiveness and getting the images to swap smoothly.
What challenges did you encounter, and how did you overcome them?
I had some struggles with the design adjusting to a larger screen size but I was able to overcome the issues by going back through and slowing down.
What specific areas of your project would you like help with?
none at the moment
Responsive Product Preview Card
1
Thomas Dimnet•250
@tdimnetPosted 7 months ago
Hi ,

Nice job! I have a question for you, I noticed you used svh, what is it? It is a mistake or a real unit?

You can find it at line 197:

@media (min-width: 600px) { body { max-width: 1440px; place-content: center; height: 100svh; /* Here */ }

Thank you, Tom
Marked as helpful
0
soybrrraian•60
@imbraianSubmitted 7 months ago
What are you most proud of, and what would you do differently next time?
I am proud of myself because I have been capable of finishing the project, even though it has been challenging for me to do so. Next time, I'd like to improve my abilities and learn how to use them correctly.
What challenges did you encounter, and how did you overcome them?
The challenges I encountered were primarily with tables because I had never worked with them before
What specific areas of your project would you like help with?
I'd love to receive help with everything related to tables, flexbox and more (tips, semantics, etc).
Recipe Page - BA
1
Thomas Dimnet•250
@tdimnetPosted 7 months ago
Hi @imbraian,

Very good job indeed!

I saw you used css variables: it's really cool and professionial. The same goes for the BEM notation. However, you decided to use max-width instead of min-width. I tend to prefer the second one, it makes the approach for mobile friendly.

For your table, I saw this:

<p>The table below shows nutritional values per serving without the additional fillings.</p>

You could use the caption tag instead. It makes tables more accessible, especially to screen-readers and assistive technologies. You can learn more about tables on the mdn: https://developer.mozilla.org/fr/docs/Web/HTML/Element/table

Great job! Tom.
1
Nasserio10•40
@Nasserio10Submitted 8 months ago
What are you most proud of, and what would you do differently next time?
i am very excited that create my second challenge in frontend mentor. next time i would like to do it much fast than this .
What challenges did you encounter, and how did you overcome them?
the challenge as a newbie is very taugh because , a lot of time a visited online documentation of css how to create border, shadow etc
What specific areas of your project would you like help with?
i would like of help to create a responsive website of all types of windows , desktop , tablets, smartphone. i only created the desktop version
blog preview card
2
Thomas Dimnet•250
@tdimnetPosted 8 months ago
Hi Nasserio10,

Nice project! You did a great job.

There are a few things you could improve for next time:

I saw you used absolute position. This is great but most of the time, we don't want to use it. It's like a bazooka. We use it only when it's necessary. You could use flex instead.

You should have a look on CSS variables. They provide a lot of help when styling website.

Other than that, this is great :).

Have a nice day, Tom.
0

Cynthia Agu•110

@cynthiachinenyeSubmitted 8 months ago

What are you most proud of, and what would you do differently next time?

I am proud of how comfortable I can make use of bootstrap although I know that I still have a lots to learn

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

nothing much, just don't know why @ media queries the screen is not responding

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

the media query

Product preview card

Thomas Dimnet•250

@tdimnetPosted 8 months ago

Hi Cynthia,

Nice job so far!

Since you're using Bootstrap, you shouldn't have to use your own style:

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.main{
    background-color: #f4dff5;
}
.card{
    max-width:450px;
      
}
.price{
color:var(--bs-green);
font-size:larger;
font-weight:800;

}
.fw-lighter{
  font-size:10px;
}
.card-title{
  font-size:20px;
}
@media screen  and(max-width:425px){
  .card-title{
    font-size:50px !important;
  }
}

Nowadays one of the best and easiest way to use Bootstrap is with Sass, you can read the document on how to set up it here: https://getbootstrap.com/docs/5.3/customize/sass/.

You can update the Bootstrap's color variables here: https://getbootstrap.com/docs/5.3/customize/color/#using-the-new-colors

By the way, you don't need to use a reboot

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

Bootstrap includes a reboot by default: https://getbootstrap.com/docs/5.3/content/reboot/

Let me know if you need any resources :).

Have a nice day, Tom.

Achara Chisom Solomon•490
@AcharaChisomSolomonSubmitted 8 months ago
What are you most proud of, and what would you do differently next time?
Have to learn the box model more intuitively.
What challenges did you encounter, and how did you overcome them?
knowing what tag to wrap within the other.
What specific areas of your project would you like help with?
Nothing.
Social link card using HTML and CSS
1
Thomas Dimnet•250
@tdimnetPosted 8 months ago
Hey,

Nice work!

It seems you've used BEM when coding your project and it's both great and really interesting. However, it doesn't seem quite correct and that you confuse block and element. Let me give you an example:

<div class="user__links"> <p class="user__link"> <a href="https://github.com/AcharaChisomSolomon" target="_blank"> GitHub </a> </p> // </div>

It should be user-links then user-links-link or something such as user-description and then user-description-link.

I've found cool that you used: target="_blank" attribute. You could use the rel attribute if you want to be more SEO friendly :).

Other than that, nice work!
Marked as helpful
0
PhilippeItsMe•110
@PhilippeItsMeSubmitted 8 months ago
What are you most proud of, and what would you do differently next time?
What a ride ! Yes ! I found a way to put my box in the middle of the windows. Yes ! Now, I manager size font with REM
What challenges did you encounter, and how did you overcome them?
Tks to Discord and it's great community.

I had a lot of feed-back. To be honest, as I am new in coding, there a still a lot that I didn't even understand.

However, programming is FUN
What specific areas of your project would you like help with?
I didn't succeed centering the "Greeg Hooper" : /
blogPreviewChallenge
2
Thomas Dimnet•250
@tdimnetPosted 8 months ago
Great job :) I'd suggest to be aware of alt attributes :

alt="blogIllustration"

This text will be read by a screen reader. It was to mean something.

Same goes here:

alt="portraitGregHooper"

You could write for example Greg Hooper. By default, screen readers read "image of".

Other than that, it's great 👍!
0

Thomas Dimnet

All comments

QR code component

testimonial grid main section using css grid

Blog preview card

Article preview component using Vanilla JS

four card feature section

Recipe-Page-Hannibal

Responsive Product Preview Card

Recipe Page - BA

blog preview card

Product preview card

Social link card using HTML and CSS

blogPreviewChallenge