{
"id": 2592335,
"title": "Im new to Frontend, any suggestions for this project?",
"url": "https://urgent.news/2026/08/22/im-new-to-frontend-any-suggestions-for-this-project",
"topic": "tech",
"section": "Tech",
"published": "2026-08-22T14:00:11.000Z",
"source": {
"name": "Dev.to",
"slug": "dev-to",
"url": "https://dev.to/tailsiscoding/im-new-to-frontend-any-suggestions-for-this-project-3o03"
},
"original_language": "en",
"account": "You're working on a practice project called TailsMarket, aimed at honing your HTML, CSS, and JavaScript skills. The site aims to simulate an online shop for gaming and coding items, with a focus on the theme of mixing coding with various activities, from gaming to everyday life.\n\nUpon inspection, there are several areas that could be improved to enhance the user experience and overall functionality. Firstly, the structure of your HTML could be streamlined. For instance, the repeated use of h3 tags for \"Shop these items!\" and \"ALL OF THE ITEMS FOR 8.99! ONLY THIS MONTH!\" could be consolidated into a more cohesive list structure, perhaps using an unordered list (ul) with list items (li) for each product. This would make the code cleaner and more semantically correct.\n\nMoving on to the CSS, it's evident that you're using inline styles for elements like the Coder Mug and Coder Shirt. While this approach might work for a small project, employing a separate CSS stylesheet would be beneficial. Not only does it promote cleaner HTML by separating content from presentation, but it also makes your code more maintainable and easier to style as your project grows. You could start by defining styles for headers (h1, h3), product names, prices, and images in a separate CSS file.\n\nFurthermore, the use of images for product descriptions is an interesting approach, but it might be more intuitive for users if you provided brief text descriptions alongside the images. This could give potential customers a clearer idea of what each item entails, especially for items like the Coder Mug that may have multiple uses beyond its intended purpose.\n\nLastly, considering your current learning stage at Responsive Web Design, it would be beneficial to ensure your site is responsive. This means that the layout should adapt smoothly to different screen sizes, providing an optimal viewing experience whether users are on desktops, tablets, or smartphones. You can achieve this by implementing CSS media queries, which allow you to apply different styles based on the device's characteristics.\n\nIn summary, while TailsMarket is a solid foundation for learning, consider refining the HTML structure, adopting a CSS stylesheet for better separation of concerns, providing more descriptive text alongside images for products, and ensuring your site is responsive. These improvements will not only make your project more polished but also reinforce the skills you're developing on freeCodeCamp.",
"summary": "Im making a new project: \"TailsMarket\". No, its not real, just a practice project to learn HTML CSS and, JS. If you have any suggestions, or tips, tell me in the comments! TailsMarket - Shop Gaming to Coding! TailsMarket
…",
"key_points": [],
"editors_take": null,
"illustration": null,
"coverage": {
"outlets": 1,
"also_reported_by": []
},
"ai_generated": true,
"disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}