Skip to content
OverviewSolutions
12
Comments
14
P

Thomas Dimnet

@tdimnetParis, France250 points

Computer Science Teacher / Software Engineer

I’m currently learning...

UX / UI Design on Uxcel

Latest solutions

View more solutions

Latest comments

  • P
    Thomas Dimnet•250
    @tdimnet

    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.

  • KahSR•170
    @KahSR
    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
    P
    Thomas Dimnet•250
    @tdimnet

    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
  • P
    Thomas Dimnet•250
    @tdimnet

    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.

  • verakissyou17•540
    @verakissyou17
    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
    P
    Thomas Dimnet•250
    @tdimnet

    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
  • P
    Thomas Dimnet•250
    @tdimnet

    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
  • Rupak Mukherjee•1,370
    @hannibal1631
    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
    P
    Thomas Dimnet•250
    @tdimnet

    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.

View more comments