daily ~~genshin~~ frontend grind I did not notice you were supposed to practice semantic html until i finished everything :(
other things to improve:
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.
🛸 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 😊
This project needs a lot of fixes.
Overall you should recheck this project, but you are in the right way!
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.
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!
your feedback will be a great help to improve my code
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!
Any advices and feedback are always welcome :)
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.
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.
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.
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 👍
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.
The Javascript was so much fun to write. Well, mainly the algorithm.
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.
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!!
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!
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!
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!
Still need to add the hover effects, and touch up some layout details and functionality.
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!
All feedback are wellcome, also I'm new using BEM, is my first time
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!
