What are you most proud of, and what would you do differently next time?
I am most proud of the clean and semantic architecture. Next time I would like to be more a11y-centric in my HTML markup.
What challenges did you encounter, and how did you overcome them?
The biggest challenge was getting the little micro-adjustments dialed in to get the screenshots to match up. And they still don't. I found that rather frustrating as my design follows the figma file 100% to the pixel.
What specific areas of your project would you like help with?
Sass/CSS experts welcome to critique my frontend architecture. Note that a lot of my design choices revolved around getting the screenshots to match up exactly.
What are you most proud of, and what would you do differently next time?
I'm proud of my Sass architecture and the responsive grid. But I spent a lot of time nudging around the corners of an SVG for the rounded rectangle background and nitpicking over every last pixel and I still couldn't get it spot-on.
What challenges did you encounter, and how did you overcome them?
The rounded section background was trickier than it looked. I'm not quite happy with my solution and eager to see how others solved it.
Also getting Parcel set up to work with Github Pages was a learning experience.
What specific areas of your project would you like help with?
I would like to see some different approaches to the background.
Learning the Web Components API, which I had never touched before
Writing a decent README!
Writing the template HTML and styling in JavaScript as an innerHTML string seems a bit counterintuitive (and breaks Intellisense). However, using a <template> directly in the page's HTML makes it so the Web Component isn't portable between pages or projects. Is there a better way to make Web Components portable, or is this the standard practice?
I cannot use <slot> elements directly in my HTML for some reason, even though as far as I can tell my browser supports it. The following HTML would not display the description text at all:
<qr-card url="https://www.frontendmentor.io/">
<slot name="heading">Improve your front-end skills by building projects</slot>
<slot name="caption">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</slot>
</qr-card>
slot has be set as an attribute on other HTML elements. But this breaks the encapsulation of component styling. Since those elements are part of the outside DOM, whatever styles from the external CSS will be applied to those elements! For example the following <qr-card> is not used 'correctly,' since these aren't the elements the component is expecting.
<qr-card url="https://www.frontendmentor.io/">
<h1 slot="heading">Improve your front-end skills by building projects</h1>
<h1 slot="caption">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</h1>
</qr-card>
Would it be better to use custom attributes to strictly enforce styling, or am I doing something wrong?
Thanks in advance for any feedback, looking forward to being part of the community!
