Skip to content
OverviewSolutions
26
Comments
253
Petrit Nuredini
@petritnuredini

All 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.

  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing your Recipe Page project! You've done a great job incorporating various elements into the page. Here are some short tips to enhance your project further:

    • Semantic HTML: Utilize more semantic HTML elements such as <section>, <article>, and <header> for better structure and accessibility. Learn more about semantic HTML here.

    • CSS Best Practices: Avoid using IDs for styling (#main-heading, #sub-heading, etc.). Instead, use class names for CSS. This promotes reusability and maintainability. More on CSS best practices can be found here.

    • Responsive Design: Ensure that your design is responsive on all devices. Use media queries to adjust layouts, font sizes, and images for different screen sizes. More on responsive design here.

    • Font Loading: Be mindful of the number of font weights and styles you import, as they can affect page load times. Consider importing only the styles you need. More on font optimization here.

    • Accessibility: Improve accessibility by ensuring that all interactive elements are keyboard accessible and that your site is screen reader friendly. More about web accessibility can be found here.

    • Code Organization: Organize your CSS by grouping related styles together and commenting sections for readability. This makes your code easier to read and maintain.

    Fantastic work on this project! Keep up the great effort, and continue exploring new techniques and tools to elevate your web development skills even further.

  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing the Age Calculator App project! Your project shows a great combination of HTML, CSS, and JavaScript skills. Here are some best practices to consider for further improvement:

    • Semantic HTML: Good job on using semantic tags like <article> and <form>. Ensure to use semantic elements wherever possible for better accessibility and SEO. More on semantic HTML can be found here.

    • CSS Best Practices: Your CSS is well-structured. Consider using a consistent naming convention like BEM for CSS classes to improve readability and maintainability. Learn about BEM here.

    • JavaScript Validation: It's great that you've implemented custom validation. Enhance this by providing real-time feedback as the user types, rather than on form submission only. More on form validation here.

    • Responsive Design: Ensure that the app is fully responsive on various devices. Test across different screen sizes and make necessary adjustments using media queries. More on responsive design here.

    • Accessibility: Focus on making your website accessible. This includes proper use of ARIA roles and ensuring that all interactive elements are keyboard accessible. More about web accessibility can be found here.

    • Performance Optimization: Optimize your application for performance, especially if you plan to scale it up. This includes optimizing images, minifying CSS and JavaScript files, and reducing HTTP requests. More on web performance here.

    Great work on this project! Your dedication to learning and applying web development concepts is commendable. Keep exploring and experimenting with new ideas and technologies to further enhance your skills.

  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing the FAQ Accordion project! Your implementation showcases good HTML structure, CSS styling, and JavaScript functionality. Here are some best practices to enhance your project further:

    • Semantic HTML: Great use of semantic elements like <main>, <section>, and <picture>. Consider using <details> and <summary> tags for a more semantic accordion structure. Learn about semantic HTML here.

    • CSS Best Practices: Your CSS is well-organized. As your projects grow, consider adopting a naming convention like BEM for better readability and maintainability. Learn about BEM here.

    • Responsive Design: Ensure that the design is fully responsive and looks good on all devices. Use media queries to adjust layout and font sizes for different screen sizes. More on responsive design here.

    • Accessibility: Focus on making your website accessible, including keyboard navigation and proper ARIA roles for interactive elements. More about web accessibility can be explored here.

    • JavaScript Best Practices: Keep your JavaScript code clean and well-commented. Avoid using the same id for multiple elements as id should be unique. Consider using class instead. More on JavaScript best practices here.

    • Performance Optimization: Optimize images for faster loading times and better performance. More on image optimization here.

    Keep up the great work! Your dedication to crafting well-structured and interactive web pages is commendable. Continue exploring and experimenting with new techniques and technologies in your web development journey!

    Marked as helpful
  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing the Product Preview Card project! Your page showcases an excellent grasp of HTML and CSS, creating an attractive and functional design. Here are some best practices to consider:

    • Semantic HTML: Good use of semantic elements like <main> and <section>. Further improve your markup by using <figure> for the image and <figcaption> for its description. Learn about semantic HTML here.

    • Responsive Design: You've implemented responsive design using media queries effectively. Test across various devices to ensure a consistent experience. More on responsive design here.

    • Accessibility: Focus on making your website accessible, including meaningful alternative text for images and proper ARIA roles. More about web accessibility can be explored here.

    • CSS Best Practices: Your CSS is well-organized. Consider using BEM (Block Element Modifier) methodology for naming CSS classes to improve readability and maintainability. Learn about BEM here.

    • Performance Optimization: Optimize images for faster loading times and better performance. More on image optimization here.

    • Font Loading: Be cautious about loading multiple font weights as it can impact performance. Load only the weights you need. More on font optimization here.

    Keep up the great work! Your dedication to crafting well-structured and styled web pages is commendable. Continue exploring and experimenting with new techniques and technologies in your web development journey!

  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing your E-commerce Product Page project! Your work demonstrates good HTML structure and CSS styling. Here are some recommendations to enhance your project further:

    • Semantic HTML: Use semantic HTML elements to improve accessibility and SEO. Elements like <section>, <article>, and <aside> could be more meaningful than <div> in certain contexts. Learn about semantic HTML here.

    • Responsive Design: Ensure that the design is fully responsive and looks good on all devices. Use media queries to adjust layout and font sizes for different screen sizes. More on responsive design here.

    • Accessibility: Focus on making your website accessible, including keyboard navigation and proper ARIA roles for interactive elements. More about web accessibility can be explored here.

    • CSS Best Practices: Consider using BEM (Block Element Modifier) methodology for naming CSS classes to improve readability and maintainability. Learn about BEM here.

    • Performance Optimization: Optimize images for faster loading times and better performance. More on image optimization here.

    • JavaScript Best Practices: Keep your JavaScript code clean and well-commented. Consider modularizing your JS code for better maintainability and readability. More on JavaScript best practices here.

    Keep up the great work! Your dedication to creating a well-structured and styled e-commerce page is commendable. Continue exploring and experimenting with new techniques and technologies in your web development journey!

    Marked as helpful
  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing your Recipe Page project! Your page is well-structured and visually appealing. Here are a few best practices to enhance your project:

    • Semantic HTML: Use more semantic elements such as <article>, <section>, and <figure> to improve the structure and accessibility of your page. Learn about semantic HTML here.

    • CSS Class Naming: Your CSS classes are descriptive, which is great. To improve, consider adopting a naming convention like BEM for better readability and maintainability. More on BEM here.

    • Responsive Design: Ensure your design is fully responsive. Test on various devices and screen sizes to maintain a consistent user experience. More on responsive design here.

    • Accessibility: Focus on making your website accessible. This includes proper use of ARIA roles and ensuring the site is navigable and readable by screen readers. More about web accessibility can be explored here.

    • Image Optimization: Optimize images for faster load times and better performance. More on image optimization here.

    • CSS Variables: Good use of CSS variables for theming. As your project grows, this practice will make it easier to maintain and scale your styling. More on CSS variables here.

    Keep up the great work! Your dedication to creating well-structured and styled web pages is commendable. Looking forward to seeing more of your projects in the future!

    Marked as helpful
  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing your React project! It's great to see you successfully implementing a card component with dynamic data. Here are some best practices to enhance your project:

    • React Component Naming: Your component naming is clear and intuitive. Ensure to maintain this practice as your application grows. More on best practices in React here.

    • Prop Types & TypeScript: Good use of TypeScript for type-checking your props. This is a great practice for catching errors and writing more robust code. Learn more about TypeScript with React here.

    • Reusable Components: Consider making your card component more reusable by allowing different content to be passed in. This can be achieved by using children props or render props. More on reusable components here.

    • Accessibility: Ensure that your application is accessible. This includes proper use of ARIA roles and ensuring keyboard navigability. More about accessibility in React here.

    • Styling and Responsiveness: Your styling approach using Tailwind CSS is efficient. Ensure your application is responsive and looks good on all screen sizes. More on responsive design here.

    • Performance Optimization: Consider optimizing your React application for performance, especially if it grows in size and complexity. More on optimization here.

    Keep pushing forward and exploring more complex components and state management in React. Your progress is impressive, and I can't wait to see what you build next!

    Marked as helpful
  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing the Stats Preview Card Component project! Your implementation showcases a strong understanding of HTML and CSS, creating an attractive and responsive design. Here are some best practices to consider:

    • Semantic HTML: Great job structuring your HTML. Consider using more semantic elements like <article>, <aside>, or <footer> for better readability and SEO. Learn about semantic HTML here.

    • CSS Custom Properties: You've effectively used CSS custom properties (variables). This is a good practice for maintainability and reusability. More on CSS variables here.

    • Responsive Images: Nicely done with the <picture> element for responsive images. Ensure all images are optimized for performance. Learn about image optimization here.

    • Font Loading: Be cautious about loading multiple font weights as it can impact performance. Load only the weights you need. More on font optimization here.

    • Accessibility: Ensure that your site is accessible, including keyboard navigation and screen reader compatibility. Explore more about web accessibility here.

    • Media Queries: Great use of media queries for responsive design. Test across various devices to ensure a consistent experience. More on media queries here.

    Keep up the excellent work! Your dedication to learning and applying best practices is evident. I look forward to seeing more of your projects in the future!

    Marked as helpful
  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing your Sunnyside agency landing page project! Your page looks visually appealing and the layout is well-structured. Here are a few best practices to make your project even better:

    • Use of Semantic HTML: Utilize semantic HTML tags to improve the structure and accessibility of your webpage. Tags like <nav>, <section>, and <footer> can be more meaningful than <div> in certain contexts. Learn more about semantic HTML here.

    • Responsive Images: You've used the <picture> element effectively. Ensure that your images are optimized for different screen sizes for better performance and load times. More on responsive images can be found here.

    • JavaScript Best Practices: In your JavaScript, consider using const or let instead of var for variable declarations for better scope control. More on JavaScript best practices here.

    • Accessibility: Make sure your website is accessible, especially for keyboard navigation and screen readers. More about web accessibility can be explored here.

    • CSS Optimization: Your CSS is well-organized. As your project grows, consider adopting a methodology like BEM for consistency and scalability. Learn about BEM here.

    • Performance: Check your website’s performance using tools like Google's Lighthouse, and optimize based on the suggestions. More on web performance here.

    Keep up the great work! Your dedication and attention to detail are evident in your project. Continue exploring and experimenting with new techniques and technologies in your web development journey!

  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing the Stats Preview Card Component project! Your implementation demonstrates a solid grasp of HTML and CSS, creating an aesthetically pleasing and functional layout. Here are a few best practices to consider for future projects:

    • Responsive Design: Great use of media queries for responsive design. Ensure thorough testing on various devices to maintain a consistent user experience. More on responsive design can be found here.

    • Semantic HTML: Use semantic HTML elements for better readability and SEO. Elements like <section> and <article> could be used to enhance the structure of your content. Learn about semantic HTML here.

    • CSS Optimization: Your CSS is well-structured, but consider using shorthand properties where possible to reduce redundancy. More on CSS optimization here.

    • Accessibility: Ensure text contrast meets accessibility standards, especially with light text on dark backgrounds. Check out web accessibility guidelines here.

    • Performance: Optimize image loading for different screen sizes using responsive images techniques. This can significantly improve your site's performance. More on responsive images here.

    • Alt Text for Images: Make sure all images have descriptive alt text for improved accessibility and SEO. More on alt text here.

    Keep up the great work! Your progress is commendable, and each project takes you one step closer to mastering front-end development. Excited to see your next creation!

  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing your 3-column preview card component project! Your implementation of the design is impressive. Here are some best practices to consider for further enhancement:

    • Alt Text for Images: Great job adding alt text to your images! Ensure that it is descriptive for better accessibility. More on alt text here.

    • Responsive Design: Your media query for larger screens is a good start. Consider adding more breakpoints for different screen sizes for a fully responsive design. Learn more about responsive design here.

    • Font Loading: Loading multiple font weights can impact performance. Consider loading only the weights you use to improve page load times. Check out font optimization here.

    • Semantic HTML: Use more semantic HTML tags (like <section>, <article>, <footer>) for better structure and SEO. More about semantic HTML here.

    • CSS Organization: Your CSS is well-organized. As your styles grow, consider using a methodology like BEM for consistency and maintainability. Learn about CSS methodologies here.

    • Accessibility: Focus on keyboard accessibility, ensuring that all interactive elements are accessible via keyboard. More on web accessibility here.

    Keep up the great work! Each project you complete is a step forward in your web development journey. You're doing an excellent job, and I'm excited to see your next creation!

  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing your Blog Preview Card project! It's a fantastic achievement to have brought your design to life. Here are some best practices to enhance your project further:

    • Responsive Design: Ensure your design is responsive across different devices. Consider using media queries to adapt the layout for different screen sizes. More on responsive design can be found here.

    • Semantic HTML: Use more semantic HTML elements to improve the structure and accessibility of your page. For instance, the blog content can be wrapped in an <article> tag. Learn about semantic HTML here.

    • CSS Efficiency: In your CSS, you can group selectors that share the same style properties to keep your code DRY (Don't Repeat Yourself). This practice enhances code readability and maintainability. More on CSS efficiency here.

    • Accessibility: Add descriptive alt text to your images to improve accessibility for screen reader users. More about web accessibility can be explored here.

    • Font Loading: Consider the impact of loading multiple font weights on performance. Loading only the required font weights can improve your page's load time. More on font optimization here.

    • Hover Effects: Great job with hover effects! Ensure that these effects also translate well on touch devices where hover isn't available. More on hover effects and touchscreens here.

    Keep up the great work, and continue pushing your boundaries in web development. Each project is a step forward in your journey, and you're doing wonderfully!