@RespeitaOPai
Submitted
@tdimnet
@RespeitaOPai
Submitted
@tdimnet
Posted
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:
<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.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/Other than that, it's great first project!
Have a nice day, Tom.
@KahSR
Submitted
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?
.
@tdimnet
Posted
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:
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 ^^.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
@amirhirx
Submitted
@tdimnet
Posted
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:
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".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
Submitted
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.
@tdimnet
Posted
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:
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
@Bishwajeet-07
Submitted
@tdimnet
Posted
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
@hannibal1631
Submitted
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.
@tdimnet
Posted
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.
@jvisme1991
Submitted
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
@tdimnet
Posted
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
@imbraian
Submitted
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).
@tdimnet
Posted
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.
@Nasserio10
Submitted
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
@tdimnet
Posted
Hi Nasserio10,
Nice project! You did a great job.
There are a few things you could improve for next time:
Other than that, this is great :).
Have a nice day, Tom.
@cynthiachinenye
Submitted
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
@tdimnet
Posted
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.
@AcharaChisomSolomon
Submitted
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.
@tdimnet
Posted
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
@PhilippeItsMe
Submitted
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" : /
@tdimnet
Posted
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 👍!