Skip to content
OverviewSolutions
26
Comments
254

Petrit Nuredini

@petritnurediniKosovo2,860 points

Hello there! 👋 I'm Petrit, a Software Engineer with an unquenchable passion for software development! 💻 When I'm not crafting awesome code at work, you'll find me on Frontend Mentor, flexing my HTML, CSS, and JavaScript muscles! 💪🚀 My toolkit includes: HTML 📝, CSS 🎨, JavaScript 🔮 React 🚀

I’m currently learning...

🤩 I'm currently leveling up my skills with NodeJS! 🌱 Exciting times ahead! Let's create wonders together in the world of web development! 🌟✨

Latest solutions

View more solutions

Latest comments

  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing your Recipe Page project! Your dedication and hard work are evident. Here are some best practices and improvements to consider:

    1. Semantic HTML:

      • Use semantic elements such as <header>, <section>, <article>, and <footer> for better structure and readability.
      • For the recipe, consider using <article> for the main recipe and <section> for sub-sections like ingredients and instructions.
      • Utilize <figure> and <figcaption> for images with captions.

    2. Refactoring CSS:

      • Group common styles to reduce repetition. For example, text styling that repeats can be assigned to a common class.
      • Use CSS variables for colors and fonts to make future changes easier. Learn more about CSS variables here.

    3. Handling Images:

      • Use responsive images with srcset and sizes attributes to ensure images look good on all devices.
      • Consider lazy-loading images for better performance.

    4. HTML Structure:

      • Organize your HTML structure logically. Group related elements together and use indentation consistently.
      • Avoid deep nesting where possible to keep the structure clean and readable.

    5. Centering and Spacing:

      • Use Flexbox or CSS Grid for more efficient and responsive layouts.
      • For centering, flexbox with justify-content and align-items can be very effective.

    6. Accessibility:

      • Ensure all images have meaningful alt attributes.
      • Use proper heading levels (<h1> through <h6>) for better accessibility.

    7. Responsive Design:

      • Test your page at various viewport sizes and make necessary adjustments.
      • Use media queries effectively to ensure a good user experience on all devices.

    Keep up the great work and continue to refine your skills. Every project is a step forward in your development journey. Remember, practice and continuous learning are key to improvement. Keep coding and exploring new challenges!

    For further learning and improvement, consider resources like MDN Web Docs and CSS-Tricks.

  • Petrit Nuredini•2,860
    @petritnuredini

    This project needs a lot of fixes.

    • Missed background colour
    • Missed inputs label color
    • Input validation ( you can write text if you want )
    • No components used for React ( you should use more components and not only App.jsx file)
    • This project is not responsive for mobile devices!. (Checked for iPhone 12 Pro and newer)

    Overall you should recheck this project, but you are in the right way!

  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing the NFT Preview Card project! It's fantastic to see your effort and skills being applied. Here are a few best practices tips to further refine your project:

    1. CSS Organization: It's great that you've split your CSS into different files. This keeps your code organized and maintainable. Consider using a preprocessor like SASS for even more efficiency. Learn more about SASS here.

    2. Responsive Design: Good use of media queries for responsiveness. Ensure that your design looks good on all screen sizes, especially for smaller mobile devices and larger desktop screens.

    3. Image Alt Text: Your alt text descriptions are clear and descriptive, which is excellent for accessibility. Keep maintaining this practice. Learn more about alt text here.

    4. HTML5 Semantic Elements: Utilize HTML5 semantic elements such as <article>, <section>, and <footer> to improve the structure and readability of your HTML. This also enhances SEO and accessibility. More info here.

    5. Hover Effects: Nice touch on hover effects for interactive elements. Ensure that these are also accessible to keyboard users. This might involve using :focus alongside :hover for CSS.

    6. Color and Contrast: Ensure sufficient color contrast for text elements for better readability and accessibility. Tools like WebAIM's Contrast Checker can be helpful.

    7. Accessibility Testing: Regularly test your website for accessibility using tools like Lighthouse in Chrome DevTools. This ensures your site is accessible to a broader audience.

    Keep up the great work! Your journey in front-end development is progressing impressively. Looking forward to seeing more of your projects in the future!

  • Petrit Nuredini•2,860
    @petritnuredini

    Great job on completing the Interactive Rating Component project! You've successfully implemented essential web development features and styles. Here are some concise best practices recommendations to enhance your project:

    1. Separate JavaScript from HTML: Refrain from using onclick in HTML. Instead, add event listeners in your JavaScript file. This improves maintainability and separation of concerns. More on this here.

    2. Use Semantic HTML: Consider using <button> tags for interactive elements instead of <li> for ratings. This enhances accessibility. Learn more about semantic HTML here.

    3. CSS Classes for Styling: Instead of changing classes to apply styles in JavaScript, consider toggling a specific class. This approach is cleaner and more maintainable. Check out classList for more information.

    4. Accessibility Considerations: Ensure your site is accessible, especially for keyboard users and screen readers. This includes proper ARIA roles and labels. Learn about accessibility here.

    5. CSS with Tailwind: You're using Tailwind effectively. Continue exploring its utility classes for responsive design and state variants. Tailwind documentation is a great resource here.

    6. Responsive Design: Ensure your design is responsive on various devices. Media queries can help adjust layouts for different screen sizes.

    7. Feedback for User Actions: Implement visual feedback for user interactions like hover and active states on buttons for a better user experience.

    Keep up the fantastic work! Your dedication to learning and applying best practices in web development is commendable. Excited to see your growth and more intricate projects in the future!

  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing the QR Code Component project! Your HTML and CSS implementation reflects a good understanding of web development fundamentals. Here are some short suggestions to further improve your project:

    1. External CSS File: Consider moving your CSS to an external stylesheet. This keeps your HTML file clean and makes the CSS easier to manage. More on this here.

    2. Responsive Design: While your design looks great, ensure it is fully responsive. Media queries can help adjust the layout for different screen sizes. Learn more about responsive design here.

    3. Semantic HTML: Use more semantic HTML tags like <article>, <section>, and <figure> for improved readability and accessibility. Find out more here.

    4. Alt Text for Images: Good job using alt text for images. Ensure it's descriptive enough for users who rely on screen readers. Explore best practices for alt text here.

    5. CSS Variables: Great use of CSS variables for colors. You might consider adding variables for font sizes and spacings for a more scalable and maintainable stylesheet. Check out CSS variables here.

    6. Font Loading: Your usage of Google Fonts is spot on. As an enhancement, you might want to preload key fonts to improve performance. Read about font preloading here.

    7. Cross-Browser Compatibility: Test your webpage across different browsers to ensure compatibility. This ensures a consistent experience for all users.

    Keep up the excellent work! Your journey in frontend development is off to a strong start, and I'm excited to see your continued progress and more complex projects in the future.

  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing the Tip Calculator App project! Your work shows a great understanding of HTML, CSS, and JavaScript. Here are some short suggestions to enhance your project:

    1. Semantic HTML: Use more semantic elements like <header>, <footer>, and <section> for better structure and accessibility. Explore more about semantic HTML here.

    2. CSS Best Practices: Try to keep your CSS selectors minimal and avoid deep nesting. This improves readability and maintainability. Learn more here.

    3. Responsive Design: Ensure the design is responsive on various devices. You might want to use a mobile-first approach and use media queries to adjust the layout for larger screens. Check out this guide on responsive design.

    4. JavaScript Input Validation: Your script handles input validation well. Consider also validating the input format (e.g., no negative numbers, reasonable tip percentages).

    5. Accessibility: Make sure all interactive elements are accessible, including keyboard navigation and screen reader compatibility. Find out more about accessibility here.

    6. Code Organization: Organize your JavaScript and CSS files into meaningful sections and use comments where necessary. This makes your code easier to read and maintain.

    Keep up the fantastic work! The skills you're developing will be invaluable as you continue to tackle more complex projects and challenges in web development.

View more comments