Hello Frontend Mentor Community! This here is my second Frontend Mentor project, using only html and css (sass preprocessor). In this project, I was focusing more on using Semantic HTML above everything else. Also, this was my first time attempting to use media query to make a website that is responsive to mobile view. Any feedback on best practices for Semantic HTML and mobile first design would be greatly appreciated. Thank y'all !
Great solution, congratulations, as regards your question on accessibility, the entire app should be wrapped in a <main></main> tag not an article. I thing the word 'Perfume' should be the h1 and then the name of the perfume an h2. Lastly instead of hiding on picture on mobile and showing it on desktop using css, you can use the <picture></picture> tag, read about it, it is more concise.
Great solution, one thing i would encourage to learn more about heading level elements, you don't move from h1 to h3, so change all the h3s to h2s
Is there way to change css of the checkbox or any alternative way to use checkbox like feature?🧐 I wanted to show some a nested component as default (using react router) when whole page renders for first time but wasn't able to is there a way to do it?
you should wrap everything you want to be the default in a <Router></Router> components, everything outside of it is the changeable part....
Is there way to change css of the checkbox or any alternative way to use checkbox like feature?🧐 I wanted to show some a nested component as default (using react router) when whole page renders for first time but wasn't able to is there a way to do it?
I have not understood the second part of your question, but changing the css of a checkbox is a tricky one that may be difficult to explain, i will refer you to a youtube video of kyle from webdev simplified, that might help. https://youtu.be/YyLzwR-iXtI
Hi Community
Few questions on my solution
/sass folder where I dump all my .scss files.What I mean is to have a folder structure like this
/Navbar
- Navbar.tsx
- Navbar.styles.scss
You can use scoped css in react ot achieve styles unique to the component you want. You will have a 'Navbar.tsx' and then 'Navbar.module.scss'. And then in your component you import the styles like "import styles from './Navbar.module.scss'" you can call it whatever, the name styles is optional, you say "import classes from 'Navbar.module.scss'". To use the styles in your components you do it this way
function Navbar() {
return (
<nav className={styles.nav}>contents</nav>
)
}
the 'nav' in syles.nav refers to a class in your Navabar.module.scss, Which means you should have something like below in the file
.nav {your style rules}
so what ever class you have, you refer to it in the jsx by saying styles.the_name_of_the_class
I wonder if it is possible to use span elements for creating a rate line, instead of a list with buttons. Is it semantically correct? I will add a snippet of code, which I wrote at first.
html: <div class="rate_numbers"> <span class="numbers">1</span> <span class="numbers">2</span> <span class="numbers">3</span> <span class="numbers">4</span> <span class="numbers">5 </span>
</div>scss: rate_numbers { margin-bottom: 23px; display: flex; justify-content: space-between; } .numbers { display: inline-block; background-color: var(--dark-blue-grey); text-align: center; width: 37px; height: 37px; padding: 10px; border-radius: 30px; cursor: pointer; transition: all 0.5s ease; } .numbers:last-child { margin-right: 0; }
.numbers:hover { background-color: var(--orange); color: var(--white); } .numbers:active { background-color: var(--medium-grey); color: var(--white); }
No a screen reader wouldn't be able to recognize that, you have a div which is a generic tag with no semantic meaning filled with spans which also generic tags with no semantic meaning
I did some learning on tailwindcss and decided to implement it with this challenge, please i need your feedback, i honestly don't really fancy this tailwind, because it makes my codes look bulky, or am i writing the codes wrongly? is there a better way to write tailwindcss?... i still prefer regular css
But tailwind is not the only css framework out there so you can still use something that you will find you love, like @Steve said above..
I did some learning on tailwindcss and decided to implement it with this challenge, please i need your feedback, i honestly don't really fancy this tailwind, because it makes my codes look bulky, or am i writing the codes wrongly? is there a better way to write tailwindcss?... i still prefer regular css
Yes it makes the code look dirty but that is the disadvantage, however the advantages outweigh them, you prefer regular css because these are small project, when you begin working large stuff, css will become so complex that you will understand why there are frameworks in the first place. That is why frameworks are not for small projects, regular css and js is just enough for these, the benefits of frameworks show when you begin doing some real world stuff.
I don't know how to create a hamburger menu
I will encourage you to go find a tutorial on how to build a responsive menu with html css and javascript as that is too much to explain in a text
If you have any questions regarding my answer I will do my best to give a proper response.
Feedback on my code:
Make sure you link the right repo, but i have seen the right one, one thing you should do firstly is to wrap the entire app in a main tag, this is the tag that tells that this is the main content of the page, as for the headings, try to think of them as headings in the real world, heading are just titles that summarise the content of a certain section, so the text "You result" is definitely a heading, but the number 76 is not, so correct it. Every page should have a h1 heading level element, you don't just start with h4, it has to follow the hieriachy, when ever you see anything that can be a heading, you must look above and check if there is already one, if so what level is it, if the last was an h1 then the next should be h2, if it was h2 then the next should be either h2 or below, you don't randomly put them. One thing that might confuse you is the font size, always know that the structure of html has nothing to do with styling, so you can have an h1 and give it a small font size just like in this challenge.
If you have any questions regarding my answer I will do my best to give a proper response.
Feedback on my code:
You have linked the wrong github repo, its linking to the qr code component
How do we know when to use display:flex? And is it a best practice to use the em unit on paddings and margin?
You use flex when you want to create a layout where two items are side by side like the layout in this challenge, another alternative is to use grid, its personal preference which one you choose in my opinion. em is fine for margin and padding yes. Although it may behave strangely if you don't understand how it works, so i suggest you really delve deep into learning about it otherwise using rem is good enough.
