Ali• 10
@Github-Ali341
Submitted
P
subu
@subu-v
All comments
On the body element, use background-repeat:no-repeat; // so that the pattern don't repeat again. background-size:contain; // so that the background-image you used covers available width space. background-color: #000; // this will apply the color to the rest of the space that is not covered by the background image you used
0- Babal Preet Singh• 220
@Godonway
Submitted
Please, could you suggest me some proper semantic class names for CSS?
also, could you suggest useful references for flexbox and grid exercises?
- Coming up with good class names are indeed a pain but there is no proper methods to do so, we have to come up with class names ourselves.
- To practice flexbox, https://mastery.games/flexboxzombies/
- To practice grid, https://cssgridgarden.com/
0 - JackoWill• 40
@JackoWill
Submitted
My third project on FEM. Absolutely loving it. It is really giving me motivation to learn more.
Would love to hear feedback from people if I need to fix anything up, still a big newbie here so any tips would be much appreciated!
Kind regards, Jacko
Great works,
- you can see your background-image is repeating itself, in order to avoid that use background-repeat: no-repeat.
- Set the background-color of body element to the blue it shows on the required design
Marked as helpful
0 - Welyn Cespedes• 50
@Smailer022
Submitted
What can I do to improve?
You did well to get the exact results, one thing i will suggest is that, you can clearly see that your background-image is the not same as the required design background-image.
Yours get repeating.
To stop this, use
background-repeat : no-repeat; //this will stop repeating the background-image.Marked as helpful
1 - Vani• 160
@VANIMEHTA
Submitted
1)How do i merge the two images ie the box image and person image as shoen in the design file. 2)Im still struggling with java script so somebody pls help with the script code its not working:/.
Regarding images, Use this property on the bigger image.
transform:translateX(-values); This will move the image on the left, tinker with the value untill you archeive the desired output.As for the box image, use absolute positioning on it and make your container(parent of all element) position:relative;
position:absolute; top: some value; left: some value; transform:translate(-50%,-50%); //tinker with the values untill the desired outcome.To make the box to appear on top of the bigger image with the women. Use z-index property on the box image.
z-index:-1;As for the functionality, please visit mygithub repository where i added the required functionality in 7 lines of code. https://github.com/subu-v/faq-accordian-component.git
If you have any doubts, feel free to ask.
Marked as helpful
0 - Venus• 1,590
@VenusY
Submitted
What are the best/most widely used practices when it comes to writing CSS?
It was difficult to position the white block containing the amount left responsively without using JavaScript. Feedback regarding a way to do this purely using HTML and CSS (if possible) would be much appreciated.
You could have use absolute positioning to position the white block. didn't you try?
0 - Carlos H.• 90
@KrossBR
Submitted
One more solution, I really liked the final result, this background made the design very beautiful.
In this challenge, I was wondering, is it a good idea to use "rem" for margins?
I feel that using "em" makes it more difficult to calculate.
As always I would like to thank you for your attention in seeing my solution. 😉✌😊
It is a good idea to use rem unit for margins as well as for so many things.
rem units is based on root element which is html. By default 1rem = 16px.
To make calculation easy when using rem, make the font-size in html element to 10px which should be done in percentages so that it scales up and down according to the user browser font-size.
10px/16px = 0.625 * 100 = 62.5%.
html{ font-size : 62.5%; }Why you should do it this way?
- Let's if the user want's to increase the font-size in his/her browser, by default it is 16px, now if the user set to 20px, now the font-size in the html element will scale up accordingly, now the font-size will be 62.5% / 100 * 20px = 12.5px
**Now for all things you set using rem unit in your project(eg margins,paddings etc) will change from 10px to 12.5px. **
- Another reason to do this, calculating rem units based on 16px is difficult compared to 10px which can be done easily.
I hope you understand.
Marked as helpful
1 - Govind• 120
@Govin-R
Submitted
Am i use tailwind-css correctly ? Using tailwind-css is good for web-developent?
Using tailwind css automates lot of the work, it speeds up the development of a project. But when it comes to learning css, it's all about doing the repetitive work, that's what initialize the things you learned. You can start using tailwind css when you feel comfortable and strong in css.
Marked as helpful
2 @Ulises-Suhr
Submitted
I have recently started with JS and HTML forms and trying to merge my vague knowledge of those things resulted in a terrible headache. After that I have a great time building this project! Also the images didn't load, i don't know if i've made a mistake or if it's the server.
<div class="star"><img src="./images/icon-star.svg" alt="star"></div>Here there is no need for you to go one step back cause your images folder and the index.html are under the same root folder, you directly select the images/icon-stat.svg.
If you wanted to go one step back from your current folder, it is ../ not ./
0- Rudolf Luayon• 210
@dumpdope1
Submitted
PLEASES HELP!
My struggles: Can't rotate the SVG up when it click I don't what's the main reason why I can't rotate it. I'm not really good in design Loooongs code for a simple click button I don't know how to shorten it OMG
Your comments & suggestion are all welcome.
Try this, for myself i simply created a utility class for rotating the svg icon-down.
.rotate--180deg { transform: rotate(180deg); }When the svg icon-down is being clicked, i will add this class to the element and it will rotate 108deg which will make the icon look upside.
const showAnswer = document.querySelectorAll(".show-answer"); for (let i = 0; i < showAnswer.length; i++) { showAnswer[i].addEventListener("click", function () { showAnswer[i].classList.toggle("rotate--180deg"); // This will add or remove the utility class whenever the icon is clicked ); }<img class="show-answer" src="../images/icon-arrow-down.svg" alt="chevron-down" />look at my github to see how i done it. https://github.com/subu-v/FAQ-accordian-card.git
0 - SAIKAT BISHAL• 10
@saikatbishal
Submitted
I used the card with relative positioning and everything inside it had absolute positioning. Everything went great but I could not center the card vertically at the end. That is the one difference I have with the original thing.
Just remove the from your .card element.
position: relative; left: 50%; transform: translate(-50%, 50%);You can easily center any element inside of the body element which is parent to the all consecutive elements.
Use the below code on the body element,
height: 100vh; display: flex; justify-content: center; align-items: center;- In order to center a element vertically inside of a body element, the body element should have space in order to center anything vertically.
2)Now setting height:100vh on the body element, make the height of the body to 100% of the viewport height (viewport height: the maximum height of the screen you see on your computer).
3)f you haven't set the height to 100vh, the height of the body will be the height of the content available.You can see this in your dev tools, first see the height of the body before using height:100vh, then see the difference when you use height:100vh
If you're new to the world of html and css, it's okay. Learn flex-box, and you''ll know what display:flex, ect those lines of code does.
1 - textpert• 30
@textpert
Submitted
What are the best practices for setting the height for the main div element where all the components exist?
hi, do not manually give height to your main element, let the elements inside your main element determine the height automatically.
for example, the img has a height to it. Vertical margins and vertical paddings(top and bottom) you set for the elements inside the main element. so is line-height and font-sizes etc these are the one of the few things when combined determine the height of the main element.
Try this in your dev tools in the browser, reduce the vertical margins or padding in your project, the whole component height will be reduced
Marked as helpful
0 - Marcus Anglin• 20
@MarcusAnglin
Submitted
Thanks for all the input!
Centering the element(component) can be done easily,
For the small components like this,
- just give a height of 100vh on the body element ( this is 100% viewport height which is the total height of the screen).
- use
display:flex; justify-content:center; align-items:center;
To sum up,
body{ height:100vh; display:flex; justify-content:center; align-items:center; }This will center the child element of the body.
Marked as helpful
1 @jflipp31698
Submitted
I wanted to make it so that when a rating is clicked, say 4 for example, then that button would stay highlighted, then if you clicked 5 after that, 4 would go back to default and the 5 button would be highlighted. Please let me know if you have ideas
I myself really wanted to have that functionality but couldn't do so. If you had found any solutions, i'll be glad to receive help on this one.
0- Daniel• 330
@daniel-web-developer
Submitted
With this challenge, I've experienced the same problem as I did in the first one. I couldn't get the measurements 100% right.
You done exactly what had been required by the design that's really good.
if you want to get the right measurements, you can subscribe to pro, as they provide figma and sketch files, it has the required measurements.
If you don't want to subscribe to pro, then it is really up to you to match the measurements needed. i say don't beat yourself if you can't match the exact measurements, just focus on the design, layouts etc.
0 - Axel• 110
@axldev96
Submitted
- I really like getting feedback on best practices for writing css classes.
- How to improve the semantic HTML in a small component like this?
I would like to receive comments, thanks!
-
Read about BEM naming conventions, it is a popular one. It will help you to be consistent in naming classes.
-
Let me give a small suggestion, use the main element to wrap around everything cause here the main thing is the component.
Marked as helpful
1 - Vani• 160
@VANIMEHTA
Submitted
I just recently learned javascript and thus took a lot of help from net and did this code, but its still not working. someone pls help with this.
This comment was deleted
0 @exortme1ster
Submitted
I am still a little bit lost with choosing sizing for divs when I insert them in website, I understand flexbox theory but find difficult to choose right width & height... Maybe you guys can recommend me different approaches
Can you tell me why your are trying to set a width & height to a div? Your work is great by the way!
1- kenobi404• 170
@kenobi404
Submitted
I guess I messed with background image, it's not correctly positioned. Any suggestion on that. I have just started.
You didn't mess with the background image, you did correctly, its just you used a "Very pale blue: hsl(225, 100%, 98%) color" if you used this "Pale blue: hsl(225, 100%, 94%)", you could have got the result that is required.
I hope this helps
0 - rai-biraj• 360
@birajrai100
Submitted
warm welcome to all kinds of suggestions
You did a great work on the slider,
-
Instead of separating into three sections, you could have done it in one section cause this is a single component for which one section container is more than enough.
-
Aligning both of them center can be done, if you used a separate div element for each part of the component, first one being the left, second being the right of the design and one parent div element for both part, then as you already know flex, making the parent div flex and with some gap does the trick, if not aligned vertically center, do a align-items:center on the parent div
Marked as helpful
0 -
I used clip-path to achieve "185 GB LEFT" callout and i couldn't add a border-bottom-left-radius due to the clip-path property i used, cause clip-path removed the mentioned part(axis points). How to make the border-bottom-left-radius visible even if clip-path is used? or Is there anyother to make the "185 GB LEFT" callout shape?
Any suggestions would be helpful, thanks
Can someone offer help on the questions i asked? it would be really appreciated...
0- Dean Hudek• 290
@deksa89
Submitted
It was little bit tricky to create comic-like speech bubble and to adjust it. Now when I am done I feel like it could have been done easier using flex more than I did but it should work as it is. Any feedback is welcome! :D
If you want the icons to look exactly as the required design,
- first create a div element(lets say the class name is "icon-box") with padding of some small value ranging from 16px - 20px and make this position relative.
- place the icons inside the "icon-box" element using absolute positioning.
- Do the same for the other two icons as well.
Now no matter, how much you increase the padding of the "icon-box" element, all the "icon-box" and the icon inside of it will increase consistently.
Just a suggestion, hope it helps. I did the same thing, if you want more clarrification, you can look up to my code.
Marked as helpful
0
