Skip to content
OverviewSolutions
3
Comments
21

Jason Moody

@MoodyJWHouston, TX300 points

Started coding during the summer of 2019 and I haven't stopped since. Landed my first coding job in December 2019 and went from a six month contract to a full-time position. I've had a lot of other jobs; coding is the only one that has provided any sense of enjoyment while also paying the bills.

I’m currently learning...

Everything! I'm always trying to improve my Angular skills for my job. I sometimes use React outside of work to keep those skills sharp as well. Recently I've also been working without a framework to develop a better understanding of HTML/CSS.

Latest solutions

Latest comments

  • Jason Moody•300
    @MoodyJW

    Hi Eileen, great job on the challenge! Your question about the company, I think I see what's wrong.

    You're using the company property on the user data, but the one you want is actually organizations_url. A bit confusing, but if you look at the data in your network tab you'll see company: null and that property is actually just a string for the user's company, company: "Company Name".

    A styling issue I noticed is that you haven't accounted for longer strings overflowing their container. Here's a screenshot of what I'm talking about. You can probably solve this pretty easily by adding a couple of styles to your <a>:

    text-overflow: ellipsis;
 overflow: hidden;

    That would likely solve it for all screen sizes.

    I also encourage you to take a look at your HTML report as you have quite a few issues there. For example, you typo'd on a <label> element.

    Hope this helps you out. Don't forget to be proud of all the things you did right!

  • Jason Moody•300
    @MoodyJW

    Hey Michael! You've done a great job on this. Here's some feedback.

    • Your code isn't formatted very well, especially the HTML

    • Generally there isn't much of a need for empty lines in HTML. Sometimes it's useful to break up large files into smaller pieces, but large projects are going to do this using separate files

    • The indentation is also significantly wider than it needs to be. Two spaces seems to be the most frequently used indentation for HTML

    • Your CSS is better, but still has some unneeded empty lines

    • You should remove comments. Doesn't really matter, but it's a good practice to only leave comments that are necessary to explain why some code is there.

    • You've used the .img-container class redundantly inside of the media query

    • The responsiveness to screen sizes doesn't quite work on smaller screens. You might have more luck using a flex box design instead of a grid.

    But the laptop screen is great! Hope this helps you out, keep at it

    Marked as helpful
  • Jason Moody•300
    @MoodyJW

    Hi Kent! Excellent job on the challenge. I noticed a few issues that might help you improve.

    • definitely take a look at the HTML report, you have a number of accessibility issues regarding missing landmark elements.
    • you have a styling issue in the links section at the bottom, here's a screenshot

    When the text is longer as seen in the image, it's going to force the other elements to the right and it gets a bit sloppy. However, this is pretty easy to fix. There are a lot of ways to handle long strings, but my favorite is to just truncate and add an ellipsis.

    On the container div, the links wrapper, add overflow: hidden to your sass. Then on the p element, add overflow: hidden; width: 100%; text-overflow: ellipsis. That's it!

    The icons are also a bit clipped, but that's also easy enough to fix! If you open the svg file for the icon, there should be a width and height. Simply set the same width and height on the container div and it should be perfect.

    Great job, keep it up!

    Marked as helpful
  • Jason Moody•300
    @MoodyJW

    This is an extremely well done project! I don't see anything that stands out in the code. Couple of styling issues, though. On a laptop screen (1440), the card itself seems a little shorter than the design. Not a very big problem at all.

    The other is it looks like you didn't implement the background image. Generally the easiest way to apply a background image is to add the below styles to a container element or to the body directly.

    background-image: url(./image/blahblahblah);
background: var(--paleBlue);
background-size: cover;

    You might need to adjust based on the way your HTML elements are structured, but there are a lot of options for background images so it's usually best to play around with it in the browser dev tools. The (MDN for background)[https://developer.mozilla.org/en-US/docs/Web/CSS/background] is a great source, it should break down all of the property options.

    Hope this helps you out. Great job on the challenge, keep it up!

    Marked as helpful
  • Jason Moody•300
    @MoodyJW

    Hi Thiago! Great job on the challenge! I noticed a styling issue in the section with location, twitter, etc. If the content is longer it will overflow the container and cover the second column.

    Here's a screenshot of what I'm talking about

    You can probably fix this with some relatively simple CSS on the element containing the text

    text-overflow: ellipsis;
overflow: hidden;
width: 100%;

    As long as the parent element has a width, the text should cut off at the edge of the parent element. You might need to adjust that width based on how you've set up the flex boxes.

    I'd also suggest trying to start developing for mobile first, it makes styles a lot easier to adjust when you're getting bigger instead of smaller. Plus over 90% of people in the world access the internet via mobile, so most frontend work is going to require responsive styles. Still, this looks really good and the small change to the text should make the desktop version perfect! Hope this helps, let me know if you need more info.

    Marked as helpful
  • Jason Moody•300
    @MoodyJW

    Hello @ sohhamm! You did great on the challenge! I noticed one issue with the styling of the bottom section with links to Twitter, location, etc. If the displayed user has a longer url the section stretches to fit the length and forces some of the content to the edge of the card.

    Here is a screenshot of what I'm seeing

    You can solve this in a few ways. I generally prefer to truncate the text and use an ellipsis to indicate the text has been cut off. A tooltip is a great way to display all of the text in these cases. The easiest way I've found to do this is with CSS on the element containing the text. As long as there is a container, this should pretty much always work.

    white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

    You also have a second problem in this same area, which is how your grid is designed. You've used grid-template-columns: 1fr 1fr, which is good if the columns have the same size content or if you don't care about stretching/shrinking grid cells as needed. However, what's happening in this case is the first column is as wide as the contents and the second column takes up the remaining space or the same space as the first column, whichever is smaller.

    There are a lot of ways to solve this, but here's a simple way I did it without significant changes to your code.

    .extraInfos {
    ...existingStyles;
    grid-template-columns: 50% 50%;
    gap: 18px 64px;
}

    So we change the columns to both be 50%, forcing them to maintain their width and not stretch

    .flex {
    ...existingStyles;
    align-items: center;
}

    Centering the content in the flex box removes the vertical stretching on the icons

    .extraInfoTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    And this is the change mentioned earlier to truncate the text.

    Here's a screenshot of what it looks like after I made these changes in the browser.

    So not really that big of an issue, just a few small changes! This project gave me a headache on that exact same part. Hopefully this will help you out!

View more comments