Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions23Comments23

All comments

  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    This comment was deleted

    0
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    This comment was deleted

    1
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    loved it !!

    1
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    Kindly resolve the accessibility issues. Other than that Its great and just fix the bg colors to match the design.

    0
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    I reviewed your code and website both are good. but the background images position you need to play with values to set them ig. Over all you doing great. :)

    Marked as helpful

    0
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    The things I noticed

    • To make body take full height give body and html tag height 100% html,body{ height :100%}
    • Learn grid you can easily center a div with it like this
    main{display:grid;
place-items:center;
}
    • And its static the daily, weekly buttons don't work. Also share the repo to review your coding. Happy coding :)
    0
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    Frontend Looks great! But the code I think is messy. It can be a lot of simpler. I think you did it for learning but I would like you to make it as simple as you can! happy coding :)

    Marked as helpful

    0
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    Looks Great. I think it's time for you to start higher level projects.

    Marked as helpful

    1
  • bunee• 2,060

    @buneeIsSlo

    Submitted

    Hi! It's been a good minute since I posted a solution on here. I have been teaching myself ReactJS and wanted to create a small project so, I chose to solve this newbie challenge for some practice.

    However, I was unable to complete this challenge on my own. Thanks to this solution I realized where I was going wrong and managed to create my solution.

    I have no questions for this one, but I'm open to any tips and feedback you have for me :)

    Click here to view the live site

    Click here to view the code

    ⭐ Interactive Rating Component | React | SCSS | Webpack

    #react#webpack#sass/scss

    3

    Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    btw can you give tips regarding seamless animations and anything else :3

    0
  • bunee• 2,060

    @buneeIsSlo

    Submitted

    Hi! It's been a good minute since I posted a solution on here. I have been teaching myself ReactJS and wanted to create a small project so, I chose to solve this newbie challenge for some practice.

    However, I was unable to complete this challenge on my own. Thanks to this solution I realized where I was going wrong and managed to create my solution.

    I have no questions for this one, but I'm open to any tips and feedback you have for me :)

    Click here to view the live site

    Click here to view the code

    ⭐ Interactive Rating Component | React | SCSS | Webpack

    #react#webpack#sass/scss

    3

    Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    Loved the animation part <3 Also code is clean !

    1
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    Neat ! Other than that I would recommend you to make components which you did, but make more. Try to breakdown the website layout into proper components. It will help you a lot. For example Navbar component HeroSection component Banner component also instead of footersection name i would recommend just footer Though In the end we just see the output. But following these will definitively ease you. These are just my opinions. Enjoy coding

    Marked as helpful

    1
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    learn about transitions Say we have a anchor tag whose color changes to red on hover for this /CSS Transition Syntax/

    selector {
 transition: property duration timing-function delay|initial|inherit; 
}
a{
transition: color 0.2s ease-in;
}
a:hover{
color:red;
}
div:hover {
  background-color: #000;
  transition: background-color 400ms;
}

/* Or control over animation with transition timing */
div:hover {
  background-color: #000;
  transition: background-color 400ms ease-in-out;
}
    1
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    Your approach is also good and bad. Good in terms of using pesudo classes for bg images and in bad in terms of i see bad css kindly clear the fundamentals of css. I recommend Kevin powel videos. read articles about css in which there are convention which must be followed. css is art in then end if one achieve its target it doesn't matter what is, behind but for your comfort you should do good css so that you don't frustrate in the end. It takes practice and curiosity to learn.

    0
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    Nice attempt. Kindly resolve all issues in your report. And I saw your code and you are not using the super powers of react which is useState hook. I assume you just started learning react and implemented the knowledge you learnt right? Also the layout doesnt look in large screen that is for 1920 width.

    Marked as helpful

    1
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    Why did you make a function for hover, effect when we can do it in CSS easily ? And your code is very clean.

    0
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    Hi, few things I noticed

    1. You should use background img in CSS instead of putting them in html. It's a convention.
    2. And making frontend is art, so if you did, then handle the overflow by putting some CSS in body
    body{
height:100vh;
overflow: hidden;
}
    0
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    Welcome and i just realised that now we will have to call selection function three times and we can make an array and loop it and pass the function like this

    let arr = ['daily','weekly','monthly'];
arr.forEach(selection);
    1
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    I think it is good but no animation.

    1
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    Few things I noticed

    1. You should use semicolon everywhere by everywhere, I mean good practice.
    2. You have made three functions daily, weekly and monthly, make one function and pass the argument. For example.
    function selection(arg){
  getData(arg);
  addEventListener('click', color);
}
selection('daily');
    1. Follow these terms Write once and Don't repeat yourself.
    2. Also learn array methods that are foreach , map etc. Happpy Coding.

    Marked as helpful

    1
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    Are you logged in ? If yes then only first videos are unlocked after each day. Videos will get unlock.

    0
  • Mo'men Kamal• 130

    @momenkamal221

    Submitted

    Hey, I was a little bit confused about what challenge should I pick. I chose that one and it looks very similar to the last challenge I picked - NFT preview card component -, just the background was challenging for me, so my question is, what approach should I follow that will help me at picking the next challenges? or should I just do all of it?

    Profile card component

    #sass/scss

    3

    Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    I think you are not resetting the CSS. Add reset css. This should be enough

    *{ margin:0; padding:0; box-sizing:border-box; }

    Also try to center the card component. using hard values of margin is not a good approach. You can use display flex or position absolute and when there is a single component on your page give body hieght of 100vh when using display flex so that it can take all the space then centering component will be easy.

    body{ position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

    And remove margin-top for card class.

    Hope it helps ^^.

    Marked as helpful

    0
  • Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    I think you need to practice on your css basics. First I see you are using display grid on every div. Second dont give fix values of width or min-width By giving fix values is not a good practice. Check wesbos free courses and kevin powell 21 responsive course Here is the link: https://cssgrid.io/ https://courses.kevinpowell.co/conquering-responsive-layouts

    1
  • Usama• 170

    @errijahi

    Submitted

    Yo everyone, any feedback for this challenge.

    HTML CSS

    2

    Mohtashim Ali• 510

    @MohtashimAli85

    Posted

    css is too much

    0