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
OverviewSolutions32Comments96

All comments

  • P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hi ! Nice job!

    To set the modal backdrop (background), you can add a React.Fragment in your file Bamboo.jsx to wrap your modal className="modal-oculto ..." and add a new div in position:fixed right after your modal.

    I did something like this for my challenge :

    .modal-backdrop {
position: fixed;
inset: 0;
z-index: 1;
background-color: rgb(0 0 0 / 50%);
}

    Ejemplo :

    {mostrarModal && (
 <div className='modal-oculto ...'>...</div>
 <div className="modal-backdrop"></div>
)}

    Hope my comment helps :)

    Marked as helpful

    0
  • P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hello !

    • Everything @besttlookk said is super helpful!

    I will add some stuffs to improve :

    • reply to a comment should open the right input below the comment, not in the same view used to write a comment
    • I'm not sure about the sticky position for the current user input. It's a bit weird on responsive.
    • Maybe put a fixed width to the upvote/downvote component. Behavior is a little weird
    • On .comments-container I would go for a max-width rather than putting a width. It behaves better

    Hope this helps !! Keep coding ! =)

    Marked as helpful

    0
  • P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hello IHSAN!

    It seems that the app.js is not working or loaded. I can't switch between timeframes (daily, weekly, monthly)

    If you don't have access to the design files (sketch or figma), I would suggest to install Figma. Use the designs provided in the folder and put the desktop version inside a Figma's file. Then do a screenshot of your solution and add it to the same Figma's file. Put your solution above the design with the Layer option to 50% opacity. You will be able to compare what to adjust or not (like fonts, ...)

    One improvement could be going into responsive view earlier in your breakpoint setting. It's a little be smashed between 440px until 800px.

    For centering your solution, take a look at link

    Enjoy coding!

    0
  • P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hi ! Nice challenge done !

    You should fix to things :

    • line-height of your <label> numbers (seems to not be centered)
    • Text of the Thanks screen should be centered. I did the same mistake : display:flex and align/justify: center won't centered the text.

    Hope this helps & enjoy coding!

    0
  • P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hello !

    This is a really good work ! It's 99% perfect ;-)

    One thing I noticed tho.. When you submit without selecting a value, there is a strange thing happening. You should add a verification IF a value is selected before submitting. IF NOT, display an error or an alert('') explaining user has to choose one value :)

    Enjoy coding!

    Marked as helpful

    0
  • Jose manuel osorio• 60

    @jmblack15

    Submitted

    Hello everyone!

    please let me know how I did, and any feedback is welcome, I would also like you to share any resources to learn how to manipulate the DOM

    Thank you very much!

    Interactive rating component

    #accessibility#lighthouse

    2

    P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hi! Nice job! It's pretty closed to the design :)

    I would suggest few things as improvements:

    • not setting height on your .card but adding a gap: 2rem (~) on your card-ranking
    • width of .card should be max. 412px on desktop
    • submit button has ~30px border-radius; not 15px :)
    • add a bigger line-height on your texts.

    hope this helps. enjoy coding!

    1
  • Abhilash S Hathwar• 20

    @Abhilash437

    Submitted

    I am a beginner in web development but I have tried my best to comping up with a solution for this challenge, it has a lot of bugs but somehow it still works. Feel free to provide some insights on my solution.

    Responsive NFT preview card component

    3

    P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hello ! Good job :)

    It looks nice but you can improve your solution if you wants :

    • about your markup, try to stick to the same convention (Title, active, Image, ...): title, active, image, .. Take a look at BEM, OOCSS methodologies
    • Get rid of your width % for your component .container, make it with max-width: 350px and remove height so it could breathe :)
    • max-width: 100% on your main image is a better practice than width: 90%
    • For better UI, you could put your <div class="active"> element inside your <div class="image"> and modify the CSS to :
    .active {
cursor: pointer;
    background-color: hsl(178, 100%, 50%,50%);
    border-radius: 5%;
    text-align: center;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    display: none;
}
    • Take it in consideration than your .active element could be a link and leads to another page (maybe change the div to a <a>)

    And when hovering it, change display:none by display:flex > .Image:hover .active

    • Replace all your border-radius with other unit (rem/em/px) but % has a weird behavior .

    Hope it helps and Enjoy Coding!

    0
  • Ciceron• 940

    @MarcusTuliusCiceron

    Submitted

    This is my first react app, it was really comfuse at fisrt so I decided to scrap all the the code and started again from scratch, I think the structure is much better and easier to work with on this second attempt.

    I noticed I never used componentdidmount and componentdidunmount methods, is this ok to not use those methods ?

    Also my react component page is holding a lot of infos through its state, I didn't find any other way to be able to reuse info from one subcomponent to another.

    SCSS is defintely not that clean.

    If you find anything not working properly or if you have any suggestion feel free to give a feedback.

    React crowdfunding product page app

    #react#sass/scss

    2

    P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hello! Great job, its working really well :)

    Some advices if you want to improve your solution :

    • On mobile, you could replace the values of transform-origin with : transform-origin: 0. I think the cross will have a better UI this way.
    • I think you could get rid of all the width setted for your components (width: 325px; width: 730px on desktop). Add max-width: 730px, margin: 0 auto on desktop and margin: 0 24px on mobile. Let it breathe :) It will look more fluid

    Then:

    • When you click on "select reward", try to select the right pledge component (if you click on the $75, select it when modal opens and try to focus the input with a default value of 75)
    • Pledge with no reward should not give the possibility to enter an amount > it's a free one (it will just add +1 backer to the total of backers)

    About the code : it's really great. Just two thing :

    • Export your components (for instance, class ModalPledge extends React.Component {} as a new file (ModalPledge.js) and Import it in your app.js. It will look something like this : import ModalPledge from "./ModalPledge"
    • You will get props the same way
    • Use it <ModalPledge props={...}/>, pass the props you needs, etc...

    And last thing, React is supposed to stop support for ES6 JS CLASS. Take a look at React Hooks Link

    Hope it will help and Enjoy Coding!

    Marked as helpful

    1
  • P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hi ! Good job there :)

    As @isprutfromua said, fix your html and a11y issues. Take care of his advices too.

    For the positioning on your component, you are using Flex on <body> with flex-direction:column. It lacks of centering because when using flex-direction:column, the "axis" changed. align-items: center is not positioning on the Y axis but on the X axis. So to fix your design, add justify-content: center; to center your component on the Y axis

    Hope it will help :)

    Enjoy coding!

    Marked as helpful

    0
  • turtlecrab• 550

    @turtlecrab

    Submitted

    My first project here! This site is awesome! I'm in my n-th attempt to learn frontend stuff and this community is just perfect for that!

    So problems/questions I got during this project:

    • What's the best way to make a button in a situation like this? Is it ok to just put img inside a button? I suspect the way I did is not great for accessibility.
    • I couldn't make attribution footer behave normally in mobile view(so i just hid it). I tried to overwrite position: absolute with static, but couldn't find proper flexbox parameters so it would stick to the bottom or scroll when the advice is long. Probably I shouldn't have positioned it absolutely in the desktop view(and should've started with mobile-first approach).

    Advice generator with native js and parcel as a simple bundler

    #parcel

    1

    P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hello and Nice job!

    Hope it will help :

    • For the button, for accessibility purpose, I would add aria-label="text" on the button. "text" could be something like "generate random advice"
    • For the position of the footer, maybe remove the position:absolute and add a gap:4rem (more or less) on the <body>. I think for the demo of this challenge, would be enough :)

    Enjoy coding!

    Marked as helpful

    0
  • P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hello !

    Nice job! Seems ok to me :)

    Some improvements :

    • You can replace your <div class="title"> by a <h1>, this will fix your acc. issue
    • Check the design if you can have a bigger line-height for the text.
    • You could change how to handle margin on title and description as well: -- For instance, you can remove all margin on .title and .description -- Add a padding: 24px on your .text -- Add this to your code :
    .title + .description {
    margin-top: 24px;
}

    Marked as helpful

    0
  • P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hi ! You almost got it :)

    You could :

    • check color for the icon background and your buttons background-color too.
    • add a title to your page (right now is "document")
    • fix the "badge" component displaying "You selected x out of 5"
    padding: 0.5rem 1.2rem;
color: hsl(25, 97%, 53%);
font-size: 1.4rem;
border-radius: 22px;
background-color: hsl(213, 19%, 18%);

    Marked as helpful

    1
  • P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hello ! Glad you submitted this challenge!!

    Some things you could improve:

    • size of the component is too small (should be 412px max on desktop screens)
    • using position:absolute to center your app is not good practice, check out : link
    • you can use box-sizing: border-box; on your .card to not calculate padding/margin/border > it will change the CSS box model from standard to alternative. image
    • if you don't have access to the design files, you can add the images provided by Frontend Mentor in a tool like Figma and take a screenshot of your work to put it above to compare and adjust your work

    Hope this will help :)

    Marked as helpful

    1
  • P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hello ! Nice job!

    I see few points of improvements:

    • I don't have a responsive view ?
    • bookmark button is not working
    • select reward button in the about section should open the modal and select the chosen pledge
    • You could check if input value is === pledge because there is a minimum for each pledge ;)
    • pledge with no reward should have "continue" button and displays the confirm box
    • fix your accessibility issues :)
    0
  • P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hi !!

    nice job!

    Consider using a <ul> <li> list for the user's stats. It looks better to me

    Marked as helpful

    0
  • P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hi ! Nice job, you completed it and is good!

    Really interesting to read your notes about your experience on this challenge. That's definitely a good tip!

    I would suggest to add link on :

    • image wrapper > it could lead to another page or open a lightbox for example
    • add a link to the creator link, replace the <span> with a <a> tag
    • same for the name of this NFT

    :)

    Marked as helpful

    1
  • Fraser Watt• 1,790

    @fraserwat

    Submitted

    Tried out a new methodology for this, CUBE CSS (there's a good walkthrough of the rationale and a sample web page here). Really really liked this, it's quite utility focused but you don't end up with having to remember 1,000 utilities and make your HTML look incomprehensible like you do with Tailwind (but maybe I'm just using Tailwind wrong!). I feel like my CSS is less repetitive and I feel like I wrote less of it than usual (although that might be due to the relative lack of complexity in the project, and would be difficult to measure given the amt of auto generated classes in the config).

    Still going to take a bit of getting used to but I think I'm going to bring this more into my CSS more generally (it works really nicely with SASS).

    Towards the end I think I got a bit hacky and there's probably a better way I could have done the layout for Desktop than making the hero image and the stats list position: absolute... Any ideas here?

    Suite Landing Page using CUBE CSS

    3

    P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hi! Nice job. Your layout is perfect! Wasn't quite satisfied with mine and seeing you, blew my mind ^^

    Just something you forgot : the blur pattern behind jeremy's image! :)

    Marked as helpful

    1
  • Łukasz• 20

    @Infect3d

    Submitted

    On mobile version container won't stay at the center of the screen. Could You help me fix this ?

    Responsive CSS

    3

    P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hello ! Great job, you nailed it :)

    To center an element in the viewport, I would suggest better day than using margin-top/padding-top with %;

    Take a look at this link : here

    Enjoy!

    Marked as helpful

    1
  • Ankitha Pai• 20

    @ankithapai

    Submitted

    i dont know how to use github well as of now hence i cant host it

    Website QR code

    3

    P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hello !

    Your project seems to be on Github. First of all, sounds good :) Then you can create a free account on Vercel or Netlify to host your project.

    I use Vercel, it's super easy. Just connect your github account within Vercel and then import your project. Deploy it and share your live project ! :)

    Marked as helpful

    1
  • P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Nice challenge ! Interesting to see the use of React context with Class components.

    I would suggest to use .map() method to render your <Card> component instead of selecting all your item like this :

    let work = inputData[0];
let play = inputData[1];
let study = inputData[2];
let exercise = inputData[3];
let social = inputData[4];
let selfCare = inputData[5];

    You could do

    { inputData.map((item, index) => <Card key={index} data={item}></Card>}

    index could be replace with ID (and it's a better practice) example : key={item.id}

    Hope this helps :)

    Marked as helpful

    1
  • P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Welcome ! Almost perfect. The first text should be in a heading tag or strong tag. The second text should be in your <p> tag.

    0
  • P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Perfect ! Welcome to Frontend mentor :)

    0
  • P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hi ! Works like a charm !

    Just one thing : I can't reply to the first comment and this should work, right?! Will take a look at your code to compare your React code with mine! Thank you and keep going!

    Marked as helpful

    1
  • P
    Clément Creusat• 1,675

    @ccreusat

    Posted

    Hello ! Really really good challenge! You did it !

    One suggestion about center the card component, check the first example of this page on developer mozilla : link

    Marked as helpful

    1