Sara Dunlop

Latest comments

• 

  Victor Eleanya•710

  @mrvicthor

  Submitted 6 months ago

  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

  70
  

  Sara Dunlop•450

  @Risclover

  Posted 6 months ago

  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.

  0

  Marked as helpful
• 

  ZaraMr•40

  @ZaraMr

  Submitted 8 months ago

  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

  00
  

  Sara Dunlop•450

  @Risclover

  Posted 8 months ago

  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".

  1

  Marked as helpful
• 

  angwb•40

  @angwb

  Submitted 9 months ago

  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

  20
  

  Sara Dunlop•450

  @Risclover

  Posted 9 months ago

  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.

  0

  Marked as helpful
• 

  Gaurav chauhan•50

  @ravenbirdb1b

  Submitted 9 months ago

  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

  21
  

  Sara Dunlop•450

  @Risclover

  Posted 9 months ago

  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.

  5. 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.

  6. 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

  0

  Marked as helpful
• 

  Karim Chehab•150

  @KarimChehab2003

  Submitted 10 months ago

  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

  20
  

  Sara Dunlop•450

  @Risclover

  Posted 10 months ago

  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!

  0

  Marked as helpful
• 

  Luís Gustavo Gorniak•160

  @luisgustavogorniak

  Submitted 10 months ago

  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

  30
  

  Sara Dunlop•450

  @Risclover

  Posted 10 months ago

  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.

  0

  Marked as helpful