Eli Silk
@elisilkAll solutions
- Submitted 11 days ago
BMI calculator with CSS custom properties and CSS grid layout
- HTML
- CSS
- JS
Comparing the design to my solution, the background gradient color in the top hero section is definitely off. The design has much more of the lighter blue and mine solution has much more of the darker blue. I attempted to my gradient parameters directly out of the settings from the Figma file, but given how off it is, I clearly didn't do that correctly. I also tried using the Figma Solid and Gradient to CSS plugin to translate the gradient in the Figma design directly into CSS, but that didn't give me great results either. I'd appreciate hearing how others figured out the best gradient for this design, and more generally about a better process for translating Figma design gradients into CSS. Thanks in advance.
- Submitted about 1 month ago
FAQ accordion - CSS only, semantic HTML, and keyboard accessibility
- HTML
- CSS
- JS
I am a little confused about why I'm getting some HTML validator errors by using the
nameattribute in thedetailselements. Can anyone help me figure out what I did wrong? Seems to me like I am using thenameattribute in the appropriate way. But maybe I am missing something? š¤ - Submitted about 2 months ago
Frontend quiz app with fluid typography & spacing + light/dark theme
- HTML
- CSS
- JS
- Submitted about 2 months ago
Tip calculator app using client-side validation
- HTML
- CSS
- JS
I would love to figure out better ways to structure the JavaScript code so that I was relying more on pure functions and objects than I currently am (see Learning Path reference). Feels like I lot of my code was slapped together to get it to work, rather than thinking about what the best way is (or at least a more elegant, efficient way). Any ideas? š¤
- Submitted about 2 months ago
Time tracking dashboard with JavaScript to input & switch between data
- HTML
- CSS
- JS
I'm not sure about my JavaScript approach. I chose to display all of the data, but then hide the elements that were not selected at the time. And then when selected, the JavaScript will show those selected data and hide the others. Would love to know if others have a better approach for doing this kind of thing.
- Submitted about 2 months ago
Newsletter email sign-up form using client-side JavaScript validation
- HTML
- CSS
- JS
I am definitely uncertain about how I am handling the move to the success screen and the move back. I think I have a working solution that involves showing and hiding the success screen (without a page reload), but have no clue if my approach aligns with best practices. Would love to know about other effective approaches, or to learn about disadvantages to my approach.
- Submitted 2 months ago
Article preview component with responsive design + javascript tooltip
- HTML
- CSS
- JS
I'm not sure that my solution for the positioning of the share panel is the best option, and I'd appreciate learning about other approaches.
- Submitted 3 months ago
Testimonials grid section using CSS grid and BEM
- HTML
- CSS
Suggestions about how to think about and refine the spacing between elements (e.g., grid and flexbox gaps, paddings and margins that seem specific to a particular element) so that they match the design but are still consistent within a design system, would be appreciated.
- Submitted 4 months ago
Responsive blog preview card utilizing fluid typography
- HTML
- CSS
I feel like my text sizes, letter spacing, and line heights never quite match the solution. Not sure what the issue is there. I had access to the Figma file for this challenge, and so tried to design based around the given units in that design file rather than the jpg screenshots. So not really sure the best way to think about approaching that. Or maybe I made a mistake in reading the Figma file or in implementing the typography in some way.
- Submitted 9 months ago
Solution with flexbox and grid layout and CSS custom properties
- HTML
- CSS
If anyone knows how to get the top borders of each of the cards to have a straight edge rather than curved that would be helpful.
