🤕 Need Help! This is my third challenge here and this is by far the most difficult one I have encountered. I managed to make the desktop design work but it still isn't quite good 😶. And I can't really configure how to design the mobile design. Please kindly help me 🙏🏻. I really do appreciate your help 🤩.
Hello, the css looks little bit messy to me, but I assume, that it is desktop-first.
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.
Another challenge. Any feedback welcome!
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.
Can someone help me with that popup ? I couldn't make it work. Also can someone suggest how to better improve my code and overall design of the page ? Thank you !
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!
Hi, I am a junior developer and I would be grateful for your feedback!
Zdravím Tome, 🇨🇿 vítej na FM.
Skvělá první challenge 👍 těším se na další!
Tereza
Comments please!
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.
Happy coding!
Any feedback ll be welcome / Qualquer feedback será bem-vindo :)
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!
Hey guys, I tried using Scss in this project. Let me know if I can improve anything. Thanks!!
Hello Manmohan7 :)
For your next or bigger project try to watch this super video from coder coder. She uses scss and this tutorial helped me a lot on my beginning with scss.
Your work is really good. I look forward to your next challenge.
I have a doubt regarding the bottom circle which is overflowing can anyone have any advice for it?
Hello, the problem with the bottom circle is that it has not set the z-index. So the browser doesn't know, which element should be on top.
But instead of setting this, try to add these two circles into the ::before and ::after selectors. These images are not the part of the content they are only a background, so you can put them into the css.
Happy coding!
Somehow, the width: 100%; inside the .purple class in my css was not filling the entire picture. So, I set it to 101%;
Well, I have no ideia why that did not work.
Hello, nice work! :)
I have some suggestions:
the .purple div is unnecessary. You can add background: hsl(277, 64%, 61%); to the div .image and to the .img-desktop add mix-blend-mode: multiply;. Result be the same and there will not be the problem with 101%.
You don't have to use the double img tag for desktop and mobile version. Try to use <img srcset="..."> - link to the documentation.
try to use BEM naming in you future projects. This is small project, but naming div "image" is not the best practise in a bigger project.
This is my 1st attempt at html and css. Please give me feedback. Go easy on me. Thank you
Hello, I saw you code. I think that naming components like "img" etc. is not the best idea. Try to look at BEM naming. This is a small project, but in bigger designs you will get lost.
I think, that you can make the image from side to side with 'object-fit: cover' property.
The whole component should have the maximum width set on specific size. If you have large screen then the width is now set on 100% and it looks strange.
The border radius is better to set with px or rem units.
Happy coding 👍
Is there a better way to do the background blobs?
Hello,
I see in the code, that you put the blobs into the body background. I can't see them in a preview. I see in the develper tools, that the path to the blobs is broken.
You can put them to the background like you do or you can use ::before and ::after pseudo-selectors.
I would appreciate if you all suggest me ways to improve my code since I really faced difficulties in applying the background color and at last took a shortcut(not using css) and also I faced certain problems in media queries and I'm not really sure if its written in a correct manner.
Hello,
Nice work. I have some suggestions:
Have a nice day :)
