Moh Lutfi Fauzi• 130
@MohLutfiFauzi
Submitted
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-Alam
All comments
- Md Raihan Alam• 520
@Md-Raihan-Alam
Posted
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 helpful
0 - MakiRyan• 30
@MakiRyan
Submitted
Don't know how to center the ethereum icon and the price, also the clock icon and days remaining.
Md Raihan Alam• 520@Md-Raihan-Alam
Posted
how 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 helpful
0 - Piotr• 250
@Piotrek1994
Submitted
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 Alam• 520@Md-Raihan-Alam
Posted
Hello 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• 40
@Jasper-Ik
Submitted
For the structural layout i used the grid layout while for the inline layout i used the flex
Md Raihan Alam• 520@Md-Raihan-Alam
Posted
First 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 - PCloudOfAlemar• 200
@CloudOfAlemar
Submitted
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 Alam• 520@Md-Raihan-Alam
Posted
You 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 - Aditya• 150
@adityayadav71
Submitted
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 Alam• 520@Md-Raihan-Alam
Posted
"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 helpful
1 - Jp Lawrence• 40
@jplawrence
Submitted
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 Alam• 520@Md-Raihan-Alam
Posted
First 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 - NadiaFr• 310
@NadiaFrShLm
Submitted
It looks like my css file is huge, still can't understand how to minimise css proprieties.
Md Raihan Alam• 520@Md-Raihan-Alam
Posted
First 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 helpful
1 - Nguyen Nguyen• 340
@jesuisbienbien
Submitted
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 Alam• 520@Md-Raihan-Alam
Posted
1-> 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 helpful
1 - steezyza• 90
@steezyza
Submitted
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 Alam• 520@Md-Raihan-Alam
Posted
You 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 - Johandry López• 220
@DarKaRor
Submitted
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
Md Raihan Alam• 520@Md-Raihan-Alam
Posted
Looked amazing bro, keep going
1 - Kaylyn20• 40
@Kaylyn20
Submitted
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 Alam• 520@Md-Raihan-Alam
Posted
Because 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 - Salomon Romano• 290
@SaloRB
Submitted
Md Raihan Alam• 520@Md-Raihan-Alam
Posted
Try to center the contents by giving full width and height and place center it all by setting up with display grid or center. You can also do it with position absolute or translate if you are not comfortable with flex or grid
Marked as helpful
0 - Yahir_AM• 370
@Yahir-am
Submitted
Feedback please, It's my first time using SASS, so if you could give me a recommendation about the code or if I had any bad practice when coding, I would appreciate it very much. :)
Md Raihan Alam• 520@Md-Raihan-Alam
Posted
Did you forget the javascript part, the 'daily' and 'monthly' option is not working. There is unnecessary width and height here. Some of your hovers are not properly applied. Remove the red border from Jeremy's profile. There should be no hover.
Try to use mixin and functions, It is far better than repeating codes over and over again. Do not rely on media too much. It is better to use than less. Too much media code will show some problems in bigger projects. Also, use mixin instead of media. Finally, this is a CSS framework, What's the point if you write basic CSS all over here. But it is good for the first time. Keep up!!!
Marked as helpful
0 - aladeenuthy• 200
@aladeenuthy
Submitted
Md Raihan Alam• 520@Md-Raihan-Alam
Posted
Try to solve such problems using flex or grid, It will help you a lot. Be sure to take considerate of div's width and height
0
