Natalia• 120
@NataMellado
Submitted
This time I learned and practiced using the CSS grid instead of relying on media queries. Any feedback is welcome!
Adarsh Rai
@AdarshRai0
All comments
- Adarsh Rai• 560
@AdarshRai0
Posted
I would like to express my appreciation for the meticulous organization of your file structure and the thoughtful approach you have employed in crafting the code structure. Your attention to detail and commitment to maintaining such high standards are commendable. Keep up the excellent work.
0 @MartinsitoBritoDiaz
Submitted
Hi, front end mentor community! This is my soluction to FAQ According Card.
Happy to hear feedback and advice. ;)
Adarsh Rai• 560@AdarshRai0
Posted
Hi Martinsito Brito Diaz , congratulations on your new challenge!✨🎯
0@MartinsitoBritoDiaz
Submitted
Hi, Front End Community! This is my soluction to FAQ According Card.
Happy to hear feedback and advice. ;)
Adarsh Rai• 560@AdarshRai0
Posted
Hi Martinsito Brito Diaz , congratulations on your new challenge!✨🎯
0- Alex Wesley• 70
@AlexWesleyy
Submitted
Any feedback is welcome!!!
Adarsh Rai• 560@AdarshRai0
Posted
Hi Alex Wesley , congratulations on your new challenge!✨🎯
Checkout
for more accurate solution you can check my solution so that you can have another angle to see
Marked as helpful
0 - Dorian Edwards• 110
@dorian-edwards
Submitted
Adarsh Rai• 560@AdarshRai0
Posted
Hi Dorian Edwards , congratulations on your new challenge!✨🎯
I took a look at your code and I have some tips for you.🙌
If you want to improve your solution a bit I've two advice for your:
Consider adding a lang attribute to the html start tag to declare the language of this document.
<html lang="en">It is a best practice to use both HTML 5 and ARIA landmarks to ensure all content is contained within a navigational region. In HTML5, you should use elements like header, nav, main, and footer. Their ARIA counterparts are role="banner", role="navigation", role="main", and role="contentinfo", in that order. By using both HTML5 and ARIA markup, you make the webpage more robust and functional no matter what screen reader technology is used.
<header role="banner"> <p>Put company logo, etc. here.</p> </header> <nav role="navigation"> <ul> <li>Put navigation here</li> </ul> </nav> <main role="main"> <p>Put main content here.</p> </main> <footer role="contentinfo"> <p>Put copyright, etc. here.</p> </footer>Ensure all content is contained within a landmark region, designated with HTML5 landmark elements and/or ARIA landmark regions.
Screen reader users can navigate to a section based on its HTML element or ARIA Landmark. For example , you might use ARIA Landmarks to provide a simple replacement for a skip navigation link, though the replacement is only useful for users of screen readers. Sighted users or people using screen enlargers won't benefit from the addition, so it's not a good practice to substitute ARIA landmarks for skip navigation links altogether.
<html lang="en"> <head> <title>Hello</title> </head> <body> <header>This is the header</header> <nav>This is the nav</nav> <main>This is the main</main> <footer>This is the footer</footer> </body> </html>Marked as helpful
1 - Dorian Edwards• 110
@dorian-edwards
Submitted
So many questions. I'm still wrapping my head around Typescript for starters. Having to declare the type of values passed as props is going to take some getting used to. And how can do this and still de-structure my props?
Using tailwindcss for the first time was also fun. I feel like using it more effectively will require more careful planning, e.g. setting up my theme configuration rather than shotgunning values into every class using square brackets.
I'm also not sure what the best way to deploy a react-app to github is. I lazily uploaded the production build so nothing can be seen of the individual components or anything. I'll probably go back and fix this after a bit of research...
Adarsh Rai• 560@AdarshRai0
Posted
Hi Dorian Edwards , congratulations on your new challenge!✨🎯
I took a look at your code and I have some tips for you.🙌
If you want to improve your solution a bit I've two advice for your:
Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools).
rfume</h3><h1 class=product-title bold mb-[1.6rem] text-dk-blu>GabrilMarked as helpful
1 - Luciano Fittipaldi• 110
@Lucianofitti
Submitted
Easy layout, difficult to make it responsive. Any feedback is welcome.
Adarsh Rai• 560@AdarshRai0
Posted
Hi Luciano Fittipaldi , congratulations on your new challenge!✨🎯
I took a look at your code and I have some tips for you.🙌
If you want to improve your solution a bit I've two advice for your:
Consider adding a lang attribute to the html start tag to declare the language of this document.
<html lang="en">Generally, it is a best practice to ensure that the beginning of a page's main content starts with a h1 element, and also to ensure that the page contains only one h1 element.
Usually the best practice is to start the main content of a web page with a level 1 heading (h1), with no other headings before this high-level heading. Mark the sub-sections of the page as level 2 headings (h2). If the level 2 sections contain sub-sections, mark these children as level 3 sections (h3) and so on.
Ensure all content is contained within a landmark region, designated with HTML5 landmark elements and/or ARIA landmark regions.
<html lang="en"> <head> <title>Hello</title> </head> <body> <header>This is the header</header> <nav>This is the nav</nav> <main>This is the main</main> <footer>This is the footer</footer> </body> </html>Marked as helpful
1 - Ibtissam• 260
@Devibtissam
Submitted
Hello, Frontend Mentor community! Here is my solution to the Intro component with the sign-up form challenge.
Happy to hear any feedback and advice
Adarsh Rai• 560@AdarshRai0
Posted
Hi Ibtissam , congratulations on your new challenge!✨🎯
1 - stripedtshirt• 110
@stripedtshirt
Submitted
Please can someone tell me how to update only one part of the card at once. i am pretty new to javascript
Adarsh Rai• 560@AdarshRai0
Posted
Hi stripedtshirt , congratulations on your new challenge!✨🎯
I took a look at your code and I have some tips for you.🙌
If you want to improve your solution a bit I've two advice for your:
checkout my solution of this challenge it help help you Improve your code
Marked as helpful
0 - Abdelrahman Khaled• 280
@Abdelrahman0Khaled
Submitted
I am still learning ..i took this challenge to apply what I learned, not as a challenge. this is my first with media quire and it toke a long time with me ..i need you take a look in my code and tile me if something not good or bad can i change it.. all feedback is welcome❤️
Adarsh Rai• 560@AdarshRai0
Posted
Hi Abdelrahman Khaled , congratulations on your new challenge!✨🎯
I took a look at your code and I have some tips for you.🙌
If you want to improve your solution a bit I've two advice for your:
Consider adding a lang attribute to the html start tag to declare the language of this document.
<html lang="en">Generally, it is a best practice to ensure that the beginning of a page's main content starts with a h1 element, and also to ensure that the page contains only one h1 element.
Usually the best practice is to start the main content of a web page with a level 1 heading (h1), with no other headings before this high-level heading. Mark the sub-sections of the page as level 2 headings (h2). If the level 2 sections contain sub-sections, mark these children as level 3 sections (h3) and so on.
Links must have discernible text
Context:
<a href="#"> <img src="images/icon-document.svg" alt=""> </a>Don't use a tag if not require. Ensure that all link names are accessible. It may be possible that the inner link text is not visible to a screen reader, that there are duplicate link labels, or that the link is not focusable.
Marked as helpful
0 - Ly Dinh Minh Man• 260
@winprn
Submitted
This challenge was fun. I added some features so that I can practice more JS. Hope you like it!
Adarsh Rai• 560@AdarshRai0
Posted
Hi Ly Dinh Minh Man, congratulations on your new challenge!✨🎯
I took a look at your code and I have some tips for you.🙌
If you want to improve your solution a bit I've two advice for your:
Consider adding a lang attribute to the html start tag to declare the language of this document.
<html lang="en">Generally, it is a best practice to ensure that the beginning of a page's main content starts with a h1 element, and also to ensure that the page contains only one h1 element.
Usually the best practice is to start the main content of a web page with a level 1 heading (h1), with no other headings before this high-level heading. Mark the sub-sections of the page as level 2 headings (h2). If the level 2 sections contain sub-sections, mark these children as level 3 sections (h3) and so on.
Marked as helpful
1 - Anosha Ahmed• 9,340
@anoshaahmed
Submitted
Would appreciate any suggestions to improve my code!
Adarsh Rai• 560@AdarshRai0
Posted
Well done Anosha Ahmed ! I checked your solution just wanted to know how you make your solution exactly same as the design any tips it can help me to improve;✨🎯
0 - Sathya D• 310
@satzzzzz07
Submitted
Hey all open to suggestions and feedback!!
Adarsh Rai• 560@AdarshRai0
Posted
Hi Sathya D, congratulations on your new challenge! 🎯🙌You had done a great job !!! I took a look at your code and I have some tips for you.💡✅ To avoid the HTML Issues Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
Document should have one main landmark
Context: <html lang="en">
All page content should be contained by landmarks div to Footer
Context:
<div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Daniel Daporta</a>. </div>To
<footer class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Daniel Daporta</a>. </footer>```Marked as helpful
0 - Robert M Schwindler• 170
@Robert0362
Submitted
Adarsh Rai• 560@AdarshRai0
Posted
Hi Robert M Schwindler, congratulations on your new challenge!✨🎯
I took a look at your code and I have some tips for you.🙌
If you want to improve your solution a bit I've two advice for your:
Consider adding a lang attribute to the html start tag to declare the language of this document.
<html lang="en">Semantic tags
The direct children of the body must be wrapped in semantic tags to indicate users about the various purposes of different parts of a webpage.
For example,
<header> ...header of the webpage... </header> <main> ...main content of the webpage... </main> <footer> ...footer of the webpage... </footer> </body>Bad value images\image-equilibrium.jpg for attribute src on element img: Backslash () used as path segment delimiter.
Context:
<img src=`images\image-equilibrium.jpg` alt=`Equilibrium Image` class=`image`>To
<img src=`images/image-equilibrium.jpg` alt=`Equilibrium Image` class=`image`>Congratulations, since your first project, your challenges have gotten better and better.
1 @JuakoG
Submitted
Adarsh Rai• 560@AdarshRai0
Posted
Hi Joaquin, congratulations on your new challenge! You had done a great job !!! I took a look at your code and I have some tips for you.
To avoid the HTML Issues Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
Images must have alternate text
Context:
<img src="./images/icon-ethereum.svg">Try adding alt in img tag<img src="./images/icon-ethereum.svg" alt="ethereum'>**The alt attribute specifies an alternate text for an area, if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). **
Ensure that the page or at least one of its frames contains a level-one heading.
Generally, it is a best practice to ensure that the beginning of a page's main content starts with a h1 element, and also to ensure that the page contains only one h1 element.
Usually the best practice is to start the main content of a web page with a level 1 heading (h1), with no other headings before this high-level heading. Mark the sub-sections of the page as level 2 headings (h2). If the level 2 sections contain sub-sections, mark these children as level 3 sections (h3) and so on.
Marked as helpful
0- Gastón• 40
@GasstonTorres
Submitted
Adarsh Rai• 560@AdarshRai0
Posted
Hi Gastón, congratulations on your new challenge! You had done a great job !!! I took a look at your code and I have some tips for you. To avoid the HTML Issues Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
Document should have one main landmark
Context: <html lang="en">Ensure that the page or at least one of its frames contains a level-one heading.
Generally, it is a best practice to ensure that the beginning of a page's main content starts with a h1 element, and also to ensure that the page contains only one h1 element.
Usually the best practice is to start the main content of a web page with a level 1 heading (h1), with no other headings before this high-level heading. Mark the sub-sections of the page as level 2 headings (h2). If the level 2 sections contain sub-sections, mark these children as level 3 sections (h3) and so on.
Marked as helpful
1 - Dorian Edwards• 110
@dorian-edwards
Submitted
Dear god working with the images drove me crazy. I went from trying to get it to stay in the corner so I made it a background image, but that looked weird on the widest screens (in retrospect I realize I could've just given that portion of the site, what I called the header, a max width as well 🤦🏾♂️. At any rate, I built an image component instead and used an image tag. I positioned it's wrapper with flex box and the image within with absolute positioning. I also didn't make it responsive so that it didn't shrink with the screen which looked weird. If anyone out there has a better solution, I'm all ears 😂
Adarsh Rai• 560@AdarshRai0
Posted
Hi Dorian, congratulations on your new challenge!
1 - Yessika• 10
@yessikaplata
Submitted
Adarsh Rai• 560@AdarshRai0
Posted
Great you Had Solved Your Issuse .. **Now for More Challenging ** Try Making your solution as the design;🎯✅
0 - Yessika• 10
@yessikaplata
Submitted
Adarsh Rai• 560@AdarshRai0
Posted
Hi Yessika, congratulations on your new challenge! You had done a great job !!! I took a look at your code and I have some tips for you. To avoid the HTML Issues Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
Document should have one main landmark
Context: <html lang="en">All page content should be contained by landmarks div to Footer
Context:
<div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Daniel Daporta</a>. </div>To
<footer class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Daniel Daporta</a>. </footer>0 - Daniel Daporta• 110
@Daporta
Submitted
What did you find difficult while building the project? to active one button at a time
Which areas of your code are you unsure of? I would like to know if my code is efficient.
Do you have any questions about best practices? I would like to know how a high-level developer would solve the request.
Adarsh Rai• 560@AdarshRai0
Posted
Hi Daniel, congratulations on your new challenge! You had done a great job !!! I took a look at your code and I have some tips for you. To avoid the HTML Issues Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
Document should have one main landmark
Context:
<html lang="en">All page content should be contained by landmarks div to Footer
Context:
<div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Daniel Daporta</a>. </div>To
<footer class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Daniel Daporta</a>. </footer>Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree.)
<div class="starLogo"> <span class='starBackground'> <div class="starImgHolder"> <img src='./images/icon-star.svg' alt="" /> </div> </span> </div>0 - Martin Santillan• 70
@SantillanMartin
Submitted
Adarsh Rai• 560@AdarshRai0
Posted
Hi Martin, congratulations on your new challenge!
I took a look at your code and I have some tips for you. To avoid the HTML Issues Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
0 - Adarsh Rai• 560
@AdarshRai0
Submitted
👾 Hello, Frontend Mentor coding community. This is my solution for the Todo app.
Feel free to leave any feedback and help me improve my solution or make the code clean!✨❤️
Adarsh Rai• 560@AdarshRai0
Posted
Thankz for such an Explantion..!!!✨ Surely Implimenting this Thought in code..
1 @rajnishps
Submitted
Adarsh Rai• 560@AdarshRai0
Posted
Hi Rajnish, congratulations on your new challenge!
I took a look at your code and I have some tips for you.
Always add the "!DOCTYPE"HTML Language
<html lang="en">Browser has a default style sheet called User Agent Stylesheet which adds margin to headings and paragraphs and applies font properties to all elements.
I usually reset all the styles and I start from scratch.
Here is my styles.css
:root{ /* colors and fonts */ --font: "Montserrat", sans-serif; --white: #ffffff; } *{ margin: 0; padding: 0; box-sizing: border-box; } html{ font-size: 62.5%; } html, body{ height: 100%; } body{ width: 100%; font-family: var(--font); } /* Other rule-sets */Congratulations, since your first project, your challenges have gotten better and better.
1- Bismeet singh• 190
@BismeetSingh
Submitted
This was a relatively easy project, any suggestions to improve are welcome.
Adarsh Rai• 560@AdarshRai0
Posted
Browser has a default style sheet called User Agent Stylesheet which adds margin to headings and paragraphs and applies font properties to all elements.
I usually reset all the styles and I start from scratch.
Here is my styles.css
:root{ /* colors and fonts */ --font: "Montserrat", sans-serif; --white: #ffffff; } *{ margin: 0; padding: 0; box-sizing: border-box; } html{ font-size: 62.5%; } html, body{ height: 100%; } body{ width: 100%; font-family: var(--font); } /* Other rule-sets */0
