@Chaimaejebrane
Latest solutions
Testimonials Grid Section Main
Submitted 9 months agoI can't understand why the cards are being rendered this way. On Live Server, the page looks correct, but on the GitHub link, they are stretched, and I can't figure out where the error in the code is.
Four card feature section
Submitted 9 months agoI had trouble centering the text after the main title. I was using Flexbox, and when I applied
max-widthto the text to create the line-break effect without using ``, the text was aligned to the left, as if it wasn’t following Flexbox behavior. Neithertext-alignnoralign-selfset tocenterworked. I usedmargin-inline-start, but I would like another solution.Any other tips about something I might be missing would be greatly appreciated!
Product Preview Card
Submitted 9 months agoI wrote the code mobile-first, but after using media queries for larger screens, the rendering for smaller screens made the card larger. Could anyone tell me what happened? Any tips are appreciated!
Recipe Page - Responsive
Submitted 11 months ago- Although I found solutions for the table borders, if you have any tips on using just
border, it would be great to make the code shorter (I think). - Using
::beforefor the list markers was a solution, but I couldn’t make the samefont-sizechanges with::marker. Any tips? - I reused code from other cards in the Frontend Mentor challenges to make this card appear centered vertically and horizontally, but vertically it is "fixed" at the top of the page, without showing the background. How can I fix this?
- I’m open to any other tips on the code!
- Although I found solutions for the table borders, if you have any tips on using just
Social Links Profile
Submitted 11 months agoI welcome all tips, especially on how to make an element behave the same way regardless of screen size (for example, laptops and desktops). Is this defined in the body?
Latest comments
- @eros77sc
Hello,
It's great that you completed another challenge! I would love to give you tips and comment on your code, but both your Live Site and GitHub returned a 404 Error! Anyway, congratulations on your achievement!
Happy coding journey to you!
- @HIGHZIKdcWhat 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?....
@eros77scHello!
Congrats on completing another step on Frontend Mentor! Here are a few things I noticed:
- It's really cool that you chose the mobile-first approach. Besides making the code lighter for mobile users, it ends up being easier for us to write the code since with media queries, you just add things instead of removing them.
- Something seems to have happened because in the Frontend Mentor screenshot, the page looks very similar to the original. However, when visiting the live site, the cards are spread out, taking up almost the entire width of the page in a row. I’d like to understand Grid better to give you some tips on how to fix this based on your code, but I'll owe you that one for now.
- One small detail: the body
background-coloris that--clr-neutral-100: hsl(0, 0%, 98%)you declared, and the cards have the background color you set for them.
Wishing you a great coding journey!
- @manuel360What are you most proud of, and what would you do differently next time?
Being able to insert background images and cleared original html image using visibility and overflow hidden
What challenges did you encounter, and how did you overcome them?My challenge was the desktop screen sizing i.e. horizontal layout which is the flex-row;
What specific areas of your project would you like help with?Am still not that good in css framework but am a pure css person
@eros77scHi!
Great job on creating another page! Here are a few small things I noticed about your code:
- Good idea using
background-image; another possibility could have been to use the<picture>element, allowing the browser to choose the ideal image depending on the size, which would help reduce the amount of code needed for properties likevisibilityandbackground. - One tip you might want to apply is about the visual organization of your code: try to maintain consistent indentation for selectors, properties, and values. This makes it easier to read and locate information. The same applies to the spacing between each CSS rule.
- The button could be created with a
<button>element instead of<div class="button">, as it not only makes the HTML more semantic but also more accessible. In the end, it allows for the same CSS styling. - You mentioned that scaling for desktop was a challenge, but you did a great job! And the mobile version looks really good too.
Happy coding, take care!
Marked as helpful - Good idea using
- @hamody-74@eros77sc
Hello! Congratulations on completing another challenge, it's very well done! Here are a few tips I noticed where you can improve:
- Your
intro-text<h1>receives a color described in the styleguide.md file and also gets font-weight: 400;. - In the "Preparation time" section, there is a box surrounding the section with a subtle color (almost transparent) described in the styleguide.md file.
- Great job using
::marker, but the color of the "Preparation time" markers is different from the other list markers. Also, the numerical list markers are bold. - The colors of the titles "Ingredients," "Instructions," "Nutrition," and the table numbers follow the same brown described in the styleguide.md.
- To better use Semantic HTML, there is no need to use
<span>in<li>. You can choose to use<strong>for the words highlighted in bold.
Keep up the good work, you're doing great!
Marked as helpful - Your
- @Exterminator737@eros77sc
Hello! I looked at your code and noticed that you placed the links in <button> elements. However, the href attribute is not used with <button> elements, so in this case, it would be ideal to use <a> elements and then style them as buttons using CSS.
Marked as helpful - @MohamedAbdelBAQIMo@eros77sc
Hello, Mohamed! It's great that you're also on the Frontend Mentor journey. I liked your solution, and I'd like to give you some tips, if that's okay with you?
- It would be helpful if you could review Semantic HTML, as it helps developers, browsers, and assistive technologies to function better. For example, replacing <div> with <main> or <footer>, and also checking the importance of the order of <h1> to <h6>.
- The color of the "Learning" label is the same as the background!
- There are other details like borders and box-shadow, and the border-radius could be larger, but I don't want to be too picky with you. You have your own learning journey ahead!
Marked as helpful
