@MohLutfiFauziSubmitted about 2 years ago
I can't make the eye icon unaffected by the opacity of the parent so that the eye icon becomes transparent as well. anyone can help me ?
Md Raihan Alam
@Md-Raihan-AlamAll comments
- @Md-Raihan-AlamPosted about 2 years ago
keep the eye icon above the rest using z-index and make it display only when hovering.. this way your eye icon won't be transparent. All the other seems to be fine and good work, keep trying like this
Marked as helpful0 - @MakiRyanSubmitted about 2 years ago
Don't know how to center the ethereum icon and the price, also the clock icon and days remaining.
@Md-Raihan-AlamPosted about 2 years agohow about this way.. you keep the Ethereum icon and the price in one div, make use of the flex/grid(whichever you prefer) on that div and use justify-content start and align-items center. you can make it center, same for clock icon and days remaining. This is I do my things when things come to like this...
Marked as helpful0 - @Piotrek1994Submitted over 2 years ago
Does somebody know how to write JS when I have mouse over each diagram, diagram is active and when I get mouse out of diagram, diagram goes inactive?
@Md-Raihan-AlamPosted over 2 years agoHello Piotr, Congratulation on completing this project. I am going to answer some of your questions first. First, for the mouse hover in the js case, you can use 'mouseenter', 'mouseleave', 'mouseover' events. You can read this document for more details about the many mouse events and how to use them ->https://www.w3schools.com/jsref/obj_mouseevent.asp. Second, your site needs to be developed in the responsive case as I see It is not much of responsive yet but still ok for how far you have come. Try to make sure your site is responsive at least 320px as this is the lowest width of mobile now in current days so try to work with percentages instead of rem. You can still use rem but you need a better understanding, for me, the width is much easier than rem, and finally, try to read some blogs about media queries. They might help you to clear your concept more. you can find a responsive site video on freecodecamp youtube channel.
Don't forget to give a like and mark this helpful if my comment is helpful to you!!
0 - @Jasper-IkSubmitted over 2 years ago
For the structural layout i used the grid layout while for the inline layout i used the flex
@Md-Raihan-AlamPosted over 2 years agoFirst of all, this project was for practicing your grid. So I believe you should have done all the work using the grid, even the ones you have solved using inline flex. Otherwise, the real motive behind this project seems pretty meaningless
Second, You divs are not center enough. A little trick, enter height:100vh in the body and use display: gird,align-items: center,justify-content: center in the main div, so that your whole content is in vertical and horizontally align
Third, go through your "ACCESSIBILITY ISSUES" and "HTML ISSUES" in the report. They seem pretty meaningless but a pro does not leave behind a small error in his project. It will help you in your real-life projects and help you to impress your interviewers.
0 - @CloudOfAlemarSubmitted over 2 years ago
Hello everyone, I'm starting to feel more comfortable creating these designs since the first three projects were sort of similar. If there's any way I can improve my code please let me know, thank you :)
@Md-Raihan-AlamPosted over 2 years agoYou forgot to add ALL the hover effects in this project, It is pretty important you go through all the project pictures( if you are using a free account) or Figma design(if pro account). I checked your site, all seems good except the hover effects are missing.
In real-life work, you will be provided Figma or similar designs to develop the sites so that you can understand the the width, hight or any small details that needs to be consider, From doing it pictures it pretty much on your own
0 - @adityayadav71Submitted over 2 years ago
I had difficulties aligning the images and texts horizontally with display property set to inline-block, I found that using "parent-container" > * { verticle-align: middle}, it worked. I don't know about the ">" symbol, could anyone explain this ?
@Md-Raihan-AlamPosted over 2 years ago"parent-container" > * here by ">" means that select all child element in parent-container. It is a way to tell CSS that * will be the child element in parent-container. You can center items by using flex or grid or transform. but make sure to give "body" tag height:100vh or it will not work. You can check this blog https://blog.hubspot.com/website/center-div-css#:~:text=You%20can%20do%20this%20by,the%20div)%20vertically%20and%20horizontally.
Marked as helpful1 - @jplawrenceSubmitted over 2 years ago
Hey everyone! I didn't have many problems, only two...So i used a media query, which ended up being quite useless...Should I have used one? The desktop design changes very slightly and from what I can see, the font sizes and padding also changes...
The other issue is just with the element hover colour...You'll see that it looks similar, but this is because I went into XD to eyedrop the colour. I didn't see the colour on the style guide either, so was this right? I was thinking opacity first, but it's definitely a whole colour change.
Anyways, I'll be waiting for some feedback :) Thanks!
@Md-Raihan-AlamPosted over 2 years agoFirst of all, Media queries are used only if there are big changes needed to be made in designs. You can work on your designs as long as it is not big projects. Too many media queries can cause problems in your file.
You can know the perfect colors that were used in the design only in Figma files which you can not buy if you are using free. Style guides do not provide all information.
0 - @NadiaFrShLmSubmitted over 2 years ago
It looks like my css file is huge, still can't understand how to minimise css proprieties.
@Md-Raihan-AlamPosted over 2 years agoFirst of all, there is nothing wrong with having a big CSS file. Second, remove all comments and keep the necessary ones, it's a bad habit to have so many comments in one file. Third, You do not have enough knowledge about rem yet practice some more because I do not find your site responsive on my PC. Fourth, you can check this video to understand when to use CSS unit ->https://www.youtube.com/watch?v=N5wpD9Ov_To.
As a suggestion, you can use percentages to make your content responsive. I use percentages mostly in width to make my content responsive.
Marked as helpful1 - @jesuisbienbienSubmitted over 2 years ago
Any feedbacks are welcome. I have a few issues that I'd love to receive suggestions on:
- At the ethereum icon and days line (below the paragraph), I couldn't center horizontally the words and the icon images. Tried adding padding -bottom and margin-bottom and both didn't work.
- I used fixed height and width for this project but would like to learn how to use rem and em better. Any recommendations on good tutorials for this specific topic?
- Also, I think I'm using a lot of divs in this project, will that be a problem in the future, for more advanced projects?
@Md-Raihan-AlamPosted over 2 years ago1-> You can use flex or grid for horizontally aligning anything. You can see freecodecamp tutorial = https://www.youtube.com/watch?v=tXIhdp5R7sc for flex box and kevin powell grid =https://www.youtube.com/watch?v=rg7Fvvl3taU. This should cover everything. You should subscribe kevin powell channel, he is consider as king of css by most of developer online. Here is channel=kevin powell, His channel is about everything of css.
2-> Kevin powell has also cover about rem and em. Here is the video=https://www.youtube.com/watch?v=_-aDOAMmDHI and another=https://www.youtube.com/watch?v=N5wpD9Ov_To
3-> No, I have been completing many projects and I also rely on div ( in my opinion). But you should not use unnecessary div
I hope they answered your questions
Marked as helpful1 - @steezyzaSubmitted over 2 years ago
I had trouble vertically aligning elements of a child div in the [ethereum/three days later] section.
I used flex/flex-direction for the parent div & display: inline-block, but I still had to mess around with the box model to get the closest vertical alignment.
Please feel free to comment with any tips guys. Thank you.
@Md-Raihan-AlamPosted over 2 years agoYou forgot to add hover effects in here. Doing the [Ethereum/three days later] section vertically aligning will be much easier doing with flex/grid (whichever you prefer). Try to complete next project using grid/flex.
1 - @DarKaRorSubmitted over 2 years ago
Feedback is appreciated
This is my very first React application! I decided I had to use a framework now that I'm in the JUNIOR challenges. If there's anything (and i'm sure there will be) that can be improved, you can tell me right away
This time I didn't try to make it pixel perfect since I was focusing more on React
I tried adding custom hover effects on the icons, custom animation for changing the option, and you can also delete a card by clicking on the three dots (I wanted to make a menu to do more stuff, but I wanted to finish it)
Things I'm uncomfortable with are the way I used images and the CSS being global instead for each component
- @Kaylyn20Submitted over 2 years ago
The only issue that I have is when I'm setting it up to get deployed the header image and the icon image doesn't show. Any tips?
@Md-Raihan-AlamPosted over 2 years agoBecause you are missing the folder connection/URL in your background-image. Check the CSS code you can see according to the code you have put the image or icon in your image folder. Set it up properly. You can try by reworking your 'background-image' or upload the picture properly in your root folder
0
