I found it a little bit challenging to position the arches top left and bottom right I wasn't sure if the challenge required me to position them absolute to the app itself or to the window.
I also wanted to do a type in a fax on the messages but it seems that hey to requires more than vanilla CSS unless I'm mistaken I would look more into this.
I think you also need to consider accessibility by using HTML semantic tags.
What areas of improvement do you see?
appreciate the feedback
I just wanted to say that your solution is awesome! I really love the animation you added—it's a nice touch!
I wanted to quickly suggest that you set a max-width on your text to ensure it doesn't expand too far (it's currently touching the edge of the container). It might also be worth having a look at your line-height.
I hope those small adjustments can help align your solution more closely with the design. :)
Regarding your question about whether the code is optimal, I'd suggest using an async function with try and catch instead of fetch().then().catch(). Here's why it's more beneficial:
Code Readability: The async/await approach enhances code readability and simplifies the flow. It eliminates the need for multiple .then() statements, resulting in cleaner and more concise code.
Error Handling: Using try and catch allows you to catch and handle errors within the same block where you perform the asynchronous operation. This leads to cleaner and organized error handling.
Error Propagation: Async functions with try and catch offer flexibility in catching and handling errors at different levels, enabling better error propagation and granular error handling.
Here's an example of how the code could be written using an async function:
async function fetchData() {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('Request failed');
}
const data = await response.json();
// Process the data here
return data;
} catch (error) {
// Handle any errors here
console.error('An error occurred:', error);
throw error; // Optionally, re-throw the error
}
}
// Call the async function
fetchData()
.then(data => {
// Handle the data here
})
.catch(error => {
// Handle any errors here
});
I hope this explanation clarifies the benefits of using async functions with try and catch for your code.
Great job on your solution! To enhance the accuracy of your design, consider utilizing the dynamic values from Tailwind CSS JIT (Just-in-Time) mode.
By leveraging the JIT mode's arbitrary value support, you can achieve precise measurements and better align your solution with the design specifications. You can learn more about this feature in the Tailwind CSS documentation.
For example, to adjust the letter-spacing and make it more accurate to the design, you can use dynamic values. Here's a code snippet that demonstrates this:
Congratulations on completing your project! I noticed that your buttons have the default styling provided by the browser. You might want to check out some style reset guides online to remove any unexpected defaults. This can be particularly useful when starting new projects. Here are some resources to get you started:
I also noticed that you could complete your project without using many media queries. You can simply add a max-width property to your card element to prevent it from expanding too far. Here's a link to the documentation for max-width:
Additionally, you can center your card by giving the wrapping container, in this case the body, a class of display: grid and place-items: center. This should center your card nicely for your next preview screenshot. Just remember to set a minimum height of your body to 100vh to ensure that the container fills the entire screen. Here's some documentation on these CSS properties:
