I’m most proud of successfully setting up dynamic routing in Astro and rendering MDX content.
What challenges did you encounter, and how did you overcome them?Details in README.md file in github repo
What specific areas of your project would you like help with?All feedback is welcome. Thanks!
Day of the week isn’t really correct from where I am😂😂 but this looks sick!!
This was my first time building with Astro, and I learned how to create a fast and optimized web page. There’s still a lot to explore, but this project gave me a great introduction to Astro’s features. Also, I had the opportunity to further practice integrating APIs into web applications.
I will use Sass next time instead of vanilla css
What challenges did you encounter, and how did you overcome them?Ability to resize the SVG given. it took a while but with a viewbox i was able to solve it
What specific areas of your project would you like help with?The background curve image
I like the animation effect you did but your menu button does not work
Responsiveness can also be improved on, some things like input and buttons can be a bit bigger while images and fonts can be a bit smaller
The key is still responsiveness
Try using clamp for font sizes and use absolute values for images like rem instead of %
If you feel you need to use %, then use a max-width of 100% and width of 20rem ( for instance )
Better yet, put the image in a div, give the image 100% width and height
And in the parent div, add the things I talked about in the previous paragraph
Your page is not well responsive on mobile
Especially in landscape mode, it’s just jumbled up all over the place
And you have a horizontal scrolling issue as well
Creating the list and making color changes in the active states.
What specific areas of your project would you like help with?Using accessibility options correctly in my HTML code Write more efficient CSS
Your title says social links but the button takes me to a recipe page website, that’s an error
Creating the list and making color changes in the active states.
What specific areas of your project would you like help with?Using accessibility options correctly in my HTML code Write more efficient CSS
I like your commitment
😂😂😂I wasn’t expecting that GitHub link to work, I thought it’d be a dead link since we don’t know who Jessica is😂😂
On a min width of 600px, try adding padding top and bottom to the body, maybe 70px each so your site looks better on larger screens
Your font size can be increased a bit, the green text, the bio and the button text too(this should also be a bit bolder)
Not sure if it’ll help but you can check my solution for this challenge as well
Your images aren’t showing, both the illustration image and the profile image
And learn to depend less on absolute elements like px for width, learn to use more relative terms like rem, I personally use rem, works wonders
You can look up width: min(); for a more nuanced understanding
Also, the name Greg hooper is too close to the text Ontop of it, this text and the image should exist at a much further gap than that
happy with how im overcome the stuff part which is style same as the preview
What challenges did you encounter, and how did you overcome them?style part, overcome by try and searching
What specific areas of your project would you like help with?code distribution
In landscape mode ( a larger screen size ) your footer overflows onto the container and overlaps it, and your container lacks padding also in some screen sizes, maybe it’s the image overflowing to the top
I think it’s because you used margin 0 auto
0 literally means zero margin top & bottom while auto affects left and right
Use margin-inline: auto; instead to achieve the same result without affecting the top margin so it looks good on other screen sizes
First off, your container lacks a background color, it’s supposed to be white
Asides that, congratulations on a job well done
Your code responsiveness can still be improved upon
Try adding padding to the container as well, on some screen sizes, it doesn’t display fully due to lack of space
Asides that, good job
If you can as well, try to use less absolute elements like px for width and more relative elements like rem
Hello, I like your design, it looks neat but I couldn’t help but notice some few issues with it
it stretches too far horizontally and doesn’t display all the information properly, on a larger screen width, the header text completely disappears
it doesn’t stretch to the full horizontal width as required by the design
your tipTotal calculation is kinda wrong: instead of:- (billInput + tipAmount) / num of people
Instead it’s more like this:
Const tipPercentage = tip / 100; Const totalTip = bill * tip percentage; Const totalTipPerPerson = totalTip / num of people; Const totalBillPerPerson = (bill + totalTip) / num of people ;
Hello, I like your design, it looks neat but I couldn’t help but notice some few issues with it
it stretches too far horizontally and doesn’t display all the information properly, on a larger screen width, the header text completely disappears
it doesn’t stretch to the full horizontal width as required by the design
your tipTotal calculation is kinda wrong: instead of:- (billInput + tipAmount) / num of people
Instead it’s more like this:
Const tipPercentage = tip / 100; Const totalTip = bill * tip percentage; Const totalTipPerPerson = totalTip / num of people; Const totalBillPerPerson = (bill + totalTip) / num of people ;
I would greatly appreciate it if you could take a look and share your feedback. I’d love to hear your thoughts on areas I can improve or any suggestions you might have.
Thank you so much for your time!
I think you can improve this by using semantics in your html, looks good, congratulations
not proud of this one honestly
What challenges did you encounter, and how did you overcome them?quite a few challenges, including creating two separate buttons for the mobile version only.
What specific areas of your project would you like help with?I would like to know whether there is a way to do this project with only one mobile button.
your website looks good, your styling still needs improving but I like how your js improves interactivity, your html can be written a lot better in a semantic way as well, congratulations.....we both have much to learn
most proud of my responsive design, although I need to increase my speed
What challenges did you encounter, and how did you overcome them?not much trouble
The sizes of your cards in the mobile view are irregular, I like your idea of making the tablet view different from the desktop view, that's a powerful way to utilize the power of css grid, its effortlessly sweet...Try using more of semantic html in your code for better readability, overall, it looks really nice
Congratulations!!!
Looks good, could be better though, your page isn't really centered in the desktop/wide view, it looks like its hanging closer to the top
