All solutions

Hey everyone,

Tried out using SASS on this build. And more fun with mix-blend-mode 😊

What is the best practice for SCSS files on GitHub? If HTML file can only read the CSS file (not SCSS directly) it’s obviously needed, but it felt odd including the compiled CSS in the repo since it’s not really the “source” code. What’s the best way to handle this, to make sure changes flow through properly for source code?

Any feedback or suggestions appreciated!

Thanks!

Hey everyone!

Another JS build, this time with the API. After making a simple incremental counter, I created a random number generator for the advice # for a bit more fun 😊

Was able to fix the “sticky” behavior of :focus on button click with :focus-visible. As I was digging into this, there’s a ton more I’d like to learn about accessibility.

This is my first time working with APIs and fetch(). It works well in the browsers I tested, except for Firefox. In FF, a new piece of advice is provided on page load, and also when you click the button the 1st time (works as expected). But after the 1st button click, the advice doesn’t update anymore on click. The counter updates, so I think it’s something in the way I used fetch(). None of the solutions I’ve found so far (mostly StackOverflow) seem to help. 🤔

So my questions this time around:

• Know of any sites that totally rock accessibility? I’ve found the WAI tutorials W3C provides and common design pattern best practices with ARIA and the WCAG guidelines as references. I’m interested in finding great IRL implementation examples or a particular site/dev/expert to follow so I can level up 📚 my skills in this area
• Not sure what in my JavaScript is causing the Firefox issue (maybe something missing from my code?). Any suggestions/recommendations would be greatly appreciated!

Thanks!

Hey everyone!

Switching gears from layouts to do some builds with JavaScript.

I came across a bug in Firefox where the checked input persisted after refresh. No issues on any other browser I tested, just FF. Changing the autocomplete attribute on the form element solved it. Works for this specific build with the type of inputs I used, but I'd probably apply directly to the specific inputs instead of parent form if I had any text input to avoid messing up accessibility. For anyone who may have seen this bug, is changing the autocomplete attribute the best solution? Or is there a better way to resolve it?

As always, any general thoughts or suggestions welcome. And any feedback on my JS to make sure I'm following best practices would be much appreciated.

Thanks!

Hey guys!

I liked the layering backgrounds challenge in this one. I was playing with a way to make the background circles adjust positioning with viewport size using calc that was smooth but didn't match up with the end design on mobile. This is my base version, it just uses media queries to match the design while I keep playing with it on a local repo. I feel like I'm overlooking what might be a simpler solution to this.

Any suggestions on how to get those background circles to be responsive while still matching the design specs? Any general suggestions/feedback also welcome!

Thanks!

Hey guys!

Playing with fluid typography using viewport units and CSS clamp() function on this project. Also using Flexbox with minimal media queries. Intentionally not pixel-perfect, I wanted to compare how close the ‘fluid’ approach came to the design. Currently applying clamp() on individual elements, but declaring global variables under root in a similar approach (t-shirt sizing) is on my list for a future build.

Any suggestions/feedback always welcome, and thoughts on my implementation of CSS clamp() would be greatly appreciated! I focused on font sizes, but I’ve also applied to some widths, margin/padding, and a row-gap in there with it to experiment with what all I could do with it now that I’m getting the hang of the calcs. I went with a formula for the preferred (middle) variable instead of a single value.

A couple of questions:

• Math(s) question: how much precision do you apply in your function variables? Two decimal places? Three? Four? Wondering what the best practice is here.
• I used em units for line heights (based on the design), though I realize this is a bit simplistic. I’ve also seen clamp() used for line height in relation to text length (longer width text with more line spacing, and vice versa). More of a design question, but curious what anyone else has seen or used? Any method you preferred or found worked better?
• And finally, buttons vs. links! I used a link for “Proceed to Payment,” seemed to me it was intended to take the user to a new screen instead of submitting data to the server. Styled to look like a button to match the design. If it was on a full page, and if it generated a pop-up/modal I could perhaps also see an argument for button (type=button)? What do you guys think?

Thanks!

Hey guys!

Back at it with responsive images, this time using the <picture> element. And exploring more of Flexbox's capabilities with the goal of minimizing the number of media queries I needed.

Had a couple of responsive design questions, thoughts/suggestions/feedback is welcome!

• I used percentages for margin between the text elements since the spacing varies but the font sizes don't change in this challenge. row-gap (and gap in general) for Flexbox and Grid are great when the spacing is identical, but I couldn't find a way to implement different gaps without adding a bunch more elements and styling. Using percentages required an additional media query in order to match the design. Does anyone know of a better approach for this?
• I've been using absolute (px) units for border-radius but would be more inclined to use em if I used relative units. Thoughts on em vs. percentage vs. viewport units for border-radius?

Thanks!

Hey guys!

This is my first submit to the site. I used Flexbox for the card and the <img> element with srcset and sizes attributes to make the images responsive. I also used mix-blend-mode to blend the backgrounds.

I had a couple of questions and would appreciate any general feedback/suggestions as well.

• I used the <img> element specifically because I wanted to play with responsive images, but I also feel this image could be considered decorative and could be used as a background image instead. Any thoughts on whether you would consider this image worth an <img> element, or better off as a background image?

• I was also experimenting with CSS clamp() in this build. I've used clamp() for font sizes previously, but also tried it out on width of the card and even a row-gap out of curiosity. Has anyone experimented with functions this way, and have you found a method you prefer for specific situations? Like preferring to use max() for widths, as an example. Would love to hear anyone else's ideas, or suggestions to improve what I’ve done here.

Thanks!