Skip to content
OverviewSolutions
13
Comments
14
P
Jim Barnett
@jamesbarnett

All comments

  • KrishnaPoddar1•400
    @KrishnaPoddar1Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Utlizing the JSON file to get data for the first time.

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

    Using JSON was really difficult and took a lot of research to get through

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

    As you can see in the JavaScript Code I have some comments in nextFunc() which were not giving the proper output like:

    const val = timeframes.${clickedId}.current; const value = element[val];

    This is giving me undefined output and due to that I had to use a brute force method. I would love to know what was wrong in this and any other advice /suggestion will be helpful

    This was my first time using JSON so I don't know whether it is correct or not.

    Responsive Time Tracking Dashboard Using HTML,CSS,JS along with JSON

    1
    Jim Barnett•260
    @jamesbarnettPosted 4 months ago

    Just finished this challenge, so I was very curious to see another implementation. Your unit selection is fantastic. Refreshing to see no inappropriate uses of pixels. I also like how your solution does not use excessive chaining.

    You ask about this line of code: const val = timeframes.${clickedId}.current; const value = element[val];

    I can tell you are trying to use clickedId to select the appropriate data. But you cannot use the ${..} outside of a backtick delimited string. You found the correction to use the [] brackets instead and used that in your code, that's great. On the second statement, I think maybe it should change to const value = element[clickedId].current; I might be missing something.

    Great job getting this working. It's challenging!

    Hope this helps. Happy coding!

    0
  • Sarah•580
    @AutumnsCodeSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of working with regex successfully, the JS in general and overall how it turned out. I believe I could simplyfly my css better and adding some animation for the transition.

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

    I believe the most challenging part was the display section when clicking on the buttons

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

    I read the "Managing forms with JS" on the Learning Path before. And it would help me if someone explain to me how to use it on this project.

    And any kind of feedback is welcome!

    Responsive Newsletter with vanilla JS (click and keydown-event)

    1
    Jim Barnett•260
    @jamesbarnettPosted 4 months ago

    Hello, congratulations on your solution! It's exceptionally well done. Semantic markup, nice responsiveness, and incredibly accurate to the design.

    The one thing to think about improving here is validating an email address with a regular expression. As it stands the spec includes the ability have email address with other international characters not covered by the regex. See the top answer to this old Stack Overflow question (the poster breaks down how incredibly complex this is): https://stackoverflow.com/questions/201323/how-can-i-validate-an-email-address-using-a-regular-expression

    Hope this is helpful or at least interesting. :) Happy coding!

    0
  • AmandeepGuggi•100
    @AmandeepGuggiSubmitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    How can I remove that little scroll bar at horizontal axis?

    Solution to Recipe page

    1
    Jim Barnett•260
    @jamesbarnettPosted 4 months ago

    Hello,

    Your horizontal scrollbar can be removed by changing the width values for your main image and the menu class from 100vw to 100%. You might be interested in this video outlining some of the "gotchas" with viewport units: https://www.youtube.com/watch?v=veEqYQlfNx8

    Hope this helps. Happy coding!

    Marked as helpful
    1
  • marcel-schmidt-dev•480
    @marcel-schmidt-devSubmitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    nothing

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

    nothing

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

    nothing

    Article Preview Component

    1
    Jim Barnett•260
    @jamesbarnettPosted 4 months ago

    Hello,

    I really like how simple and clean your popup javascript and css work together. Very nicely designed.

    I noticed a lot of pixel values in your SCSS file. You might be interested in this video that explains why pixels can be detrimental to accessibility: https://www.youtube.com/watch?v=xCSw6bPXZks

    Very nice work overall! Happy Coding!

    0
  • Dave Quah•660
    @MilleusSubmitted over 2 years ago

    Hello everyone o/

    I would appreciate if you can check this out and let me know any feedback or tips on how it can be improved, or how you might approach this differently. Thank you very much!

    Meet landing page

    1
    Jim Barnett•260
    @jamesbarnettPosted 4 months ago

    Hello Dave,

    Your solution is excellent and I will be bookmarking it! I don't really have any suggestions on how to improve your solution, but you mentioned alternative approaches, so I will outline a couple of things I did differently.

    Having just finished this challenge, I immediately went to look at your implementation of the vertical line/circled section number element. I find your solution quite elegant. I took a different approach and used pseudo elements. I think your way is better, especially with the aria-hidden=true.

    The next thing I wanted to look at was your hero, and again here, I liked your implementation better than my own. Mine was just media queries and pseudo elements.

    I liked the way you did the tinted footer image. My approach used linear-gradients and multiple backgrounds, described here: https://css-tricks.com/tinted-images-multiple-backgrounds/

    I learned a lot and found some things to research. It was a joy to review. Happy coding!

    0
  • PhDBui•260
    @congdoan6997Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    improve my skill css

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

    i use tailwindcss

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

    CMS management

    Testimonials grid section main

    1
    Jim Barnett•260
    @jamesbarnettPosted 4 months ago

    Hello,

    Things I like about your solution:

    • I really like your use of tailwind.
    • I liked seeing this solution solved with flex since I used grid areas.
    • Looks good for both versions of the design

    Things that could be improved:

    • Image for the quote.

    I think it would be more friendly to screenreaders (and arguably more elegant) to implement the quote background svg with a pseudo element.

    Good job on your solution. It was a fun review. Happy coding!

    0
  • Srijan Manandhar•470
    @srijanssSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?
    • I had a chance to learn about CSS Grid in detail,
    • I learned about grid-template-areas in this project.
    • I also learnt how to use grid-column and grid-row for the same layout.
    • But use of grid-template-areas was clean and easy to understand.
    What challenges did you encounter, and how did you overcome them?

    I had some difficulties to show the top border on each section.

    It was not matching with the design. I used border-top, it was rounding as per the border-radius CSS Then I used ::before pseudo element to add the top colored bar, now the pseudo element was covering the border-radius Then I found out that I have to set "overflow: hidden" to clip the child elements to fit within parent's border radius

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

    Feedbacks are welcome.

    Four card feature section using CSS Grid

    1
    Jim Barnett•260
    @jamesbarnettPosted 4 months ago

    Hello Srijan! Your solution is very well done. I just finished this challenge myself, and I immediately liked your usage of CSS custom properties for styling each card/section. I liked your usage of PostCSS, too. My favorite part is your use of grid-template-area. It resized and displayed correctly when resized. Your accuracy for reproducing the design is really great.

    As far as accessibility is concerned, the only issue is see is using pixels for font sizes. I think you had a couple of other places where pixel was used when a better unit could be chosen.

    I liked your use of BEM for naming your classes, and the names are good and logical, too. You also made good use of HTML5 semantic tags. I was recently pointed to an article on HTML5 tags that I think you might also find interesting: https://www.smashingmagazine.com/2020/01/html5-article-section/

    Happy coding!

    Marked as helpful
    0
  • Stephanie Dennehy•220
    @Stephanie-DennehySubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    This was the first project I have completed with a mobile-first approach. All my other projects have started from a desktop approach and then adapted to mobile.

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

    My biggest challenge was getting the spacing right when the layout changed. I just used some trial and error with the sizes until I got it the way I wanted.

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

    I don't think there is anything I need help with. But I will always take any comments or suggestions for my code. :-)

    Product Preview Card

    1
    Jim Barnett•260
    @jamesbarnettPosted 4 months ago

    Great job on your solution! Here are some things I particularly liked:

    1. Logical, consistent naming of variables/classes/etc.
    2. Your markup is strong semantically. You used a main tag and included the all important h1.
    3. Renders correctly on all screen sizes. Nice and responsive!

    One small thing you could improve is in your card-subtitle. Notice how the original design has increased letter spacing. For more details, see https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

    Hope this helps. Happy coding! :)

    0
  • Jim Barnett•260
    @jamesbarnettPosted 4 months ago

    Hi,

    Very nice work on your solution! It looks excellent.

    Things I especially liked:

    1. Use of Tailwind, Vite, and Svelte.
    2. Very nice responsiveness from tiny to giant screens.
    3. Fantastic work on the typography!
    4. The way you utilized tailwind screens to make things responsive without media queries.

    Things that could be improved:

    1. The W3's guidance is to use rems over pixels for font sizes is better for accessibility and future proofing. https://www.w3.org/WAI/tutorials/page-structure/styling/

    Happy coding!

    0
  • Ujjwal Srivastava•50
    @Usri96Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that by fiddling around on web, I made the use of media query to change the width of the container.

    I have used margin value to maintain 24px gap between the card and screen edges. Is it correct way or something else can be used?

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

    I found myself stuck in adding responsiveness to the screen. I certainly believe it can be made better with proper guidance.

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

    I need support in using the correct semantic elements and using grid or flex effectively.

    Blog Preview Card with responsive width using media query.

    1
    Jim Barnett•260
    @jamesbarnettPosted 4 months ago

    • Semantic HTML Yes. Always good to include an h1 and nice use of article as well.

    • Accessibility Using pixels for font sizes breaks the users ability to zoom. I think this article explains it nicely: https://www.seeratawan.me/blog/why-you-should-move-from-px-to-rem-in-css/ Another nice addition for accessibility would be to utilize the HTML time tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time

    • Layout/Screen Sizes Looks great! Everything is proportional and reasonable sized.

    • Code Clean markup and CSS. Great job!

    • Differ If memory serves on this challenge, isn't there supposed to be a hover effect that changes the dropshadow?

    Marked as helpful
    0
  • Jim Barnett•260
    @jamesbarnettPosted 5 months ago

    • Does the code include semantic HTML? I would say so. Maybe an opportunity to change some divs to article/section tags. Minor.

    • Is it accessible, etc? Yes, good to see h tags and p tags and not everything a div. Nice work! On your alt text, you have "A picture of..". The W3 guidelines suggest avoiding words such as "picture/icon/image". See the "Superfluous information in the text alternative:" section in the link below:

    https://www.w3.org/WAI/tutorials/images/tips/

    • Does the layout look good ... screens, etc.? Mismatch on top and bottom margin. That nitpick aside, looks fabulous, is nicely responsive down to very small screens.

    • Code well structured, etc? Yes, very clean, on both CSS side and React side. Well done!

    • Differ from design? Your accuracy recreating the design is really very good. Great work on the challenge!

    Marked as helpful
    0
  • DF•330
    @FengDennySubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Creating this social card was a great experience, and a very fun project. It helped me deep dive the fundamentals of flexbox and CSS transitions.

    I would probably choose a different coloring scheme, so I can practice on color pairing as much as I can.

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

    While I was creating my hover effect to display my social icons, there was an issue where the horizontal scroll bar would appear because I have set my icons position to right: -100% .

    Setting my icons position to right: -100% triggered content the my overflowing the horizontal axis of its container (.card-content .card-content-button).

    To fix this issue, I simply used overflow-x:hidden to hide any any content that overflows the container horizontally will be clipped and hidden from view. Thus, fixing my scrollbar issue.

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

    Since, I used abbr tag with a title, the text is presented by browsers as a tooltip when the mouse cursor is hovered over the element.

    Without using Vanilla JavaScript, how can I style this default tooltip using only CSS?

    Flexbox and Nested Flexboxes CSS Social Links Profile Card

    1
    Jim Barnett•260
    @jamesbarnettPosted 5 months ago

    I think you did a great job in regards to semantic HTML. It did not occur to me use h1 and h2 for the Name and Location respectively, but it seems obvious looking at your code. Clean, simple, nicely done!

    I ran the WAVE accessibility plugin on your site, and there were no issues. Great work in this regard, too.

    Checked on a range of screens, it is very nicely responsive and handles small screen sizes quite well.

    I found the code very readable and well-structured personally. I did run the code through the html-validator tool, and it did complain about the trailing slash in your single element coding tags. The tool claimed these can create problems if used with unquoted attributes. Sounds like quite the edge case to me.

    Does the solution differ considerably from the design? Yes, but clearly you knew that already. :) The panning-in/out icon effect you added is really cool!

    Marked as helpful
    0