Skip to content
OverviewSolutions
17
Comments
15
Md Raihan Alam
@Md-Raihan-Alam

All comments

  • Md Raihan Alam•520
    @Md-Raihan-Alam

    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
  • Md Raihan Alam•520
    @Md-Raihan-Alam

    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
  • Md Raihan Alam•520
    @Md-Raihan-Alam

    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!!

  • Md Raihan Alam•520
    @Md-Raihan-Alam

    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.

  • Md Raihan Alam•520
    @Md-Raihan-Alam

    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

  • Md Raihan Alam•520
    @Md-Raihan-Alam

    "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
  • Md Raihan Alam•520
    @Md-Raihan-Alam

    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.

  • Md Raihan Alam•520
    @Md-Raihan-Alam

    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
  • Md Raihan Alam•520
    @Md-Raihan-Alam

    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
  • Md Raihan Alam•520
    @Md-Raihan-Alam

    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.

  • Md Raihan Alam•520
    @Md-Raihan-Alam

    Looked amazing bro, keep going

  • Md Raihan Alam•520
    @Md-Raihan-Alam

    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

  • Md Raihan Alam•520
    @Md-Raihan-Alam

    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
  • Md Raihan Alam•520
    @Md-Raihan-Alam

    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
  • Md Raihan Alam•520
    @Md-Raihan-Alam

    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