Looking to hire developers?
@M-lakshan
@blurridge
Submitted
I found this easier compared to the previous project which was the product card. I am a bit confused though as to when to use certain units in CSS like em, rem, %, px, vh, vw. Can I get any inputs on the units I used, and if I used any of them wrong, which one should I use and why?
@M-lakshan
Posted
em, rem, %, vh, vw are produce dynamic sizes while em depends on the page's default font value, rem depends on the element u are styling & %, view-height, view-width are depends on the projecting resolution.
px, pc, pt will always produce static values. these are universal for sizing that beginning from 1px >= 0.1pc ( roughly 10px = 1pc ) & 16px = 12pt.
from things I've learned its better to use rem, em values only for fonts because if we consider a component with dynamic values may change the alignments since they are dynamic. its up to u to choose what considering the situation. however u can change the em's default value ( 1em = 16px standard default ) to any size you prefer by putting html { font-size: 10px; } in top of your stylesheet. according to that if u had used margin-top: 1em for an element, it will be margin-top: 10px; because we reduce the default font size from 16px to 10px.
hope this helps 🙂
Marked as helpful
@klara367
Submitted
Hi everyone,
this challenge tested my positioning skills a little. If you have any tips for more efficient code, please leave a comment.
Thank you
Klara
@M-lakshan
Posted
Hello Klara,
I also did this recently. There are few things u need to focus on. If we consider such a web page (like an actual cloud platform or content share page) those <img src="*****.svg"> beside the logo <img> should be either button elements or link elements because they should perform an action in that area.
Next time try giving a static position for a background image by background-position: 0% bottom;. This way the image always stays bottom according to the view height. If you give only the dynamic percentage value, the image will move away from the alignments when the screen size change.
Other than that, I like the way u kept the CSS code as simple as possible. So good luck then, Happy coding! 🙂
Marked as helpful
@Mentorosy
Submitted
any correction are welcome
@M-lakshan
Posted
Hello @Mentorosy, 1. You did a good job creating the basic HTML structure but seems you have a lack of experience in element styling. Since this is a simple build you can use CSS Flexbox here for element positioning. Likewise, learn more about CSS stylings. There are many beginner tutorials on the internet. Also, refer to some official documentation on w3schools.com and developer.mozilla.org websites as well. It will be beneficial to you if use a standered lightweight code editor like VS Code that defines the CSS properties in real-time while you work. 2. Refer to the project files completely. Follow the style guide Frontend Mentor provided. These files have all the proper instructions to complete your project. 3. Keep a dedicated folder structure for your file types from the beginning. Take a look at other sample projects done by others. You will get the idea.
Marked as helpful
@SattyamSamania
Submitted
I have made this project using Html and Css only. Feedbacks are welcomed.
@M-lakshan
Posted
you created the component well but u missed a few steps. 1. do read the style-guide.md file they provided - follow the instructions 2. add the relevant fonts they hv mentioned 3. u provided the wrong URL for your current project repository - fix it 4. keep a proper file structure in your file base. ( keep CSS only inside of a CSS folder + images only in an images folder likewise )
@M-lakshan
Submitted
coding after a long time... this is my 11th NEWBIE-Free build-up & learned a new uncommon CSS property - 'text-underline-offset:'. This thing might be helpful to you. 🙂
@M-lakshan
Posted
the main illustration is not showing up for some reason. any ideas why?
@nickyczy
Submitted
Only trouble i have was getting the @media screen issue below 375px AND how to import JSON file and file changes according to changes in the JSON file.
Any help would be highly appreciated. PLEASE I WOULD LOVE TO LEARN to improve.
@M-lakshan
Posted
Add JS event-listeners for window resizing. You can't import JSON files with CSS, it has to go with JS
@quocbao19982009
Submitted
Hi, I found myself struggling with this challenge! The challenge wasn't perfect as I wanted but I think I am hard stuck here. Any feedback, comments will be appreciated! Thank You!
Q1: I really struggle to get set up the image. First of all, the desktop-background-pattern was too big so it was very hard for me to position it with "position: absolute". Is there any better way to solve this?
Q2: There are 3 main Images: Box, Woman, Background. How can I make the Box on top of Woman and Woman on top Background? I manage to do some part of it but the background overflow to the top of the card which I don't know how to fix. Is there any way to have these Images in a Div, and select only the Box with "overflow: visible" and the two is "overflow: Hidden"?
Q3: The box was placed inside the Card-Container, if the Card Expense, the Box move. I try to fix this by grouping it with Woman and Background Div but it will get Hidden and not overflow. So what can I do to make the box stay still with Woman and Background, while still get it Overflow: visible to the Card-container?
Q4: I use Max-height to create a smooth look when opening the question. I feel like when I close it, it is not as smooth as I open it. What can I do to give a better User Experience?
Q5: I feel like I am really weak when it comes to positioning, could you recommend me any Videos, sources so that I can improve? It will be very appriciated!
@M-lakshan
Posted
I did this recently.. I had the same issues as yours. These things will help you 🙂 !
for Q1,Q2 : it can't be done that way. I used CSS for background img as background 1 & woman's img as background 2 and set their container ( div ) position 'relative'. then box img at the end of HTML & set it to position 'absolute'.
for Q3 : use nested div_s for each item but don't go with two many.
for Q4 : add transitions with created @keyframes.
for Q5 : FreeCodeCamp CSS/JS, KevinPowell's CSS, Dani Krossing's CSS/JS tutorials. work more on JS.
@Bijay4444
Submitted
I would appreciate any feedback. I referenced the javascript from coder coder channel. It was quite an insight to learn how to go through the accordion.
@M-lakshan
Posted
also, try the ' TraversyMedia, FreeCodeCamp, BenAwod's, KevinPowell's, Dani Krossing's ' channels to boost up your efficiency. spend more time with CSS & JS. GoodLuck!
Marked as helpful
