Skip to content
OverviewSolutions
8
Comments
16

sttilstra

@sttilstra130 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Article Preview

    sttilstra•130
    Submitted 24 days ago

    Two things:

    1. I attempted to use jquery and the toggle() method to show/hide the share container but it messed up the formatting/alignment bad. Could not figure it out so used normal JS instead. Is there a way to get around that?

    2. Help with the icon background when clicked, I could not get that looking right.

    Thank you!

    1 comment

  • Testimonials Section

    sttilstra•130
    Submitted about 1 month ago

    Asking for help with the quotation mark image in the purple container. I could not get that looking right and excluded it on purpose. Any input on that would be appreciated.

    1 comment

  • Four Card Feature Section

    sttilstra•130
    Submitted about 1 month ago

    I am starting to see the need for and reasoning behind having more than one mobile design with media queries. Any tips on multiple breakpoints and making the page more responsive to different dimensions would be appreciated.

    2 comments

  • Product Preview Card

    sttilstra•130
    Submitted about 1 month ago

    Asking for help on the mobile design part - specifically I could not figure out how to get the normal greyed out price in line with the sale price. Minor detail, but would like to know what to change in order to get those two items level.

    1 comment

  • Recipe Page

    sttilstra•130
    Submitted about 1 month ago

    Just wondering if there are other ways to accomplish this. I was able to get it to work this way. Unsure if there are different or possibly easier ways to do it.

    1 comment

  • Social Links Profile

    sttilstra•130
    Submitted about 1 month ago

    Tips or tricks for working with links and buttons. I initially tried using buttons with "A" tags embedded between them, but that seemed overly complicated and didn't work out quite the way I wanted to. That did lead me to figuring out the links for my solution, but any helpful tips on that would be appreciated.

    1 comment
View more solutions

Latest comments

  • Leyanis Díaz•220
    @LeyaDiaz
    What are you most proud of, and what would you do differently next time?

    I'm most proud of how I managed to implement a fully responsive layout that adapts smoothly between mobile and desktop views using a mobile-first approach. I also feel good about how clean and organized my CSS turned out, which made it easier to adjust styles as I iterated.

    If I were to do this project again, I would focus more on accessibility from the start, such as ensuring the share button is fully keyboard-accessible and adding proper ARIA labels for screen readers. Additionally, I would consider using CSS Grid for the desktop layout to experiment with different layout techniques.

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

    One of the main challenges was toggling the visibility of the share bar in a way that worked well on both mobile and desktop. At first, my JavaScript logic was too simple and didn't account for different screen sizes, which caused some unexpected behavior. I overcame this by refactoring my code to use class toggling and by testing the component thoroughly at various breakpoints.

    Another challenge was aligning the share icon and ensuring it looked consistent in both the info section and the share bar. I solved this by unifying the HTML structure for both icons and using flexbox for alignment, as well as adjusting the SVG sizing with CSS.

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

    I would appreciate feedback on the following areas:

    Accessibility: Are there improvements I can make to ensure the share functionality is accessible to all users, especially those using screen readers or navigating via keyboard?

    JavaScript logic: Is there a more efficient or cleaner way to handle the toggling of the share bar between mobile and desktop?

    CSS organization: Are there best practices I could follow to make my CSS even more maintainable as the project grows?

    Any suggestions or code reviews in these areas would be really helpful

    article-preview-component-master using Javascript

    1
    sttilstra•130
    @sttilstra

    This looks pretty good and the layout changes for mobile well. In regards to your JavaScript logic, you asked about a different way to do it. I basically followed this page from w3 schools and put an onclick property on the icon and use the javascript function which is a bit shorter than what you have in your main.js

    It would like this this: In your image tag add: onclick="myFunction()"

    Your JS would look like:

    function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

    A bit shorter and it worked for me.

    Here is a link to the article: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

    Marked as helpful
  • P
    Aero Flamiano•220
    @aflamiano-career
    What are you most proud of, and what would you do differently next time?

    I was able to align the callout bubble to the share button.

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

    I tried to solve the callout bubble alignment by just putting it in one location but that proved to be too difficult. What I did was to put two instances of the share component on different parent divs.

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

    I have 3 areas I which I think need improvement or clarification:

    1. Rounding of the corners of the article along with the image. If I put an overflow-hidden on the parent element, when the share button is clicked on tablet/desktop, the pop-up will also be hidden. My workaround is to reapply the border radius for the children that need it.
    2. Creating the tail of the callout bubble. <div className="w-0 h-0 border-x-10 border-x-transparent border-t-10 border-t-grey900 mx-auto"></div> In my search, this is the cleanest tailwind way I found. However, I don't fully understand it. Can anyone enlighten me?
    3. Having two instances of the Share component. I found it almost impossible to make the share feature be part of the document flow on mobile while also putting it inside the flex item for the share button to capture its center when in tablet/desktop.

    Article Preview: ReactJS + TailwindCSS

    #react#tailwind-css
    1
    sttilstra•130
    @sttilstra

    This looks really good and the responsive layout is great. I see that you used Tailwind. What are some aspects about that framework you like over something like Bootstrap?

  • sttilstra•130
    @sttilstra

    This looks really good! The only thing I noticed that seemed off was the sizes of the testimonial sections in the mobile view. They are much different and not evenly sized. You may want to consider making them a little more uniform. Thank you for sharing your solution!

  • sttilstra•130
    @sttilstra

    You certainly hit the main points on this, great job! I would perhaps consider making the individual sections a little less wide, they seem a bit stretched out. Thank you for sharing your solution!

  • Gregor de Cillia•190
    @GregorDeCillia
    What are you most proud of, and what would you do differently next time?

    Applying grid becomes easier an easier. Proud of the quick progress I made on that end.

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

    I wasn't able to get the shadows the way I wanted. Too much spread or blur makes them overlap with other cards. I tried z-index and ::before, but couldn't make it work. I ended up reducing the blur/spread.

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

    I tried to match the design pretty closely with the font-sizes/paddings/margins which made the css quite messy. If anyone could give me some better insight in how important that is versus just playing around and focus on the (more abstract) theme of the challenge, that would be very helpful.

    Responsive Grid Layout: Testomonials

    1
    sttilstra•130
    @sttilstra

    This looks great. I wasn't able to get the quotation mark looking right in my solution. Do you have any tips for that?

  • Seyed Ahmad•80
    @seyedahmaddv
    What are you most proud of, and what would you do differently next time?

    Proudest Achievements:

    Responsive Design: Created a fully responsive layout that works seamlessly across mobile, tablet, and desktop devices.

    Subtle Animations: Implemented smooth fadeInUp animations and interactive hover effects to enhance user experience.

    Typography & Color Scheme: Carefully selected Google Fonts (Poppins) and a cohesive color palette using CSS variables.

    Interactive Optimizations: Added JavaScript features like Intersection Observer for lazy-loading animations and a parallax scroll effect.

    What to Improve Next Time:

    Modern CSS Techniques: Use CSS Grid more efficiently and adopt CSS Subgrid for complex layouts.

    Dark Mode Support: Implement a toggle for dark/light themes using prefers-color-scheme.

    Performance Tweaks: Replace the parallax scroll JavaScript with CSS transforms or GSAP for smoother animations.

    Framework Adoption: Experiment with utility-first frameworks like Tailwind CSS to speed up development.

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

    Key Challenges & Solutions:

    Challenge: Desktop Card Positioning

    Solution: Used grid-template-rows/columns with precise placement (e.g., grid-row: 2 / 4 for vertical alignment).

    Challenge: Animation Timing Conflicts

    Solution: Staggered animation-delay values (e.g., 0.1s, 0.2s) to avoid overlapping animations.

    Challenge: Parallax Scroll Performance

    Issue: Parallax interfered with other animations.

    Fix: Limited translateY values and combined with animation-fill-mode: forwards.

    Challenge: Mobile Optimization

    Solution: Adjusted padding and font-size in @media (max-width: 375px) for smaller screens.

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

    Areas for Improvement:

    Accessibility:

    Add aria-labels for icons and improve color contrast ratios for better screen-reader support.

    SEO Optimization:

    Include meta tags and JSON-LD structured data for richer search engine snippets.

    Automated Testing:

    Integrate Jest or Cypress to test JavaScript interactions (e.g., card clicks).

    Legacy Browser Support:

    Add polyfills for Intersection Observer (e.g., for IE11).

    Performance:

    Optimize font loading with preload or font-display: swap.

    Call for Collaboration: If you have expertise in advanced CSS animations (e.g., GSAP) or performance optimization, your insights would be invaluable! Suggestions for refactoring the JavaScript (e.g., using requestAnimationFrame) are also welcome.

    Four card feature section

    1
    sttilstra•130
    @sttilstra

    This is great work. Love the animation on page load. Only areas I see that could be addressed - and this is knit picking - are fonts are a bit heavy/darker on the first header and the short paragraph compared to the design. The text at the top of the mobile design is a bit jumbled/squished together also. You may want to consider spacing it out a bit and making the text of the two main headers all on one line instead of having them break out over two lines each. Overall, fantastic stuff though. Thank you for sharing your solution!

View more comments