Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
25
Comments
31
Chanda
@Chanda-Abdul

All comments

  • Josh Contreras•260
    @Snarbo
    Submitted over 1 year ago

    Room Homepage

    #sass/scss#tailwind-css
    1
    Chanda•820
    @Chanda-Abdul
    Posted about 1 year ago

    looks good!

  • Annalisa•200
    @Annalisa11
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I finally got a good grasp of scss functions

    What challenges did you encounter, and how did you overcome them?

    I realized that there were active states to be implemented that required some more javascript logic when I was half way through. Since I thought it was only some styling I didn't bother setting up a whole react app and instead used simple html and some vanilla js. When I saw that I had to make the responsive Menu open, I just left it because I was too lazy to implement in js... Maybe some other time

    js sass loopstudios landing page

    #sass/scss
    1
    Chanda•820
    @Chanda-Abdul
    Posted about 1 year ago

    Overall great job on the LoopStudios challenge! Great use of Sass and BEM conventions.

    You mentioned adding a responsive Navigation in the future. Here is a great resource for that Responsive Top Navigation

    Consider using less <div>'s in order to make your code more semantic and accessible. Here is an article to get you started intro to semantic HTML

    Also, don't forget to remove console.log()'s before you publish your code.

    I hope that helps!

    Marked as helpful
  • svo15•230
    @svo15
    Submitted about 1 year ago

    nft-preview

    #sass/scss
    1
    Chanda•820
    @Chanda-Abdul
    Posted about 1 year ago

    Good job on your NFT card component solution!

    A few sugesstions

    • consider using less <div>'s for html semantic purposes. <div>'s should only be used for styling purposes and not as containers.

      • This article expains this concept well An intro to semantic HTML

      • ex. instead of <div class="container"> just use <main>

      • instead of <div class="price"><h2> use <h2 class="price">

    • the active states are not working, you could add something like this

    a:hover {
          color: white;
          cursor: pointer;
        }
    
    • define font-family in the body selector
    body {
        font-family: 'Outfit', sans-serif;
    }
    
  • Matthew Davis•30
    @TeddyGavi
    Submitted about 2 years ago

    Sunny Side Landing Page

    1
    Chanda•820
    @Chanda-Abdul
    Posted about 2 years ago

    👋 Your Sunnyside landing page looks great!

    Here are two approaches you could use to create a dropdown menu using just HTML and CSS:

    • Using the :target pseudo-class: This method involves defining targets within your HTML and using CSS to show/hide content based on the target's ID. By leveraging the :target selector, you can create a dropdown effect when certain elements are clicked or targeted. https://css-tricks.com/off-canvas-menu-with-css-target/

    • Using a form input checkbox styled as a menu: This method utilizes a checkbox <input> element within a form and applies CSS styles to make it appear like a menu. By toggling the checkbox's checked state, you can control the visibility of the dropdown menu through CSS selectors and transitions. https://css-tricks.com/the-checkbox-hack/

    I hope these suggestions help!. If you have any further questions, feel free to ask!

    Happy coding!

  • Sidney François•110
    @sidneyfrancois
    Submitted about 2 years ago

    Accordion with css only, no javascript.

    3
    Chanda•820
    @Chanda-Abdul
    Posted about 2 years ago

    Hey there! Congratulations on completing your project.

    One way you could remove the overflow: hidden from the parent <div> is by creating a separate direct parent <div> specifically to contain the element that needs its overflow hidden.

    in the HTML:

    <div class="parent">
    <div class="child">
    <img src="img.jpg" alt="child-image">
    </div>
    </div>
    

    in the CSS:

    .parent{
    position: relative;  /* position may not be necessary */
    overflow: hidden;
    }
    
    .child{
    position: absolute;/* position may not be necessary */
    }
    

    By creating this nested structure, you can apply the overflow: hidden specifically to the desired container, allowing more flexibility for other elements within the parent <div>.

    You could also consider the tradeoffs of using overflow: hidden; to hide overflow on X and Y axis vs overflow-x: hidden; and overflow-y: hidden;

    Keep up the great work, and if you have any questions or need further clarification, feel free to reach out. Happy coding!

  • Bálint Balázsi•260
    @oroszlanolo
    Submitted about 2 years ago

    Fully Responsive Rock Paper Scissors Lizard Spock Game with Animations

    #angular#animation
    1
    Chanda•820
    @Chanda-Abdul
    Posted about 2 years ago

    👋 Hey there! Congratulations on completing your project. Overall, everything looks amazing and functions well. I appreciate that you were able to incorporate tests.

    Here are some suggestions to help improve your code and align with Angular best practices:

    • Consider using TypeScript to provide abstractions in your code. Instead of hard coding paper, rock, and scissors directly into the template, you could create an opponent.model.ts file to abstract this data. By abstracting the data, it would greatly enhance scalability and readability. Similar to this
    const opponent: [string, boolean] = [
    { name: 'rock', bonus: false },
    { name: 'paper', bonus: false },
    { name: 'scissors', bonus: false },
    { name: 'lizard', bonus: true },
    { name: 'spock', bonus: true },
    ];
    
    • When accessing the data in your template, consider using Angular pipes to format and transform the values. Pipes are a powerful feature in Angular that can help with data manipulation and presentation. Utilizing pipes will make your code more modular and easier to maintain.
    <ul class="opp">
    <li *ngFor"let opp in opponents"> {{opp.name | capitalize}} 
    <span *ngIf="opp.bonus === true">bonus</span>
    </li>
    </ul>
    
    • To encapsulate all the game play functionality, consider creating a service. This service can hold the logic for game rules, scoring, and other related functionality. Additionally, you can leverage RxJS observables to keep track of the game results and opponents. Observables provide a reactive way of handling asynchronous events, which can be beneficial for real-time updates and data synchronization.

    By incorporating these suggestions, you'll be following Angular conventions and best practices, making your code more maintainable and scalable.

    Keep up the great work, and if you have any questions or need further clarification, feel free to reach out. Happy coding!

    Marked as helpful
  • Madhav•50
    @Madhav3198
    Submitted about 2 years ago

    Responsive Age Calculator App

    2
    Chanda•820
    @Chanda-Abdul
    Posted about 2 years ago

    Great job! Overall everything looks pretty good.

    BUT I noticed a few things...

    • If I enter a date and one of the inputs it invalid, the output for the other two dates is still calculated. Maybe you could update this so that nothing gets calculated if any of the inputs are invalid.

    • When the user updates an invalid input, the error styles persist although there are no errors

    • You could also add a bit more error handling.

    • For leap years- Feb 29, 2000 should be valid and Feb 29, 2001 should be invalid

    • For various month lengths - April 31,2023 should be invalid because April only has 30 days

    • Dates that are later in this month or later in this year - tomorrows date should be invalid, May 18, 2023; and any date later this year should be invalid, June 18,2023.

    • For the HTML you used <div>'s for most elements. Consider using other HTML elements for semantic purposes. This is a great article that explains why this is important https://www.freecodecamp.org/news/semantic-html-alternatives-to-using-divs/

    • The JavaScript code could be more concise. There is some repetitive code that could be condensed and combined into reusable functions. This is a great resource to learn about DRY code https://www.educative.io/answers/how-to-build-a-counter-application-with-javascript

    • Your CSS looks really good, I like that you made it responsive by using media queries.

    I hope that helps!

    Marked as helpful
  • arogersrenee•330
    @arogersrenee
    Submitted about 2 years ago

    work-it responsive landing page (flex & grid)

    5
    Chanda•820
    @Chanda-Abdul
    Posted about 2 years ago

    oh, and for a full curved bottom/top border on a <div> or <section> you could use clip-path or radial-gradient

  • GIGACHAD•230
    @Khalid-debugg
    Submitted about 2 years ago

    Okay JUNIOR Tiiiiiime !!!!!!

    1
    Chanda•820
    @Chanda-Abdul
    Posted about 2 years ago

    👋🏾

    To validate the day, you could use and array to store the days for each month. ex. const daysPerMonth = [31,28,31,30,31,30,31,31,30,31,30,31];

    • and access each month by it's index. So if you wanted to see how many days were in the second month of the year(February), you could use daysPerMonth[1] which should be 28

    I hope that helps!

    Marked as helpful
  • arogersrenee•330
    @arogersrenee
    Submitted about 2 years ago

    work-it responsive landing page (flex & grid)

    5
    Chanda•820
    @Chanda-Abdul
    Posted about 2 years ago

    Hello 👋🏽,

    • for a curved <div> add border-radius: 32px to the css selector
    • to fix the horizontal scroll add overflow-x: hidden to the parent’s css selector. You may also want to set the width or max-width of the parent, or the entire page, to 100vw so that child elements cannot overflow the parents container.
    • for positioning look into absolute and relative positioning. Use position: relative on the parent element’s css selector and position: absolute; top:0; left: 0; on the child element’s css selector. Adjust the top , bottom , left , right values on the child element to position it relative to the parent element.
    • To position layers use z-index
    • For the numbered list, use an ordered list with list items. https://www.w3schools.com/html/html_lists_ordered.asp

    I hope that helps!

    Marked as helpful
  • Curtis Simpson•550
    @crsimpson5
    Submitted almost 3 years ago

    Password Generator made using Vanilla JS + Sass

    #accessibility#sass/scss#cube-css
    3
    Chanda•820
    @Chanda-Abdul
    Posted almost 3 years ago

    Well done! The 4-bar strength component is pretty tricky, the solution you came up with is very clever and elegant!

  • Md5 dalton•1,430
    @md5dalton
    Submitted almost 3 years ago

    Password generator app Using React and Sass

    #react#sass/scss#webpack
    1
    Chanda•820
    @Chanda-Abdul
    Posted almost 3 years ago

    Great work! Styling is pixel perfect 👌.

    My favorite "CSS framework" to use with React is React styled components. For everything else I just use Sass.

    This video is a great resource to get started with React styled components https://youtu.be/02zO0hZmwnw

  • Aaron Romanick•270
    @aaron-romanick
    Submitted almost 3 years ago

    Password Generator App Using TypeScript, JS Crypto and zxcvbn

    #sass/scss#typescript
    1
    Chanda•820
    @Chanda-Abdul
    Posted almost 3 years ago

    Great work! I like that you disabled the checkbox deselect when only one box is selected, and your styling is A+.

    Have you considered putting a limit on the password length? Do you think that a user would need a password that is 50 characters long? If you look at other password generators the generally limit password length to 15-30 characters. A 30 character password with lowercase, uppercase, numbers and symbols is pretty secure, and additional length may not be necessary.

  • Ozoude Assumpta Ginika•90
    @Assumptaginika
    Submitted almost 3 years ago

    Sunnyside product landing page

    1
    Chanda•820
    @Chanda-Abdul
    Posted almost 3 years ago

    Great solution!

    You could try hosting/deploying your project with netlify.com. That's what I use, and it's great because you can host your projects directly from GitHub.

  • Natasha Williams•10
    @NATiiCODES
    Submitted almost 3 years ago

    product preview card component

    5
    Chanda•820
    @Chanda-Abdul
    Posted almost 3 years ago

    Great Solution overall! The deployed version of you project looks great, and it's very close to the design. Your code is clean and easy to read.

    In your HTML file, I noticed a few things.

    • I don't think you need to wrap the <img> in a <div>, you can just add stylings directly to the <img> element. You don't need to use the words picture or image in alt tags for semantic purposes, it's implied that the element is a picture/image. I would probably go with something like <img class="product" src="images/image-product-desktop.jpg" alt="product-main">
    • For semantic purposes you probably don't want to name a class after a possible element. With <article class="paragraph"> the paragraph class could get confused for a <p>/paragraph element. I would change this to something like <article class="content"> or <article class="product-information">
    • also for semantic reasons, <h1>'s should come before <h2>'s and <h2>'s should come before <h3>'s, etc. I would change this to
    <h1> Perfume </h1>
    <h2> Gabrielle Essence Eau De Parfum </h2>
    

    Your css file, looks great!

    I hope that helps! Keep up the good work!

    Marked as helpful
  • Eyewavu•90
    @Eyewavu
    Submitted almost 3 years ago

    expenses chart

    2
    Chanda•820
    @Chanda-Abdul
    Posted almost 3 years ago

    Great Solution!

    One way to make this responsive is by using css media queries. This is actually a good project to practice using media queries because you don't have to make a lot of changes when you switch from mobile to desktop.

    Here are a few resources to get you started

    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    and

    https://www.youtube.com/watch?v=yU7jJ3NbPdA

    I hope that helps!

    Marked as helpful
  • nauman•60
    @Nauman123Nasir
    Submitted almost 3 years ago

    Intro-section-with-dropdown-navigation

    #angular#bootstrap#sass/scss#typescript#jquery
    1
    Chanda•820
    @Chanda-Abdul
    Posted almost 3 years ago

    Great Solution!

    For the header section I conditionally rendered the content based on the screen size. I used an event listener/react hook to keep track of the current screen size. If the screen size is less than 600px I would display the Mobile Header, if the screen size is bigger than 600px I would display the Desktop Header. I did something similar with the images, switched from the mobile image to the desktop image at a specific breakpoint. But I will say that the main image does look a bit funky and the content looks a bit wonky near that breakpoint.

    For the arrows, I initially set them to ⬆️. OnClick they would switch to ⬇️ and the dropdown menu's would open.

    I hope that helps!

  • Eileen dangelo•1,600
    @Eileenpk
    Submitted almost 3 years ago

    Expenses chart component made with Flexbox, Vanilla JavaScript, Fetch

    #fetch
    3
    Chanda•820
    @Chanda-Abdul
    Posted almost 3 years ago

    Great Solution!!

    You could try using the JavasScript Date Object to dynamically set the current day of the week.

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

    I hope that helps!

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub