Looking to hire developers?
@petritnuredini
@spilltheteapls
Submitted
daily ~~genshin~~ frontend grind I did not notice you were supposed to practice semantic html until i finished everything :(
other things to improve:
@petritnuredini
Posted
Congratulations on completing your Recipe Page project! Your dedication and hard work are evident. Here are some best practices and improvements to consider:
Semantic HTML:
<header>, <section>, <article>, and <footer> for better structure and readability.<article> for the main recipe and <section> for sub-sections like ingredients and instructions.<figure> and <figcaption> for images with captions.Refactoring CSS:
Handling Images:
srcset and sizes attributes to ensure images look good on all devices.HTML Structure:
Centering and Spacing:
flexbox with justify-content and align-items can be very effective.Accessibility:
alt attributes.<h1> through <h6>) for better accessibility.Responsive Design:
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.
@Alokray007
Submitted
🛸 Hello Front-End Mentor Community! I'm Alok and this is my solution 😊
🛠️ Built with:
HTML 🧾 Tailwind 👾 React 🤖 BEM Notation 🅱️ Mobile first workflow approach 📲 This project was a good challenge in many aspects. Each input needed date validation and I didn't know how to do some of them, so I had to learn them while doing it. Although Javascript has been a bit more challenging on these last few projects.
An excellent challenge to practice many different skills at once! 😊
Thanks to the Front-End Mentor team that create challenges that make us learn a lot from doing them. 💟
If you have any suggestions on how I can improve this project, feel free to leave me a comment!
Feedback welcome 😊
@petritnuredini
Posted
This project needs a lot of fixes.
Overall you should recheck this project, but you are in the right way!
@LucasCatuyama
Submitted
It is my second project of Frontend Mentor. I did almost everything but I was not able to do the hover on image (overlay) if someone could suggest sites, articles, videos and etc to learn it, it will help me a lot.
@petritnuredini
Posted
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:
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.
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.
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.
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.
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.
Color and Contrast: Ensure sufficient color contrast for text elements for better readability and accessibility. Tools like WebAIM's Contrast Checker can be helpful.
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!
@meass
Submitted
your feedback will be a great help to improve my code
@petritnuredini
Posted
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:
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.
Use Semantic HTML: Consider using <button> tags for interactive elements instead of <li> for ratings. This enhances accessibility. Learn more about semantic HTML here.
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.
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.
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.
Responsive Design: Ensure your design is responsive on various devices. Media queries can help adjust layouts for different screen sizes.
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!
@jpetterson88
Submitted
Any advices and feedback are always welcome :)
@petritnuredini
Posted
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:
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.
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.
Semantic HTML: Use more semantic HTML tags like <article>, <section>, and <figure> for improved readability and accessibility. Find out more here.
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.
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.
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.
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.
@tpinheiro4
Submitted
My second solution here, still learning good costumes during code process. I changed some lit of design because i cannot copy exactly the layout.
Thank you soo much to some of you who your precious time helping me with tips.
@petritnuredini
Posted
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:
Semantic HTML: Use more semantic elements like <header>, <footer>, and <section> for better structure and accessibility. Explore more about semantic HTML here.
CSS Best Practices: Try to keep your CSS selectors minimal and avoid deep nesting. This improves readability and maintainability. Learn more here.
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.
JavaScript Input Validation: Your script handles input validation well. Consider also validating the input format (e.g., no negative numbers, reasonable tip percentages).
Accessibility: Make sure all interactive elements are accessible, including keyboard navigation and screen reader compatibility. Find out more about accessibility here.
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.
@sharan-senthilkumar
Submitted
FrontEndMentor - Recipe Page
I have completed my challenge Recipe Page 🥳
Tools that I have used 🧰
I welcome any feedback or suggestions for improving this project. Feel free to leave your comments below.🙏
Happy Frontend Mentoring 👍
@petritnuredini
Posted
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.
@johnnysedh3lllo
Submitted
The Javascript was so much fun to write. Well, mainly the algorithm.
@petritnuredini
Posted
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.
@tatyanepgoncalves
Submitted
Olá, pessoal! 😄👋
Aqui está mais uma solução de desafio feito por mim.
As tecnologias utilizadas foram: 👩💻
Estou aberta a receber dicas e feedbacks. Obrigada!!
@petritnuredini
Posted
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
@don-franklito
Submitted
Hi, this challenge is excellent to practice alignment and responsive design. In addition to looking for a method to adapt the images (mobile, desktop) in the different resolutions. Feedback is welcome!
@petritnuredini
Posted
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!
@danielaebazan
Submitted
Still need to add the hover effects, and touch up some layout details and functionality.
@petritnuredini
Posted
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
@blad232
Submitted
All feedback are wellcome, also I'm new using BEM, is my first time
@petritnuredini
Posted
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
@LEstebanR
Submitted
Feedback is appreciated.
@petritnuredini
Posted
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
@MoBlack00
Submitted
Waiting for your feedback.
@petritnuredini
Posted
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
@hilla10
Submitted
if you have any comment fell free to comment
@petritnuredini
Posted
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!
@hilla10
Submitted
@petritnuredini
Posted
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!
@hilla10
Submitted
@petritnuredini
Posted
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!
@Naveen-KumarJ
Submitted
Feedback Welcome and Thanks in advance😊
@petritnuredini
Posted
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!
@shubhamgupta0720
Submitted
Hi! :) This is my solution for the Social Media Links Design Challenge, which is built using HTML, CSS and this is the first time that I have tried SASS. Any feedback from you is appreciated!
Thanks!
@petritnuredini
Posted
Congratulations on completing your Social Links Profile project! It's a great milestone and your design looks clean and user-friendly. Here are some quick best practices recommendations:
Alt Text for Images: Always include descriptive alt text for images. For the profile photo, use something like alt="Jessica Randall's Profile Picture" to improve accessibility and SEO. Learn more about alt text here.
Consistent Commenting: It's good to see comments in your CSS for clarity. Be consistent with this practice throughout your code for better readability and maintenance. Here's a guide on CSS commenting here.
Semantic HTML Elements: Use semantic elements like <header>, <footer>, and <section> to improve the structure and readability of your HTML. More on semantic HTML here.
Responsive Design: Good implementation of media queries for responsiveness. Consider testing on various devices to ensure uniformity of user experience. Responsive design principles can be found here.
SASS Best Practices: Great use of SASS features like mixins and variables. Ensure to maintain this practice for scalable and maintainable code. More on SASS best practices here.
Button Accessibility: For the buttons, consider adding aria-labels for screen readers, especially since they only contain text content. This enhances accessibility for users with screen readers. Learn about aria-labels here.
Keep up the fantastic work! Each project you complete brings new learning and improvement. Your progress is commendable, and I'm excited to see what you'll create next!
@davidsonaguiar
Submitted
TIPS?
@petritnuredini
Posted
Congratulations on completing your FAQ accordion project! It's a significant achievement, and the functionality and design look great. Here are some best practices recommendations to enhance your project:
Semantic HTML: Consider using more semantic HTML tags. For example, wrapping the FAQs in an <article> or <section> tag can improve readability and SEO. Learn about semantic HTML here.
CSS Variables: Excellent use of CSS variables for colors and font weights! To further improve, you might also consider using variables for spacing (padding/margins) and breakpoints for consistency. More on CSS variables here.
Accessibility: Ensure that the accordion is accessible. This includes keyboard navigation and proper ARIA roles. More about web accessibility can be found here.
Performance: Compress and optimize images to enhance loading times. Explore image optimization here.
Code Organization: Your CSS is well-organized. As your project grows, consider organizing it into multiple files or using a preprocessor like SASS for better maintainability. Learn about SASS here.
Responsive Design: Test your design across different devices to ensure it's fully responsive. You might need to adjust font sizes, images, or element spacing for smaller screens. Responsive design principles can be found here.
Keep pushing your limits and exploring new aspects of web development. Your journey is shaping up impressively, and each project brings you one step closer to mastering frontend development!
Marked as helpful
@Viccyace
Submitted
All feedbacks are welcome.
@petritnuredini
Posted
Congratulations on completing your project! It's fantastic to see your hard work come to fruition. Here are some best practices recommendations:
Code Organization: Great job keeping your HTML and CSS clean! For even better readability, consider adding more comments in your CSS to describe sections or specific styling choices. Learn more about CSS best practices here.
Responsive Design: You've implemented a responsive design for mobile view using media queries, which is excellent. As a suggestion, look into using relative units like em or rem instead of px for better scalability across devices. More on responsive design can be found here.
Accessibility: Ensure that your website is accessible. This includes using semantic HTML and ensuring that the site is navigable and readable by screen readers. More about web accessibility can be explored here.
DRY Principle: In your CSS, .col-btn-1, .col-btn-2, and .col-btn-3 have many similar properties. You could create a common class for shared properties to adhere to the DRY (Don't Repeat Yourself) principle. Learn more about DRY in CSS here.
Performance: Consider optimizing your images and assets for faster loading times. This could involve using modern image formats like WebP. Guidance on this can be found here.
SEO Practices: It's always good to keep SEO in mind. Use descriptive title tags and meta descriptions. Learn more about SEO here.
Keep up the excellent work, and continue to explore and refine your skills. Your journey in web development is full of exciting opportunities and learning experiences!
Marked as helpful
@FazeenIjaz
Submitted
@petritnuredini
Posted
Congratulations on completing your Frontend Mentor project! Here are a few best practices to consider:
Accessibility and Semantic HTML:
<img> tags within .card__image and .card__avatar, add descriptive alt texts. This is crucial for screen reader users and SEO. Here's a resource to learn more about accessible images.Responsive Design:
em or rem instead of px for font sizes, margins, and paddings to enhance scalability and responsiveness. Check out this guide on responsive design.CSS Optimization:
.card__heading can be shortened to transition: all 0.3s;. Also, consider organizing your CSS properties alphabetically within selectors for better readability. Here's a helpful article on CSS organization best practices.Keep up the excellent work! Each project is a step forward in your development journey. Remember, coding is about continuous improvement and learning. Your progress is impressive, and I'm excited to see what you'll create next! 🌟💻👍
Marked as helpful
@FazeenIjaz
Submitted
Any feedback will be accepted
@petritnuredini
Posted
Congratulations on completing your project! Here are a few recommendations to enhance your code:
Semantic HTML Elements:
<header> section, consider using <nav> for navigation links and <section> tags for distinct sections of your content. This makes your HTML more readable and accessible. Learn more about semantic HTML here.CSS Class Naming Conventions:
hero__text-wrapper, btn__ios, and btn__mac suggest a BEM (Block Element Modifier) naming convention but are not consistently applied. Consistency in naming conventions makes your code easier to read and maintain. You can read more about BEM here.Responsive Design Practices:
Keep up the fantastic work! Remember, coding is a journey of continuous learning and improvement. Your dedication to this project is commendable. I can't wait to see what you'll build next! 👏💻🌟
Marked as helpful
@FazeenIjaz
Submitted
@petritnuredini
Posted
Congratulations on completing your project! It's great to see your hard work and dedication. Here are a few suggestions to enhance your project:
Consistent Styling for React Components:
NavBar, DesktopNav, and MobileNav components, you are using both inline styles with sx prop and external CSS. It's recommended to stick to one styling method to maintain consistency and readability. If you prefer MUI's styling solution, consider using it across all components. For more on styling in MUI, check out this guide.Code Duplication and State Management:
DesktopNav and MobileNav, there's some repeated code for handling menu states (handleMenuOpen, closeMenu, etc.). You can create a custom hook or a higher-order component to manage this shared state and logic to make your code DRY (Don't Repeat Yourself). This article on custom hooks might help.Accessibility and Semantic HTML:
<Typography> component should use the component prop to render the correct HTML element, like <Typography variant="h1" component="h1">. Learn more about accessibility here.Keep up the fantastic work! Remember, every project is a step forward in your development journey. Continuous learning and improvement are key to becoming an excellent developer. I'm excited to see what you'll create next! 💻🌟
Marked as helpful