Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
38
Comments
2

pettik

@pettikCzech republic600 points

👋 Hello and welcome to my profile! I'm a beginner in coding and I'm currently in the process of learning of Tailwind CSS. 👨‍💻

I’m currently learning...

Tailwind CSS

Latest solutions

  • pettik--loopstudios-landing-page


    pettik•600
    Submitted 4 months ago

    I would appreciate feedback on mobile responsiveness, especially how the banner heading scales on smaller devices. Additionally, I am unsure if my CSS custom properties ( variables) are structured efficiently—are there better ways to manage them? Finally, I’d love to hear suggestions on optimizing image loading performance, particularly for the background and product images, without compromising quality.:root


    0 comments
  • pettik--notifications-page


    pettik•600
    Submitted 10 months ago

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

    1. Advanced Accessibility Features:

      • Explanation: While I have implemented basic accessibility features, I would appreciate guidance on advanced techniques to ensure the site is fully accessible to all users, including those using screen readers and other assistive technologies.
      • Help Needed: Recommendations on best practices for ARIA roles, labels, and handling focus states effectively.
    2. Performance Optimization:

      • Explanation: Although I have taken steps to optimize performance, I believe there is room for further improvement, particularly in areas such as reducing initial load time and enhancing script execution.
      • Help Needed: Expert advice on advanced optimization techniques, such as code splitting, efficient caching strategies, and using modern JavaScript features to improve performance.
    3. Code Review and Refactoring:

      • Explanation: Ensuring that the codebase remains clean, maintainable, and scalable is essential. I have done my best to keep the code organized, but an external review could highlight areas I might have missed.
      • Help Needed: A thorough code review to identify potential areas for refactoring, optimization opportunities, and suggestions for improving code structure and readability.
    4. Cross-Browser and Device Compatibility:

      • Explanation: While I have tested the site on multiple browsers and devices, there may still be edge cases or specific scenarios that I haven't accounted for.
      • Help Needed: Assistance in conducting comprehensive cross-browser and cross-device testing, identifying compatibility issues, and implementing solutions to ensure a consistent experience across all platforms.
    5. Advanced CSS Techniques:

      • Explanation: I have implemented a responsive design and used CSS variables, but I am keen to learn more about advanced CSS techniques that could enhance the design and functionality of the site.
      • Help Needed: Guidance on using CSS Grid, Flexbox advanced properties, animations, and transitions to create more sophisticated layouts and interactions.
    6. Security Best Practices:

      • Explanation: Ensuring the security of the site is paramount. While I have implemented basic security measures, I would like to ensure that I am following the best practices to protect against common vulnerabilities.
      • Help Needed: Expert advice on web security best practices, including secure handling of user data, preventing XSS and CSRF attacks, and other common security threats.

    0 comments
  • pettik--contact-form


    pettik•600
    Submitted 11 months ago

    I would appreciate help with optimizing the JavaScript code, particularly in improving the efficiency of the form validation process. Specifically, I'm looking for feedback on how to handle multiple conditions and error messages in a more streamlined manner. Additionally, I'd like advice on making the CSS more modular and maintainable, particularly regarding the responsiveness of the design. Suggestions on how to better organize my CSS and possibly use a preprocessor like SASS would be very helpful.


    0 comments
  • FrontendMentor--bookmark-tailwind-css


    pettik•600
    Submitted about 1 year ago

    0 comments
  • FrontendMentor--URL-shortly-tailwind-css


    pettik•600
    Submitted about 1 year ago

    0 comments
  • pettik--social-links-profile


    pettik•600
    Submitted about 1 year ago

    If I have chosen the correct naming of element classes and also whether the styling corresponds to the requirements.


    1 comment
View more solutions

Latest comments

  • arowstev•120
    @arowstev
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    The table.

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

    To color the li list bullect point, I check online for assistance

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

    I find it difficult to space the decimal li list from the paragraph, I will need asisstance

    Recipe-Page-Main

    1
    pettik•600
    @pettik
    Posted about 1 year ago

    I greatly appreciate your effort, and overall, you have everything essential that should be on the page. However, the initial moment that caught my attention was the overall appearance of the website. I recommend trying this challenge again following the instructions in the following Youtube video.

    It’s essential to learn a different approach to creating the overall foundation of a website. Keep learning! 😊💪

  • Augusto C•260
    @weslei573
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Have completed, with ease

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

    the space between the TAPs could be improved

    Blog Preview Card Main

    1
    pettik•600
    @pettik
    Posted about 1 year ago

    Your HTML and CSS code is well-structured and clean, which is great! Here's some feedback:

    Positive Points:

    1. Semantic HTML: You've used semantic HTML tags like <header>, <section>, and <article>, which helps with accessibility and SEO.
    2. CSS Variables: You've used CSS variables for colors, which makes it easier to maintain and change the color scheme if needed.
    3. Responsive Design: You've used media queries to make your design responsive, which is a crucial aspect of modern web design.
    4. Forked CSS files: for styles, media and fonts - great idea!

    Areas for Improvement:

    1. Alt Text: The alt attribute for the image could be more descriptive. Instead of "Avatar de Imagem", consider something like "Profile picture of Greg Hooper". This would be more helpful for screen readers.
    2. Font Loading: You've loaded multiple fonts using @font-face. Consider using a service like Google Fonts, which can make font loading more efficient and easier to manage.
    3. CSS Organization: While your CSS is fairly well-organized, you could improve it by grouping related styles together or commenting sections of your CSS for better readability.
    4. Missing description in Github Readme.md file

    Overall, great job!👍 Keep practicing to continue improving your skills. 🚀

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub