Sae Matsuda• 240
@SaeM843
Submitted
Hello Front-End Mentor Community! This is my solution for this challenge😊
🛠️ Built with:
- HTML
- SASS
- JS
- BEM
- API (I used IP API instead of a suggested API)
🤝Help / Feedback:
Any feedback are more than welcome!
Sachin
@Sachin-Mahato
All comments
- Sachin• 830
@Sachin-Mahato
Posted
use environment variable to hide api key for that you have to install dotenv npm package and if you're using bun that you don't have to do that. there many ways you can hide your api keys, check out on the internet.
0 - Agustín Firpo• 500
@Arfirpo
Submitted
How can i do this challenge better?
Sachin• 830@Sachin-Mahato
Posted
Well done for completing the challenge
As a front-end developer, your job is to make the website look just like the designer wants it to. If there are any differences, try to fix them quickly so that the website matches the design as soon as possible.
This challenge consists of two parts: the mobile component and the desktop component. However, it appears that the mobile part has not been developed. It's important to address this issue and ensure that both the mobile and desktop aspects of the challenge are completed.
.Do not forget ⚠️ to check your FEM report (It provides value information), to see what is incorrect and update your code with it. This should be done immediately after submitting your challenge.
1. Lack of semantic HTML:
- Semantic HTML elements are missing or not used appropriately.
- The structure does not convey the meaning and purpose of different parts of the webpage.
-.Every site should ALWAYS have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serve as the component’s container
--
.Avoid skipping heading levels ⚠️.
- Always start with the h1 (which can only be used once) and you will go down the hierarchy level depending on the heading’s level of importance.
2. Usage of absolute units instead of relative units:
- Absolute units like pixels (
px) are used for defining lengths and sizes instead of relative units like percentages (%),em, orrem. - Relative units are more flexible and responsive across different screen sizes.
Your CSS Reset is being underutilized😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset
I hope you find this helpful and happy coding
Marked as helpful
0 @victoriamnx
Submitted
Hii!! I hope you like the result, it was a lot of fun to make the error appear. Any tips on how I can improve would be greatly appreciated.
Sachin• 830@Sachin-Mahato
Posted
Well done for completing the challenge
.Do not forget ⚠️ to check your FEM report (It provides value information), to see what is incorrect and update your code with it. This should be done immediately after submitting your challenge.
1. Lack of semantic HTML:
- Semantic HTML elements are missing or not used appropriately.
- The structure does not convey the meaning and purpose of different parts of the webpage.
-.Every site should ALWAYS have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serve as the component’s container
--
.Avoid skipping heading levels ⚠️.
- Always start with the h1 (which can only be used once) and you will go down the hierarchy level depending on the heading’s level of importance.
2. Usage of absolute units instead of relative units:
- Absolute units like pixels (
px) are used for defining lengths and sizes instead of relative units like percentages (%),em, orrem. - Relative units are more flexible and responsive across different screen sizes.
For improved accessibility 📈 for your content, it is best practice to use em ✅ for media queries. Using this unit gives users the ability to scale elements up and down, relative to a set value use this link to learn about media queries
Your CSS Reset is being underutilized😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset
I hope you find this helpful and happy coding
Marked as helpful
0- PKaczupinko• 170
@Kaczupinko
Submitted
What are you most proud of, and what would you do differently next time?
I'm most proud of writing clear, maintainable code with correct semantic structure. This not only ensures that the code is easy to understand and work with but also improves accessibility and search engine optimization. If I were to do anything differently next time, I would focus on optimizing the code further for performance, such as by reducing the file sizes of images and other assets, or by leveraging more advanced CSS techniques to enhance responsiveness across different devices.
What challenges did you encounter, and how did you overcome them?
I initially encountered challenges with the layout breaking when starting from the smallest elements. To address this, I decided to take a break and then systematically rework the layout step by step. This approach allowed me to better structure the elements and maintain the overall design integrity, ensuring that each part of the project fit together as intended. This methodical process helped me overcome the initial difficulties and achieve a more polished final result.
What specific areas of your project would you like help with?
The project was small, so I didn't notice any specific areas that needed particular attention. However, any feedback, no matter how minor, would be greatly appreciated and valued.
Sachin• 830@Sachin-Mahato
Posted
Well done for completing the challenge
.Do not forget ⚠️ to check your FEM report (It provides value information), to see what is incorrect and update your code with it. This should be done immediately after submitting your challenge.
1. Lack of semantic HTML:
- Semantic HTML elements are missing or not used appropriately.
- The structure does not convey the meaning and purpose of different parts of the webpage.
-.Every site should ALWAYS have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serve as the component’s container
--
.Avoid skipping heading levels ⚠️.
- Always start with the h1 (which can only be used once) and you will go down the hierarchy level depending on the heading’s level of importance.
2. Usage of absolute units instead of relative units:
- Absolute units like pixels (
px) are used for defining lengths and sizes instead of relative units like percentages (%),em, orrem. - Relative units are more flexible and responsive across different screen sizes.
For improved accessibility 📈 for your content, it is best practice to use em ✅ for media queries. Using this unit gives users the ability to scale elements up and down, relative to a set value use this link to learn about media queries
I hope you find this helpful and happy coding
Marked as helpful
0 @senouy-109
Submitted
Sachin• 830@Sachin-Mahato
Posted
Well done for completing the challenge
As a front-end developer, your job is to make the website look just like the designer wants it to. If there are any differences, try to fix them quickly so that the website matches the design as soon as possible.
This challenge consists of two parts: the mobile component and the desktop component. However, it appears that the mobile part has not been developed. It's important to address this issue and ensure that both the mobile and desktop aspects of the challenge are completed.
.Do not forget ⚠️ to check your FEM report (It provides value information), to see what is incorrect and update your code with it. This should be done immediately after submitting your challenge.
1. Lack of semantic HTML:
- Semantic HTML elements are missing or not used appropriately.
- The structure does not convey the meaning and purpose of different parts of the webpage.
-.Every site should ALWAYS have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serve as the component’s container
--
.Avoid skipping heading levels ⚠️.
- Always start with the h1 (which can only be used once) and you will go down the hierarchy level depending on the heading’s level of importance.
2. Usage of absolute units instead of relative units:
- Absolute units like pixels (
px) are used for defining lengths and sizes instead of relative units like percentages (%),em, orrem. - Relative units are more flexible and responsive across different screen sizes.
3. Reliance on CSS Box Model properties instead of modern layout techniques:
- CSS Box Model properties are used extensively, causing difficulties in managing and maintaining the layout.
- Consider adopting modern layout techniques like Flexbox or Grid for improved flexibility and easier maintenance.
Helpful links
I hope you find this helpful and happy coding
0- Muhammad Noman• 230
@BitWizCoder
Submitted
Sachin• 830@Sachin-Mahato
Posted
Well done for completing the challenge
.Do not forget ⚠️ to check your FEM report (It provides value information), to see what is incorrect and update your code with it. This should be done immediately after submitting your challenge.
1. Lack of semantic HTML:
- Semantic HTML elements are missing or not used appropriately.
- The structure does not convey the meaning and purpose of different parts of the webpage.
-.Every site should ALWAYS have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serve as the component’s container
--
2. Usage of absolute units instead of relative units:
- Absolute units like pixels (
px) are used for defining lengths and sizes instead of relative units like percentages (%),em, orrem. - Relative units are more flexible and responsive across different screen sizes.
Your CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset
For improved accessibility 📈 for your content, it is best practice to use em ✅ for media queries. Using this unit gives users the ability to scale elements up and down, relative to a set value use this link to learn about media queries
I hope you find this helpful and happy coding
2 - Roman Herrera Nery• 110
@romannery
Submitted
Sachin• 830@Sachin-Mahato
Posted
Well done for completing the challenge
This challenge consists of two parts: the mobile component and the desktop component. However, it appears that the mobile part has not been developed. It's important to address this issue and ensure that both the mobile and desktop aspects of the challenge are completed.
.Do not forget ⚠️ to check your FEM report (It provides value information), to see what is incorrect and update your code with it. This should be done immediately after submitting your challenge.
1. Lack of semantic HTML:
- Semantic HTML elements are missing or not used appropriately.
- The structure does not convey the meaning and purpose of different parts of the webpage.
-.Every site should ALWAYS have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serve as the component’s container
--
.Avoid skipping heading levels ⚠️.
- Always start with the h1 (which can only be used once) and you will go down the hierarchy level depending on the heading’s level of importance.
2. Usage of absolute units instead of relative units:
- Absolute units like pixels (
px) are used for defining lengths and sizes instead of relative units like percentages (%),em, orrem. - Relative units are more flexible and responsive across different screen sizes.
I hope you find this helpful and happy coding
0 @kittiphatp
Submitted
Sachin• 830@Sachin-Mahato
Posted
Well done for completing the challenge
As a front-end developer, your job is to make the website look just like the designer wants it to. If there are any differences, try to fix them quickly so that the website matches the design as soon as possible.
This challenge consists of two parts: the mobile component and the desktop component. However, it appears that the mobile part has not been developed. It's important to address this issue and ensure that both the mobile and desktop aspects of the challenge are completed.
.Do not forget ⚠️ to check your FEM report (It provides value information), to see what is incorrect and update your code with it. This should be done immediately after submitting your challenge.
1. Lack of semantic HTML:
- Semantic HTML elements are missing or not used appropriately.
- The structure does not convey the meaning and purpose of different parts of the webpage.
--
.Avoid skipping heading levels ⚠️.
- Always start with the h1 (which can only be used once) and you will go down the hierarchy level depending on the heading’s level of importance.
2. Usage of absolute units instead of relative units:
- Absolute units like pixels (
px) are used for defining lengths and sizes instead of relative units like percentages (%),em, orrem. - Relative units are more flexible and responsive across different screen sizes.
3. Reliance on CSS positioning properties instead of modern layout techniques:
- CSS positioning properties are used extensively, causing difficulties in managing and maintaining the layout.
- Consider adopting modern layout techniques like Flexbox or Grid for improved flexibility and easier maintenance.
Helpful links
.It seems that you are not currently using an external stylesheet for your web page. I would recommend utilizing an external style.css file for your styles. This approach offers several benefits such as code reusability, ease of maintenance, browser caching, and improved performance
I hope you find this helpful and happy coding
Marked as helpful
0@MateTheBrogrammer
Submitted
Sachin• 830@Sachin-Mahato
Posted
Well done for completing the challenge
As a front-end developer, your job is to make the website look just like the designer wants it to. If there are any differences, try to fix them quickly so that the website matches the design as soon as possible.
This challenge consists of two parts: the mobile component and the desktop component. However, it appears that the mobile part has not been developed. It's important to address this issue and ensure that both the mobile and desktop aspects of the challenge are completed.
1. Lack of semantic HTML:
- Semantic HTML elements are missing or not used appropriately.
- The structure does not convey the meaning and purpose of different parts of the webpage.
-.Every site should ALWAYS have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serve as the component’s container ⚠️.
--
.Avoid skipping heading levels ⚠️.
- Always start with the h1 (which can only be used once) and you will go down the hierarchy level depending on the heading’s level of importance.
2. Usage of absolute units instead of relative units:
- Absolute units like pixels (
px) are used for defining lengths and sizes instead of relative units like percentages (%),em, orrem. - Relative units are more flexible and responsive across different screen sizes.
3. Reliance on CSS positioning properties instead of modern layout techniques:
- CSS positioning properties are used extensively, causing difficulties in managing and maintaining the layout.
- Consider adopting modern layout techniques like Flexbox or Grid for improved flexibility and easier maintenance.
Helpful links
I hope you find this helpful and happy coding
Marked as helpful
0- Tharun Raj• 1,310
@Code-Beaker
Submitted
Hi there! I have done a lot of work on this one. Or maybe a bit too much. I feel like the code is just too much. I would be glad If anyone could look into the code and tell me how I can simplify my CSS and write better code.
Also, This time I have got a perfect validation report from the site. I'm happy about that. Thank you!
Sachin• 830@Sachin-Mahato
Posted
Great job for completing the challenge.
This challenge consists of two parts: the mobile component and the desktop component. However, it appears that the mobile part has not been developed. It's important to address this issue and ensure that the challenge's mobile and desktop aspects are completed.
.Usage of absolute units instead of relative units:
- Absolute units like pixels (
px) are used for defining lengths and sizes instead of relative units like percentages (%),em, orrem. - Relative units are more flexible and responsive across different screen sizes.
Your CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset
I hope you find this helpful and happy coding.
Marked as helpful
1 - Absolute units like pixels (
- Mezizto• 270
@Mezizto
Submitted
The result list decided to solve with table tag. Do not have any good explanation why I did it. Just wanted to see how to modify tables. As a total newbie it took 3-4 days. A lot of googling and playing around with different properties. Also struggled to get both sides width and height equal.
Sachin• 830@Sachin-Mahato
Posted
Well done for finishing the challenge.
As a front-end developer, your primary task is to transform the designer's visual concept into a functional website. The objective is to ensure that the final website closely resembles the original design. However, if there are noticeable differences between the website and the intended design, it's important to address this issue.Use the build-in frontend Mentor design comparison tool.
1. Lack of semantic HTML:
- Semantic HTML elements are missing or not used appropriately.
- The structure does not convey the meaning and purpose of different parts of the webpage.
-.Every site should ALWAYS have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serve as the component’s container ⚠️.
--
.Avoid skipping heading levels ⚠️.
- Always start with the h1 (which can only be used once) and you will go down the hierarchy level depending on the heading’s level of importance.
.Usage of absolute units instead of relative units:
- Absolute units like pixels (
px) are used for defining lengths and sizes instead of relative units like percentages (%),em, orrem. - Relative units are more flexible and responsive across different screen sizes.
Your CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset
For improved accessibility 📈 for your content, it is best practice to use em ✅ for media queries. Using this unit gives users the ability to scale elements up and down, relative to a set value use this link to learn about media queries
I hope you find this helpful and happy coding.
0 - Gerry Lauriant• 760
@GerryL2
Submitted
Sachin• 830@Sachin-Mahato
Posted
Well done for finishing the challenge.
As a front-end developer, your primary task is to transform the designer's visual concept into a functional website. The objective is to ensure that the final website closely resembles the original design. However, if there are noticeable differences between the website and the intended design, it's important to address this issue.Use the build-in frontend Mentor design comparison tool.
1. Lack of semantic HTML:
- Semantic HTML elements are missing or not used appropriately.
- The structure does not convey the meaning and purpose of different parts of the webpage.
-.Every site should ALWAYS have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serve as the component’s container ⚠️.
--
.Usage of absolute units instead of relative units:
- Absolute units like pixels (
px) are used for defining lengths and sizes instead of relative units like percentages (%),em, orrem. - Relative units are more flexible and responsive across different screen sizes.
Your CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset
For improved accessibility 📈 for your content, it is best practice to use em ✅ for media queries. Using this unit gives users the ability to scale elements up and down, relative to a set value use this link to learn about media queries
I hope you find this helpful and happy coding.
Marked as helpful
0
