Skip to content
OverviewSolutions
20
Comments
20
khalagai
@khalagai

All comments

  • Kamran Kiani•1,280
    @kaamiikSubmitted 6 days ago
    What are you most proud of, and what would you do differently next time?

    Proud of:

    • Successfully integrating Tailwind CSS for the first time while maintaining a balanced approach between utility classes and custom CSS
    • Creating a comprehensive landing page that covers various CSS techniques
    • Building responsive layouts that work across different devices
    • Achieving a minimal and clean design aesthetic

    Do differently next time:

    • Plan a better strategy for Tailwind configuration upfront
    • Create a more structured approach to deciding when to use utility classes vs. custom CSS classes
    • Establish a more consistent pattern for managing styles across components
    • Set up a design system using Tailwind's theme customization earlier in the project
    What challenges did you encounter, and how did you overcome them?

    Main challenges:

    1. Tailwind Integration:
    • Challenge: Balancing between utility classes and custom CSS
    • Solution: Used Tailwind as a complementary tool rather than forcing everything into utility classes
    1. Technical Implementation:
    • Challenge: Creating a responsive tabbed interface
    • Solution: Implemented custom CSS Grid and flexbox layouts combined with Tailwind utilities
    1. Responsive Backgrounds:
    • Challenge: Making background images responsive while maintaining design integrity
    • Solution: Utilized responsive design patterns and careful consideration of breakpoints
    What specific areas of your project would you like help with?
    1. CSS Best Practices:
    • Optimization of current CSS structure
    • Better ways to handle responsive backgrounds
    • More efficient approaches to component styling
    1. Accessibility Improvements:
    • ARIA attributes implementation
    • Semantic HTML structure
    • Keyboard navigation
    • Screen reader compatibility
    1. Code Organization:
    • Better separation of concerns between Tailwind and custom CSS
    • More efficient configuration setup
    • Component structure optimization

    Bookmark Landing Page using Tailwind, Astro and Sass

    1
    khalagai•390
    @khalagaiPosted 5 days ago

    First time I am coming across Astro. Your solution is great. I will clone this and study it.

    1
  • Mateus Lima•360
    @mts-mlSubmitted about 2 months ago
    What specific areas of your project would you like help with?

    I tried to make it responsive for various screen sizes, but I still can't cover them all. I'd like to know the community's approach to covering different screen sizes. Should I start using width: 100% on images to always cover the entire screen? It distorts the image, but still... Anyway, if anyone knows of any articles or good videos, I'd love to check them out.

    Room homepage

    1
    khalagai•390
    @khalagaiPosted about 2 months ago

    Hey. I have the same issue with responsive screens. When you get a good article please hook a brother out. The final product is still pretty good.

    0
  • Konrad•370
    @konradbaczykSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of implemented animations in this project.

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

    Animations with opacity of the elements change their stacking context. My navigation bar were displayed at the background despite it has huge z-index - z-indexes didn't works as i would expect. To overcome this problem I had to understand how to isolate every element so as not influence others.

    Loopstudios landing page with animations

    1
    khalagai•390
    @khalagaiPosted about 2 months ago

    I love your creativity and the animations you have used. Beautiful website.

    0
  • khalagai•390
    @khalagaiPosted 2 months ago

    I love the use of @use and @forward in your code. I will save this for my practise.

    1
  • khalagai•390
    @khalagaiPosted 4 months ago

    Great work. The code is easy to follow and the design is almost perfect. I especially like what you did with the success message. I will borrow that for my next project.

    Marked as helpful
    1
  • khalagai•390
    @khalagaiPosted 4 months ago

    Your code is so simple, effective, and easy to understand. Part of the challenge was enabling key presses. I will follow up with your profile to see how you tackle it.

    Marked as helpful
    1
  • khalagai•390
    @khalagaiPosted 4 months ago

    You got the design almost perfect. Great work.

    0
  • khalagai•390
    @khalagaiPosted 4 months ago

    You went all out on this, I like the logic code.

    Marked as helpful
    1
  • khalagai•390
    @khalagaiPosted 4 months ago

    Perfect design and the Javascript code is easy to follow.

    1
  • Juan•480
    @JEWebDevSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I think i got the design near pixel perfect, it looks really nice

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

    It was my first time using forms, i still have a lot of questions. I was considering to just check if the user uses an @ in the input. But then i decided to use regex instead.

    I didn't knew how to show the success message and considered to put it in a separate html file. But in that case it will be difficult to share data between them, so i just hid the form and message as needed.

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

    I want to know if the way i did it is correct or there is another optimal way of doing it. in terms of handling the form submit and all that. It will be greatly appreciated.

    newsletter signup with success message HTML CSS and JS

    1
    khalagai•390
    @khalagaiPosted 4 months ago

    Pixel perfect solution. I also went with the 'hide" solution on my challenge. I like how you handled the error states, I will borrow some code here.

    0
  • khalagai•390
    @khalagaiPosted 4 months ago

    I like the hover effect on the share button.

    0
  • ali eldien•150
    @Ali-eldienSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    finally using grid as it should be!

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

    I only had problems with the responsivity of paragraphs. I solved it by using viewport measurement unit.

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

    fortunately , nothing

    testimonials grid section

    1
    khalagai•390
    @khalagaiPosted 5 months ago

    I had the same challenge with the paragraphs. Your code works perfectly.

    0