@Abubakar-Tanko
Submitted
Feedbacks are always welcomed. Thank you in advance 😊
@yannmarc
@Abubakar-Tanko
Submitted
Feedbacks are always welcomed. Thank you in advance 😊
@yannmarc
Posted
Hello, my friend! You've been doing an excellent job so far. I would like to offer you a few pieces of advice that I believe can be helpful.
<footer>
.info of section .two
and your section .four
doesn't look good on mobile.
By employing media queries, you can enhance the mobile optimisation of your work and elevate the user experience to new heights. Here you can maximise the full potential of your flexboxYou can use the article from Fedmentor to lean more about media-queries
Marked as helpful
@Sasa-Tausan
Submitted
If possible, i would like feedback from more experienced developers. I used react and i think that my css and my approach of building the project is not the best but since I am a beginner and still learning I would be grateful to see different approach to creating a project. I also made a countdown timer.
@yannmarc
Posted
Great job, your solution is lit 🔥
Happy hacking, You rock! 🤘🏾💯
Marked as helpful
@AmeerMoustafa
Submitted
Would love feedback on best practices.
@yannmarc
Posted
Great job dude 💯✨ Your solution rocks 🤘🏾 below are few recomendations to make it a banger:
Do well to prioritise the mobile-first approach for your frontend projects.
Your component-container
class doesn't look good on mobile, here's a quick fix to make it awesome 😉
@media (max-width: 424px) { body { padding-inline: 24px; } .component-container { width: 100%; } }
to make it more subtle on mobile viewports.👌🏾
To ensure optimal display on desktop and tablet views, it is recommended to utilise the max-width
property instead of setting the width to a specific percentage, such as width: 50%
. This approach ensures responsive and adaptable rendering across different screen sizes.
Overall your code is neat, well connected, a masterpiece. Keep hacking, you're amazing!
Marked as helpful
@JohnsonSamuel324
Submitted
This is the first project when trying to make webpage responsive to both desktop and mobile. Let me know if there's anything I could've fixed or recommendations :) Is adding the <main> tag redundant to the <body> tag?
@yannmarc
Posted
Hi friend 👋🏾 Great job 💯
Let me provide you with a comprehensive explanation to address your concerns regarding the use of the <main></main>
tag alongside the <body></body>
tag.🤓
In HTML5, the use of semantic elements is highly encouraged as it helps convey the structure and meaning of a webpage to both browsers and search engine crawlers. The <body>
tag serves the purpose of indicating where the visible content of your website begins. It encompasses all the content that users can see and interact with, such as headings, paragraphs, images, and other elements.
On the other hand, the <main>
tag has a specific semantic meaning. It is used to mark the primary or most important content of a webpage. By using the <main> tag, you are explicitly telling the browser and search engines that the content enclosed within it represents the core information or focal point of your webpage.
By employing the <main>
tag, you are not duplicating the functionality of the <body>
tag. Instead, you are providing additional information about the structure and significance of your webpage's content. This can be beneficial for search engine optimization (SEO) purposes, as it helps search engines understand and index your content more accurately.
Hope you find this useful. Happy hacking, you're amazing!
@ldonnianni
Submitted
I would like to know how to approach the desktop and mobile design approach. I am not sure how to resolve that. I was given specific size for desktop and mobile (1440 px and 375px) but I didn't know what to do with them.
What it would have been in this case the best practice to center the QR card. I use position absolute and transform. Or it would have been better to use Flex?
Thanks
@yannmarc
Posted
Hello there! Great job on your solution! I'd like to provide some feedback to further enhance your work:
HTML Semantics: Consider adding a description to your images using the alt attribute. This will not only improve the accessibility of your page but also provide alternative text for users who may have trouble viewing the images. You can use the syntax alt="alt text"
to achieve this.
Container Styling: Instead of using a fixed width for your container, I recommend using max-width: 250px
to ensure that it remains within a reasonable size on smaller viewports. Additionally, setting width: 100%
will make your container card more responsive, adapting well to different screen sizes.
Body Section: To create some breathing space around the corners on smaller viewports, consider adding padding-inline: 24px
to your body section. This will introduce a bit of white space and improve the overall visual appeal.
Container Image: To ensure that the image within your container fits the width of its parent, you can apply width: 100%
to the container img style. Additionally, adding margin-inline: auto will centre the image horizontally within the container.
By implementing these suggestions, your solution will become even more polished and user-friendly. Keep up the great work! 🤓
Marked as helpful
@sorrasak-code
Submitted
@yannmarc
Posted
Hi @sorrasak-code!
Great solution 🎊
(min-width: breakpoint)
.container { padding: 1.5rem };
can be reduce on breakpoints < 370px
to make the spacing more mature.Marked as helpful
kindly everyone give your feedback , your feedback much helpful in my coding skills
@yannmarc
Posted
Hi @karthikeyan13121999! Your solution looks good in my opinion.
Here are some modifications to make your code killers:
I like your CSS, but it could use a little more work.
Use CSS variables; they offer additional flexibility in terms of value and scoping accessibility. Therefore, use variables to make your CSS code **banger! ** :root { --variable-name: variable-value;
DRY This approach to coding is crucial. Utilize the idea of utility classes to incorporate this into your CSS. To accomplish this, incorporate patterns into your design and create a ".utility-class" to hold them.
Using CSS Resets the browser's style and some HTML elements will make your life much more easier * -- Optional*
It's not advisable to do this .box div{ padding: 8px;}
because you can accidentally target create a layout where the above styling may apply, and may result in bugs. Rather use this:
`.box .add-a-class-to-div {padding: 8px}
For responsive design there's a pattern or approach called: mobile first so using max-width
but mobile first gives more flexibility.
Marked as helpful
@dellenar
Submitted
Hello There,
It's been a month since i start learning how to code. If you have a time please review my code and let me know if something i should look into or if there is any method that I'm using wrong.
Thank you in advance !
@yannmarc
Posted
Hi Friend!
That's all what I got for you, Great job. Keep Up. Regard
Marked as helpful
@Gurnav224
Submitted
I found diffculty when adding background top and bottom img to the card
@yannmarc
Posted
Marked as helpful
@marcusvcalves
Submitted
@yannmarc
Posted
Good job friend!!
Try including container your div's in landmarks or semantic HTML tags. This should solve the accessibilities issue of your work. For landmarks use this:
<div class="my-div" role="sectionmydiv"> </div>
This should solve your issues.
Try comment your code also, which are signs of good practices (write meaningful comments).
Avoid styling the tag element itself, rather use a class for it. Which is also good practices.
Note The classes should be self descriptive.
@pexeixv
Submitted
@yannmarc
Posted
Hello Friend!
You Rock!!
Your code suffers from accessibility issues and HTML semantics.
Try wrapping your sections
into a main
tag.
Thinking about screen readers your accessibility must be good, so for this, try adding alt
labels to your images. This gives them a description.
For landmarks issues try adding role to your attributes to your section. Example `role= 'contactinfo'.
For your layout, responsiveness is not that good across the different viewports. Follow the mobile first approach to your work, and this should solve it.
@yannmarc
Posted
Hello 👋🏼
I love your work.
But I got some few remarks to make:
Your HTML is not semantic which is probably why you are getting some accessibilities issues with your work. To cover this up, try using landmarks for; your container div
should have a role = main or container
like wise for any sections of your code to give it some semantic for screen readers.
Your layout looks big on big screens, I went through you CSS code and your body has a max-width: 1440px
which should be applied to the container. unlike other CSS library this container has max-width: 1100px
Your code structure is good but try commenting where necessary it can be useful to us reading your code.
Try using CSS resets to ease your workflow example img { width: 100%; object-fit: cover; }
Marked as helpful