LincolnBollschweiler

Latest comments

• 

  P

  Gabe•300

  @gabeiSubmitted about 2 months ago

  What are you most proud of, and what would you do differently next time?

  I'm proud of how compartmentalized the card's style code is. I tried to keep it all together and I think it came out nicely.

  I also think I was able to finish this project relatively quickly by sticking to some methodologies like BEM (Block-Element-Modifier) and SCSS nesting classes. Much of the project bones were completed before spinning up the page to see how it looked. By the time I did, it was almost complete.

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

  I had a bit of trouble figuring out how to wrap a background color around a short line of text. A little bit of research and trial-and-error gave me the result that I want, but I'm not super happy with the semantics of the HTML that gave me that result.

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

  I'd like some advice on using semantic HTML to write a component like this. There are only a few different tag options that are viable, but I am not 100% sure I covered all my bases.

  

  Blog Preview Card

  #node#sass/scss

  2

  10
  

  LincolnBollschweiler•350

  @LincolnBollschweilerPosted about 2 months ago

  @gabei, you made the correct choice for wrapping your text in a background color: padding; and background-color;

  As far as semantics, keep doing challenges and there will be articles in the learning flow that will help with that.

  Great job! Happy coding, --Lincoln

  Marked as helpful

  1
• 

  P

  James D•460

  @jdillard2532Submitted about 2 months ago

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

  I'm open to all feedback. Thank you in advance.

  

  News-Homepage

  #sass/scss

  1

  00
  

  LincolnBollschweiler•350

  @LincolnBollschweilerPosted about 2 months ago

  Hi @jdillard2532, the page styling looks great. I think you hit all of the design requirements. Here are some issues I see:

  • the images in the bottom row grow in the vertical direction at various window widths. You might want to assign aspect-ratio (open the images in something like paint.net to get the native width/height) and object-fit: contain to minimize this
  • this challenge is in the Accessibility section of learning. As such, every item on the page should be accessible via keyboard TAB button, and each should read out either the text content or what the content is (when no text, such as image). You'll need two things: 1. tabindex="0" when tabbing doesn't automatically stop on an element; and 2. ari-label="your label info" or aria-describedby="some id", etc.

  This was a great submission. Happy coding! --Lincoln

  Marked as helpful

  0
• 

  Gwenaël Magnenat•1,520

  @gmagnenatSubmitted about 2 months ago

  What are you most proud of, and what would you do differently next time?

  I liked working with Zod which allows me to have more specific error messages with a simple syntax.

  I'm happy about how I used a dialog element for the form submit confirmation message. What do you think about it?

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

  I had quite some troubles with the form validation logic and specifically with the typescript types. There should be some easier way to do this.

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

  I'd like suggestions on code organisation. I try to divide the code in different modules to reduce the number of functions in each files. I'm open to any suggestions.

  

  Accessible Contact Form (Vite, Typescript, Zod)

  #sass/scss#typescript#vite#zod#accessibility

  1

  30
  

  LincolnBollschweiler•350

  @LincolnBollschweilerPosted about 2 months ago

  Hi @gmagnenat, really great job here on this one. In reviewing peers' projects I often find several things for constructive feedback (sometimes too many to mention). On yours ... almost nothing at all. Here is the one, very minor thing:

  • your validation error messages, while more explicit (and yes, better) do not match the requirement doc. ...meh, right?
  • (also the addition of the "Close" button on the modal/popup after submit ... I almost added it myself but thought just follow the instructions).

  By the way, I didn't have the Figma mockups ... maybe you did stuff mentioned there, but not in the /Design images.

  You asked about your file organization. Like the UI itself, this is very good. IMHO it is bordering on too good (overly extrapolated, maybe) for such a small project. That's just me though. You do you, because it is very good.

  Happy coding! --Lincoln

  0
• 

  hkaur108•310

  @hkaur108Submitted about 2 months ago

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

  On the smaller screen, I am not able to stretch the background image to half the screen. If someone can advise me on how to achieve that it will be awesome. Also any feedback on Semantics, accessibility will be greatly appreciated. Thanks!

  

  FAQ Accordion

  #sass/scss#jquery

  1

  20
  

  LincolnBollschweiler•350

  @LincolnBollschweilerPosted about 2 months ago

  Hi @hkaur108, desktop version looks great. There is no screen-reader output, however. So every item that can be seen and the reader should read out likely needs to have a tabindex="0" attribute placed on those elements. And if the reader gets the content wrong, then an attribute of aria-label="what you want the reader to say". If you download the free copy of NVDA, turn it on, and tab through your page you'll see what is missing (most of the items).

  To fix your mobile I commented out line 100 to 133, and then added this to line ~67 where you define section { display: grid; }. I used display: flex; justify-content: space-between;

  Although these changes look good on desktop and mobile, it causes a bunch of issues when the content is opened for each button click. IMO, this project will work easier with flex only, no grid.

  Good luck and happy coding! --Lincoln

  Marked as helpful

  0
• 

  ramiadi•190

  @ramiadiSubmitted about 2 months ago

  What are you most proud of, and what would you do differently next time?

  im actually proud of doing this challenge without using artificial intelligence!

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

  i had problems with the javascript part. i overcomed with a course online.

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

  i have a question. when using javascript, should you use function alot for addEventlistener? i made alot of functions instead of making the codes inside the addEventlistener. is this a good practise? Thank you!

  

  Javascript

  1

  00
  

  LincolnBollschweiler•350

  @LincolnBollschweilerPosted about 2 months ago

  Hi @ramiadi, this is a great start. If you would like to improve this, here are a few ideas: -- Review the different files provided in the 'design' directory. You will notice that many of your background and color values need some work. --- e.gs. ---- rating buttons should have three color states: default, hover, and selected ---- Submit button should have two states: default, hover ---- card background has a subtle color shift. Try this: background-image: linear-gradient(hsl(210, 19%, 18%), hsl(212, 25%, 12%));

  • Finally, this is the biggest issue: this is our first challenge on the Web Accessibility challenge. One major must-have for this is screen reader. To get this to work correctly, give each element that should be read out an attribute tabindex="0". Google how to turn on your default screen reader for your system. After it is running, tab through your page to make sure each of the elements is stopped on and listen to what is read back to you. If you don't hear anything on a/some element(s) then add an attribute to that element of aria-label="what you want the screen reader to say"

  Hope you find this helpful. Happy coding! --Lincoln

  Marked as helpful

  0
• 

  Sungho Cho•120

  @scho7623Submitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  Use of React and CSS Flexbox/Grid layout

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

  Adding an icon inside the text input element

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

  React best practices, CSS layout and styling

  

  tip calculator

  #react

  1

  10
  

  LincolnBollschweiler•350

  @LincolnBollschweilerPosted about 2 months ago

  Hi @scho7623, great work. You and I both chose to, instead of provide an error-state message, simply correct mistakes users may have made on input selections: revert negative values, no characters allowed.

  Overall this is a very solid submission. If you'd like to improve it, here are a few observations:

  • I think there could be a button hover-over color (with/without a transition).
  • The manual percent input field should keep the 'Custom' placeholder unless it is used; should not show what button value was selected.
  • The inputs should have an :active state of border/outline of 2px solid var(--strong-cyan).
  • There was some set of input changes I made that blanked out the 'Number of people' field. It happened after I tried to place a "-" in front of an input number, then clicked one of the % buttons. I don't recall the repro steps.
  • you might want to give the <input> fields a little more left/right padding to pull them away from their edges.
  • the input fields should have a little left-margin, indenting them a little from their labels.

  Very good submission! Happy coding, --Lincoln

  0