Latest solutions
Meet Landing Page with Sass
#sass/scss#bemPSubmitted 9 months agoI think a review of my Sass architecture and BEM implementation would be great.
Have a nice day,
Tom.
Tip calculator app with TypeScript, TailWind, and Vitest
#tailwind-css#typescript#vitestPSubmitted 10 months agoLet me know if you find incorrect things in the code or bugs. I think having a bit a feedback on the TypeScript code would be great.
Have a nice day,
Tom.
Article preview component - No framework - Only CSS and Vanilla JS
PSubmitted 11 months agoMostly the HTML and CSS. I am okay with the JS part.
Have a nice day, Tom.
Social links profile - No framework - Only CSS using Grid
PSubmitted 11 months agoHaving advice about CSS Grid is always welcome :).
Four card feature section - No framework - Only CSS
PSubmitted 12 months agoBy giving me advice about my use of CSS unit. Should I use for example ch instead of pourcentages, em, or rem?
Thank you for passing by, Tom.
Recipe Page - No framework - Only CSS
PSubmitted 12 months agoSemantic and pixel perfect styling :)
Thank you, Tom!
Latest comments
- @RespeitaOPaiSubmitted 11 months agoP@tdimnetPosted 11 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 - I saw that some part of your CSS was in the HTML file. Here is an example of what I am talking about:
- @KahSRSubmitted 11 months agoWhat 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?.
P@tdimnetPosted 11 months agoHi @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
orcard__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 helpful0 - 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:
- @amirhirxSubmitted 11 months agoP@tdimnetPosted 11 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 aboutalt="Thumbnail"
andalt="avatar"
. For example, for the second one, you could replace it byalt="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 - You could be better with your
- @verakissyou17Submitted 11 months agoWhat 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.
P@tdimnetPosted 11 months agoHi @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 helpful1 - @Bishwajeet-07Submitted 11 months agoP@tdimnetPosted 11 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 helpful1 - @hannibal1631Submitted 12 months agoWhat 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.
P@tdimnetPosted 12 months agoHi 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