Hello, I'm Daniel Cano, I'm 19 years old and I'm passionate about frontend development. I really like the design and styles. I love learning new things and I am excited to know the infinite things I can do in this world of web development.
I’m currently learning...I am currently training in frontend development although I already have some experience and certain knowledge 👨💻.
Latest solutions
Time Tracking Dashboard HTML, SCSS, JS
#accessibility#bem#lighthouse#sass/scss#viteSubmitted 4 days agoI will like receiving feedback on my JavaScript logic and implementation.
Newsletter sign-up form with success message HTML, SCSS, JS
#accessibility#bem#sass/scss#vite#lighthouseSubmitted about 1 month agoArticle Preview Component HTML, SCSS, JS
#bem#lighthouse#sass/scss#vite#accessibilitySubmitted 6 months agoTestimonials Grid Section HTML, SCSS
#accessibility#bem#lighthouse#vite#sass/scssSubmitted 7 months agoFour Card Feature Section HTML, SCSS
#accessibility#bem#lighthouse#sass/scss#viteSubmitted 7 months agoProduct Preview Card Component HTML, SCSS
#accessibility#bem#lighthouse#vite#sass/scssSubmitted 7 months ago
Latest comments
- @AxaynSubmitted about 6 hours ago@DacardonacPosted about 6 hours ago
Congratulations, you did an excellent job 🎉
0 - P@jayco01Submitted 22 days agoWhat are you most proud of, and what would you do differently next time?
I'm really proud of learning how to use the fetch() API in JavaScript for this project. It was my first time working with dynamic data fetching, and understanding how to handle JSON data and update the DOM based on user interactions was a huge win for me.
Along the way, I also practiced a lot with JavaScript conditionals, particularly for handling singular and plural units (like displaying "1hr" vs. "2hrs"). It was a small detail, but getting it right felt great because it made the data display feel more polished.
If I were to do the project again, I’d focus more on enhancing the user experience, like adding an active state to the buttons to give clearer feedback on which timeframe is currently selected. I'd also explore better ways to handle errors and possibly look into more scalable methods for updating the DOM.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was learning how to properly use the fetch() API to load and display data dynamically from a JSON file. Initially, I struggled with understanding how to handle asynchronous operations and how to correctly structure the .then() promises to ensure the data was processed and displayed at the right time. I overcame this by breaking down the process step by step, reading documentation, and experimenting with different approaches until I understood how the data was flowing through my code.
What specific areas of your project would you like help with?I'd love some feedback on how I handled the fetch() API and data manipulation in JavaScript. This was my first time dynamically loading JSON data and updating the DOM, so I'm curious if there are more efficient or cleaner ways I could have structured my code.
@DacardonacPosted 4 days agoHi Jayco, I hope things are going well for you 😊. I saw your project and I'm happy with it. Overall, everything looks good, and you did an excellent job. Congratulations 🎉. I want to give you feedback on some specific points or issues I've noticed, and I hope they'll help you improve on future projects.
-
Meta tags to improve SEO: If your project needs meta tags, which are very important for improving SEO and ranking better in browsers, you can read more about this at this link 🔎**[Metadata for SEO] (https://www.one.com/en/online-marketing/metadata-for-seo)**
-
Accessibility (a11y): Accessibility is essential since we need to consider all the potential users who will use our app or website, and we must be inclusive of each of them. In this case, I noticed that your website needs a bit more color contrast, which makes it difficult for people with limited vision to see 👁️. You should also include the ´alt´ attribute to describe your images and ´aria-label´ to describe your buttons, divs, etc., all so that a screen reader 💻 can read it to a visually impaired user.
-
Performance: You can improve the performance of your projects by minimizing file and image sizes ⬇️ and using more modern, higher-performance file extensions such as ´.webp´ for images, and ´.svg´ or ´.ico´ for icons or illustrations 🖼️.
I think this is all I noticed where you can improve Jayco. I hope my comment is very helpful and continue doing an excellent job 🙌. I congratulate you again and I hope you are very well 😊.
0 -
- @mandrisicSubmitted about 1 month ago@DacardonacPosted about 1 month ago
Hello Mirna Andrišić, I hope you are feeling great 😊, I was reviewing your solution, and let me tell you that it is incredible, I loved it and I took several things that I saw to start implementing them in future projects, I congratulate you for your great work 🎉, in the same way I would like to leave you some small recommendations or feedback that can make your projects even better.
-
The first thing is to try to maintain and manage a good version and commit control since this helps keep a history of what is being done in the project and makes it easier to understand and read for future people who review your project.
-
The second thing is to implement metadata, which will help you improve the SEO of your projects and position you better in search engines. In this link, you can read more about this: Metadata
Once again, I congratulate you on this wonderful work. I hope this helps! Keep up the great work, you’re doing awesome! 💪
Marked as helpful0 -
- P@edpauSubmitted 6 months agoWhat specific areas of your project would you like help with?
I tried to use aria-expanded, aria-controls and aria-haspopup to improve accessibility for the share menu, to inform assistive technologies about the current state of the expandable share menu. Please comment on my approach.
improving accessibility has turned to be more challenging than I expected. For the mobile version, I need to hide the author content from screen readers, while for the desktop version, it doesn't need to be hidden. There are many factors to consider.
Please advise how I can improve the accessibility.
Please also share any good articles on accessibility for beginner.
@DacardonacPosted 6 months agoHey Edpau! I hope you're doing well 😊. I was reviewing your solution and honestly, everything looks great! Congratulations on the awesome work. I just found a few areas where you could make some improvements to optimize your project even more:
- Contrast: The background and foreground colors don't have enough contrast. This affects accessibility, as it could make it difficult for some people to read the content, in this link you can read more about this: Color contrast a11y
- SEO: I noticed there are no Metadata tags
<meta>
. This can negatively impact SEO since search engines rely on that information to index your page properly. Here is a link where you can read more about this topic Metadata and SEO- Images: I recommend using
.webp
format for your images. This will improve the performance of your project by reducing load times.Also, as a general suggestion, you could organize your styles by using Sass/Scss and modularize them by components. This way, you’ll have better control over your styles and avoid having one long CSS file.
I hope this helps! Keep up the great work, you’re doing awesome! 💪
1 - @thamu-acnSubmitted 7 months ago@DacardonacPosted 7 months ago
Hi! I hope you are very well, I was reviewing your solution and everything is super good, congratulations, I found some points to improve and I would like to share them with you.
-
Metadata: It's important to optimize your site's Metadata to improve SEO and help search engines index it better. This includes adjusting the title, description, keywords, and meta tags to define your content and make it easier to discover, in this article you will find more information on this topic: Metadata and SEO.
-
HTML Semantics: Using semantic tags like
<header>
,<article>
,<section>
, etc., improves the structure and readability of your code. It also enhances accessibility for users with screen readers, making navigation clearer, in this link you can read more about that: HTML Semantics. -
Color Contrast: Ensuring proper contrast between text and background is crucial for accessibility, especially for users with vision impairments. Improving this makes your content more readable and accessible to everyone.
-
.webp Image Format: Using images in
.webp
format is a great way to improve site performance, as this format reduces file size without losing quality. This speeds up page load times, benefiting both user experience and SEO. -
Grid: In the grid you implemented, a better structure would be using
grid: 1 / span 2
. This is a best practice because it clearly defines where the element should expand from and to, you can test it and practice with this page: Layoutit.com.
By implementing these changes, you'll optimize both the performance and a11y of your site, improving the overall user experience, I hope my comment is of great help. Keep up the good work!
Greetings!
0 -
- P@webdevbynightSubmitted about 2 years ago@DacardonacPosted 7 months ago
Hi Webdevbynight,
I hope you're doing well. I reviewed the solution you sent, and overall, it looks great. However, I'd like to offer a few suggestions for improvement:
-
Version control: I recommend making more frequent commits. They act as checkpoints in your project, making it easier to track changes and recover if something goes wrong.
-
Metadata: Don’t forget to include metadata in your HTML. This helps improve your page's SEO and boosts your ranking in search engines, In this link you can read more about that: Metadata and SEO.
-
HTML semantics: Your HTML structure is good, but I suggest focusing more on semantics. This will enhance both the accessibility and readability of your code, you can read more about that in this link: HTML Semantic.
-
Accessibility: Review the color contrast in your project, as some combinations don’t contrast well. Improving this will boost accessibility and have a positive impact on future audits.
-
Performance: To enhance performance, I recommend using
.webp
images. They're lighter and load faster in browsers, improving user experience.
0 -