@DummyKenSubmitted over 3 years ago
Latest solutions
Latest comments
- @sirriahPosted over 3 years ago
Hello, the css looks little bit messy to me, but I assume, that it is desktop-first.
- the line 113 should be '@media(max-width: 375px){'
- the .text-section in mobile view need the flex-direction: column
- paddings in mobile view have smaller values
- the stats part needs to be designed with flexbox too
- the image with the overlay should be made as background image with overlay blend mode, see the documentation
- in HTML, you should add the h1 and other headlines. It helps to assistive technologies and SEO. Look to semantic HTML.
- You can try to use mobile-first design
- there are more problems, but those are the biggest
What browser do you use? I know that chrome and firefox have the developer tools, where you can inspect the html/css/js. It can really helps you.
Marked as helpful2 - @tomruzickaSubmitted over 3 years ago@sirriahPosted over 3 years ago
Ahoj Tome, vypadá to skvěle, jen u 'content__left' ti vypadlo pozadí - je tam špatné lomítko v cestě k souboru.
Mám dotaz: je nutné dávat prefix u flexboxu? Viděla jsem, že to používáš. Podle caniuse.com je podpora flexboxu dobrá. Já u těch prefixů nikdy nevím, jestli je mám nebo nemám použít.
0 - @iulian-cenusaSubmitted over 3 years ago@sirriahPosted over 3 years ago
Hello, don't use % for the width of elements. Watch this tutorial about units. It is better to use rems.
I see that you split css into the multiple files. I think, that it is not necessary in this small challenge. If you want to split, you should import the css parts into the one styles.css. And this one styles.css should be linked in the HTML file.
For me personaly is good to split the components, not the desktop/mobile/tablet view. So, make the component as a separate file, but put all media queries into this one file. It is more readable for another developers.
Happy coding!
Marked as helpful2 - @tomruzickaSubmitted over 3 years ago@sirriahPosted over 3 years ago
Zdravím Tome, 🇨🇿 vítej na FM.
- zkus příští projekt udělat mobile-first
- mrkni na BEM naming
- podívej se na semantic HTML, tahle challenge je malá, ale určitě by se tam daly použít tagy jako header, main a footer :)
Skvělá první challenge 👍 těším se na další!
Tereza
Marked as helpful1 - @DanielSereSubmitted over 3 years ago@sirriahPosted over 3 years ago
Hello DanielSere, I saw your code. I think that it would be better to use some h1-h6 tags. Specially for the name (Victor Crest). Same for the folowers, likes and photos. Try to use better tags - see some videos or articles about semantic HTML. It is important for the SEO and for the accessibility.
Useful links - look at the code of this project made by Grace
Some reading about semantic HTML.
- freeCodeCamp blog
- [MDN Accessibility] (https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
- [MDN Semantics] (https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html)
Happy coding!
1 - @FabioAugustoDamettoSubmitted almost 4 years ago@sirriahPosted almost 4 years ago
Hello,
nice work :). I see one problem - the theme switcher. In firefox I see that it is made with checkboxes, but I think that radiobuttons would be better. Checkboxes can be checked all together, but in a group of radiobuttons can turned on only one of them. In your app I could turn on all three options in one time. Happy coding!
0
