Skip to content
OverviewSolutions
13
Comments
19
Sara Dunlop
@Risclover

All comments

  • Victor Eleanya•780
    @mrvicthor
    What are you most proud of, and what would you do differently next time?

    I am proud of the logic to hide the letters. Being a self-taught developer, it was particularly challenging to fix some of the bugs I encountered when implementing the logic to hide random letters. I am happy that I manage to fix them.

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

    Logic to hide random letters.

    What specific areas of your project would you like help with?

    I will like a code review, if possible. I intend to refactor the code overtime.

    Responsive Hangman Game App

    #accessibility#next#react#tailwind-css#typescript
    2
    Sara Dunlop•450
    @Risclover

    Hey Victor! Some things you might want to consider figuring out when you refactor in the future that I noticed while testing your solution:

    • You're lacking spaces in between words. As you have it now, there are no spaces, which smooshes the words together, making it look like one word. For example, Orange is the new black looks like orangeis thenew black or orangeisthe newblack, depending on the screen size.
    • As we discussed over in my solution, you're not supposed to reveal the letters like you're doing in a traditional game of Hangman. I think you're making it way too easy on the player by doing that, and you're taking away half of their game lol 😊
    • When the player tries to guess an incorrect letter, although the 'lives' meter goes down like it should, the letter doesn't get disabled to indicate that the user has already guessed that letter. The only time the letters get disabled are when the player guesses a letter correctly, so the player is able to guess a letter incorrectly multiple times, which shouldn't be the case.
    • It looks like your lives meter might contain an extra life, I think? The meter goes down to 0 and then on the NEXT guess, the game ends. It should end right when the meter hits 0, not the turn after.

    Overall, nothing too big. Good job.

    Marked as helpful
  • ZaraMr•40
    @ZaraMr
    What specific areas of your project would you like help with?

    this is my first project that I build and submit here, I had few chalenges and I could solve some of them, but there is still two issue that haven't been solved yet. I would appritiate your help...

    _ there is a space between two class of "footer-top" and "attribution" while there is no padding or margin! _ In section-2 when items get hovered, the text must not get affected by the 'before element' that I set , and must be whole black , but it's not!

    I'm a junior in this field and want to learn more.. so, if you have any suggestion, I'm eager to hear :)

    HTML, CSS, JS

    1
    Sara Dunlop•450
    @Risclover

    Hi! I have a suggestion for you. In regards to the space between footer-top and attribution:

    Both of these classes are inside of the <footer> element. The <footer> element itself has gap: 5rem. So since they're inside of <footer>, you're basically saying "put a 5rem gap between footer-top and attribution".

    Marked as helpful
  • angwb•40
    @angwb
    What are you most proud of, and what would you do differently next time?

    I'm proud of getting most of it done , mainly the structure at once. As usual I would like to be more practical in css but I guess it's a matter of time and practice to get there.

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

    Working with flexbox should make things easier but I'm still finding it difficult figuring out the appropriate sizes and how not to make it so it breaks in different views. The way I overcame them was changing values until I was satisfied with how it looked.

    What specific areas of your project would you like help with?

    update: after checking the submition in the comparison part, the screenshot is not the same thing I see on my browser window. I don't know if the comparison applies a sort of zoom or some type of width that "breaks" the final preview. It's frustrating because I've been making changes and it doesn't look like it does on my browser. The one that is shown here is not the one I did which is much closer to the "solution". If you check the "live site" it looks closer to the solution.

    Blog preview card

    2
    Sara Dunlop•450
    @Risclover

    Addressing what you said here: "More than help I'd like an explanation as to why whenever I switch to the responsive view the image from the card would have a sort of "margin-top" even though I did not use this attribute"

    So I was just checking out the live version of your site. I wasn't sure what you were talking about, because for my view, the image was actually cut off at the top instead of there being extra space. But then that clued me in to what the issue might be.

    Go back to responsive view and change the height. You'll see that depending on the height of your browser, the card can either look like the image is going beyond the boundaries of the card, or there's space between the card and the top. This is because you have a % height (60%) instead of a fixed height (such as with px). Change it to be of fixed height to fix the issue, and just make the width dynamic to fit different screen sizes.

    Marked as helpful
  • Gaurav chauhan•50
    @ravenbirdb1b
    What challenges did you encounter, and how did you overcome them?

    ** Filtering Filtering Logic part is a bit tricky. gave some time to it to figure the solution out.

    What specific areas of your project would you like help with?

    Need some help with the css, as to how can i improve it, please point out any mistakes if possible and also what can i do to improve the feature.

    Job listing with filtering

    #react
    2
    Sara Dunlop•450
    @Risclover

    Hi! Nice job! I just wanted to point something out. When you click on tags, there are inconsistencies with how they're staying highlighted. I'll try to provide a very specific example so you can see what I'm talking about.

    Steps to reproduce:

    1. Click on the Frontend tag in the 1st listing (Photosnap Senior Frontend Developer)
    2. Click on the Junior tag in the 2nd listing (Account Junior Frontend Developer)
    3. Click on the CSS tag in the 2nd listing (MyHome Junior Frontend Developer).
    4. Click 'Clear' to clear the tags.

    You'll notice that the CSS tag is still highlighted.

    1. Click Frontend in the 1st listing again.

    CSS is still highlighted, so it's not an issue of it merely being the "last tag clicked" or anything.

    1. Close the Frontend tag by clicking the X close button.

    Frontend and CSS are still both highlighted.

    Just as an example. It seems that that's some logic that you need to hammer out. :) Just thought I'd make you aware! <3

    Marked as helpful
  • Karim Chehab•150
    @KarimChehab2003
    What are you most proud of, and what would you do differently next time?

    I'm happy that I learned how to use bootstrap for form validation as well as using toasts while doing this project. It will be a beneficial reference for future contact form designs where I can try implementing it with React.

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

    One of the challenges in this project was the form validation invalid feedback which was a text that appears in red when the input isn't what the form expects. I managed to overcome it by reading the Bootstrap's documentation on their form validation feature

    What specific areas of your project would you like help with?

    I had a little issue where I couldn't place the form in the center of the page because whenever I do so and open up the web console or change the window's width/height, some of the form would be cut off. In the end, I settled with giving it a top & bottom margin to give it some space around the edges.

    Responsive Contact Us Form using Bootstrap

    #bootstrap
    1
    Sara Dunlop•450
    @Risclover

    Hi! To address your issue with centering the form, here's what you need.

    body {
    min-height: 100vh;
    height: 100%;
}

    Without this, your body was only as tall as the form, but with this, it now fills the entire browser. Then, you'd just use flex to center it vertically and horizontally, like so:

    body {
    min-height: 100vh;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    I would personally recommend putting the display properties in a separate div that encompasses your app (basically adding a div between <body> and your first element as the app's container, setting its height and width to 100%, and including the display properties above there instead of in the css for the body), but yeah. Doing that fixes it!

    Marked as helpful
  • Luís Gustavo Gorniak•160
    @luisgustavogorniak
    What are you most proud of, and what would you do differently next time?

    It was really fun building this layout, tailwind gave me all the tools I needed for styling. Although, I think it'd be useful to set a couple of rules at the main css file.

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

    The most challenging parts were when I built the navbar/sidebar component for the mobile version and when I adapted it for the Desktop view. I struggled a bit when building the logic with javascript and React hooks, but with a little help of internet and chatGPT I could do it.

    What specific areas of your project would you like help with?

    Please review my code, tips and advices are always welcome!

    News web homepage with React and Tailwind

    #react#tailwind-css#vite
    1
    Sara Dunlop•450
    @Risclover

    Hi Luis! The biggest tip I have for you is not using 1 long component for your app. An important concept in React - and in programming in general - is "SRP", which stands for Single Responsibility Principle. In a nutshell, the SRP is that every component/function should do one thing and do that one thing well. Your entire app is contained in one component, but following the SRP would mean having a component for the top navbar, a reusable component for each of the buttons in the navbar, a component for the "hero post", etc. Separate each of the primary parts (and reusable parts) into their own components.

    The whole beauty of using React is being able to create reusable components. For example, the numbered blog post buttons (not sure what else to call them) at the bottom of the page (labelled 01, 02, and 03) would be perfect candidates for their own separate component, which I'll explain how to do.

    In your main component (or whatever the parent component ends up being), you would have something like this array, which holds the information of each blog post button thing:

    const blogPosts = [
	{num: "01", title: "Reviving Retro PCs", description: "What happens when old PCs are given modern upgrades?", img: (image path), imgAlt: "Computers"},
        {num: "02", title: "Top 10 Laptops of 2022", description: "Our best picks for various needs and budgets.", img: (image path), imgAlt: "Keyboard keys"},
	{num: "03", title: "The Growth of Gaming", description: "How the pandemic has sparked fresh opportunities.", img: (image path), imgAlt: "Hand throwing game controller"}
]

    Notice that everything we need is there - the image and image's alt, the number, the title, and the description.

    Then, down in the JSX:

    <div className="blog-posts-container">
	{blogPosts.map(post => <BlogPost num={post.num} title={post.title} description={post.description} img={post.img} imgAlt={post.imgAlt} />)}
</div>

    In the above code, I'm just iterating through the blogPosts array I created earlier using the .map() method. The BlogPost component (which I'll show you momentarily) is used for each item in that array, and I'm passing the 5 properties from each object as props - num, title, description, img, and imgAlt, giving the component access to the information.

    Note: You could absolutely do the number differently, such as removing num from the blogPosts array's objects entirely and relying on something like the index of the element to identify the number to use instead. For example, the first element is at index 0, so you might do something like {0${idx + 1}}, which would give you "01". Here's the JSX with that implemented instead:

    <div className="blog-posts-container">
	{blogPosts.map((post, idx) => <BlogPost num={`0${idx + 1}`} title={post.title} description={post.description} img={post.img} imgAlt={post.imgAlt} />)}
</div>

    Then, for the BlogPost component (which again represents just 1 of those blog posts):

    const BlogPost = ({num, title, description, img, imgAlt}) => {
    return (
        <div className="blog-post-container">
	    <img className="blog-post-img" src={img} alt={imgAlt} />
	    <div className="blog-post-info">
                <div className="blog-post-num-label">{num}</div>
                <div className="blog-post-title">{title}</div>
                <div className="blog-post-description">{description}</div>
	    </div>
       </div>
    )
}

    Each of our props has been passed from the blogPosts array in the parent to the BlogPost component.

    A side note, another important concept in React and programming is DRY - Don't Repeat Yourself. When you don't use reusable components, you're inevitably repeating yourself by creating the same elements over and over. By creating a reusable component instead, you're saving space, time, and brain power, and you're improving your app's maintainability. Now, changing the layout of these blog post buttons is as simple as changing the code in the BlogPost component once rather than going to each one individually to make the changes.

    I don't want to overwhelm you with stuff so I'll just leave you with that, as that was the biggest thing that jumped out to me. Your code isn't terrible, but you can definitely tell it's written by someone relatively new to React, simply because these concepts (SRP, DRY, etc) are core React concepts. But I mean, you're following stuff like naming conventions, formatting best practices, and (at least in this case) you seem to be using the hooks correctly, so not bad dude!

    If you have any questions or if I was confusing, let me know!

    Edit: The other big thing is the lack of responsiveness to your page. Granted, the page looks great at the 3 main sizes (375, 768, and 1440), but if you open up the browser resizing tool and start moving it, you'll see that some elements start to look a bit off (badly sized or aligned, for example). It may seem nitpicky, but users have different devices and screen sizes, so I just wanted to point it out and say that it's just something you'll have to learn. It basically comes down to using certain CSS methods to make sure that your layout is always consistent, no matter the screen size. One quick tip I'll say is to limit the max width for your main app component so that, at enormous screens, the elements don't spread out too far, ruining your layout.

    Marked as helpful
  • P
    yuval nisim•440
    @nisimi96
    What are you most proud of, and what would you do differently next time?

    i am learning every day new thing can't lie its was so difficult but we manage to finish it

    i added couple animation to desktop screen and some animation to the mobile screen so this is something you have to check out

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

    position was one of my problem cause i have don't different positioning method and got stuck on the media views and couldn't make it work so i went through the position lessons again and had to understand the different between grid and flex

    What specific areas of your project would you like help with?

    grids and flex to know better the using of both and know when i want to use one over the other

    Results summary component css and html

    1
    Sara Dunlop•450
    @Risclover

    Hi! So in regards to using grid vs. flex, the more you get used to working with CSS, the more you'll have an instinct for which one to use. In general though, grid can be used for the overall presentation of the web page whilst flex box sets the layout within the components. In reality they are probably being used interchangeably by most developers.

    The name grid should give you a hint - generally it's most useful when you need an actual grid. Flexbox is useful for a lot of other positioning techniques (like aligning arbitrary numbers of items or such)

    (You can also use grid and flexbox together, eg. grid for main layout, and flexbox for positioning individual items inside your grid cells)

    EDIT: In regards to this project specifically, I would use grid for the 4 boxes on the right side (Reaction, Memory, etc) because it's a literal 1x4 grid.

    However, I would use flex for the elements inside of these boxes, specifically aligning them with align-items: center to make sure they're centered horizontally, and justify-content: space-between so that the icon and title are on one side and the number ratio is on the other.

    The left side of the app (the side with the blue background), I'd personally use flex for that as well - flex-direction: column to make the elements vertical instead of horizontal, and justify-content: center to make them centered.

    Let me know if you have any questions!

    Marked as helpful
  • Dugidem•250
    @DeeNue36
    What specific areas of your project would you like help with?

    I built this a long time ago and I'm currently working on new projects so any help with not allowing the add todo button to add an empty todo would be welcome

    Todo App with HTML, CSS & JS

    2
    Sara Dunlop•450
    @Risclover

    You could do something like this. It basically takes the trimmed (trimmed meaning spaces are ignored) input value's length. The length being 0 means that the input box is empty, so if it isn't 0, allow the todoDiv element to be appended to the list element.

    if (todoInputs.value.trim().length !== 0) {
    list.appendChild(todoDiv);
}

    If you have any further questions or if I misunderstood your original question, feel free to let me know!

    Marked as helpful
  • Sara Dunlop•450
    @Risclover

    Beautiful job!

  • Sara Dunlop•450
    @Risclover

    Just a small note about your code. You are using a lot of nested <section> elements, and several of them would be better as <div> tags instead.

    From the W3C specification:

    "The <section> tag is not a generic container. If you need an element only for styling purposes or for scripting, it’s better to use a <div> element instead. The use of the <section> element is appropriate only when the contents of an element are listed in the document’s outline."

  • Sara Dunlop•450
    @Risclover

    From what I see, you absolutely nailed this. Good job!

  • Sara Dunlop•450
    @Risclover

    Hi! You commented on my solution for the same challenge (about the logo/h1 element issue), so I came over to check yours out. I'm glad I'm not the only one who did the Reset button colors like how we did them.

    I like how you made it so that the People number automatically begins with 1 as well. Very smart!

  • Sara Dunlop•450
    @Risclover

    Hey :) I just wanted to point out that the "focus background" is missing from the rating buttons. Like the design images show, they are supposed to have a grey background when one is selected. Just some advice for when you do tackle this, you should make it so that it remains in that style even when you focus off of the button. And of course, only one should be able to be selected at a time.

    Marked as helpful
  • Sara Dunlop•450
    @Risclover

    Hi Alexander!

    I happened to notice that a lot of what you're having trouble with, I did, too, but I found solutions that worked for me. I submitted my own version of this challenge just a couple of hours ago if you'd like to take a look. It was created via pure HTML and CSS. I've never used anything but vanilla CSS (so no Tailwinds knowledge), but I think that when looking through your code, I can tell (for the most part) what's what.

    I'm replying to your solution questions because I feel like you and I have the same thinking in terms of how to execute this solution.

    • You might want to consider putting another media query breakpoint from around 795px to at least 500px. I had to do the same because I had the same issue - the mobile layout was too stretched for that screen resolution. I ended up just putting in a stationary mobile layout (meaning no responsiveness) for a portion of the "middle" chunk of resolution sizes (check out my solution to see what I mean). I don't have nearly enough experience to know whether this is the "right" thing to do, but it works for this challenge I think.
    • I, too, had decided that it would be best to do one big main container that the three smaller containers would fit into in order to use Flexbox to align everything correctly. I essentially achieved my mobile layout by making my big container flex-direction: column, and I did the same with the 3 smaller containers (since everything is vertically placed, flex-direction: column;). Then for my desktop layout, my main container went to row while each individual container stayed column. My point in saying all of this is that that approach isn't the problem, which brings me to the next thing.
    • When you mention justify-between, do you mean justify-content: space-between? Or were you using justify-between? Because I don't think that exists, which is why it wasn't working. (Or wait, is justify-between a Tailwinds thing?) When thinking about my approach for tackling this challenge, I, too, had the initial thought of using justify-content: space-between for the three smaller containers, but then I ended up using a combination of padding and margin to achieve good spacing.
    • In regards to your button/height problems, I have a solution for your buttons, but I wanted to say this first. With layouts like these, I tend to not touch height at all (in terms of responsiveness, I mean). I base my layout changes on width because when I try to change via height size, the results never seem to make sense, and I can't get it to look good. Personally, I don't think it's worth the huge space between the paragraphs and buttons in your 3 containers just so it's responsive to height change, but I also respect your opinion. :)
    • As for your question about the button being misaligned in places, you actually helped me out! I thought I was all good in that regard and went back to see what I did, but then I noticed that my buttons were doing the same thing! So thanks for that! I had to dig through answers around the internet to find something that worked for my specific situation, but after a little while, I did find a solution, and I think it could work for you, too.
    1. Your 3 containers (the parent containers of the buttons) need to have position: relative; set if they don't already. If you don't do this, the buttons will place themselves according to the actual page, not their boxes.
    2. Give your buttons position: absolute;. This is what will keep them still.
    3. You also need to give your buttons bottom: #px;, which places your buttons however many pixels above the bottom of each of the containers you want them to be.

    (Edit: Oh duh, you're using Tailwinds... well, whatever the equivalent code in Tailwinds is, do that.)

    As a side note, when I executed the above, all of my containers became too short, so I did have to adjust code elsewhere. I ended up needing to fiddle with my <p> padding. But I fixed everything, and now my buttons stay aligned, so hopefully it works for you, too!

    Oh, and I don't know if you've seen this, but I just noticed that right before your page changes from desktop mode to mobile mode, the buttons get disproportionately tall and look wonky. Might want to look into that.

    Alright, that's enough from me. I hope at least one little thing from this was helpful in some way. I'm pretty new to this too, so I'm not claiming that any of what I'm saying is best practice. I just wanted to share what worked for me.

    Apart from the issues, your page looks wonderful! Keep it up.

    Cheers!

    Sara

  • Sara Dunlop•450
    @Risclover

    Hi Harsh Gupta!

    I just did this challenge, too. I took a look at your page. A little bit of a disclaimer - I haven't looked at your code. This is from a visual viewpoint only. :)

    Looking at your page initially, it looks good! Obviously, there are some differences here and there between your solution and the original design - your buttons are smaller, your headings are smaller, the spacing is a little different, and you should put in a line height of somewhere around 1.5 to 2 - but all of that is nitpicky, and only matters if you want to get closer to an exact remake.

    When I went into the dev tools and started playing with the responsiveness of your page, I started noticing some stuff you should take a look at.

    1. The challenge is for us to create a desktop layout and a mobile layout so that the page is "responsive" to different screen displays. The mobile layout they used for their sample was 375px, so when I'm doing these challenges, I base my mobile layout off of a 375px display so I can most closely match theirs, and go from there. Anyway, when you go to 375px with your page, your buttons are way warped in shape - their height and width aren't proportional any more. Other than that, things look good there, too.

    2. From around 1000 - 1100px, your display looks odd. It's just too squished. Similarly, when the layout switches over to the mobile layout (at 959px), it looks really off until around, I don't know, 500px or so.

    For the record, I did the same thing. I, too, had a desktop and a mobile layout, and my problem was the same - the desktop layout was too squished going down in px, and then when it hit the mobile layout resolution sizes, the layout was way too wide until (scaling down) I hit around 600px or so.

    I highly recommend that you do what I did - make an additional media query breakpoint! Pick a chunk of resolution size range and either make it like the mobile layout or the desktop layout, but in a way that looks right for the screen sizes, if that makes sense.

    What I did for that "middle" layout was I created a stationary mobile layout, meaning although my elements were responsive for my regular desktop and mobile layouts, once it hit the "middle" mobile layout, it was just one fixed size for a bit until becoming responsive again. Check out my solution to see what I'm talking about if you'd like.

    Other than the responsiveness issue, I think you're doing well! Once again I'll mention that I haven't checked out your code, so no guarantees there ;)

    Keep it up, fellow newbie!

    • Sara
    Marked as helpful
  • Sara Dunlop•450
    @Risclover

    I'm not sure what you mean by blending mode, but I put an opacity on my image. Maybe if you do the same it'll work? Or use z-index to put it in front?

  • Sara Dunlop•450
    @Risclover

    After you gave me some feedback, I decided to look at your solution for the same challenge and found this. :) So, to help you out because nobody else did:

    Website should load dark theme by default, does it function correctly on your browser ?

    • Yes. I'm using Chrome (v. 95.0.4638.54), if it matters.

    Can you toggle between themes ? does this solution functions correctly ?

    • Yes.

    What are the best practices on creating dark and light mode ? is my approach any good ?

    • If you are asking in terms of code, I couldn't tell you. However, I will say that, in regards to your color scheme for the "Light" mode, it kind of hurts my eyes. Something about the background being darker than the content box (grey vs. white) coupled with the blue accents makes my brain not like it. I think if you were to make the background white and the content box grey, that could work better.

    Edit: Or, after taking a second look at it, maybe if you were to make it so that the shadow goes around the whole box instead of just at the bottom to create some better depth, that might also be a possible way to improve the visuals.

    Thanks again for your comment on my challenge! Yours looks wonderful!

    Marked as helpful
  • Sara Dunlop•450
    @Risclover

    I don't know if you've noticed this, but there's no background showing up. :)