I should improve on the input:range part and also enhance my knowledge of JavaScript in math.random() and the browser
What challenges did you encounter, and how did you overcome them?I had many problems with the input[type='range'] in the style
Clean code!
What did I build? A simple tip calculator that lets users enter a bill amount, choose a tip percentage, and see the total.
What did I learnt? I learned how to use JavaScript to handle input, update the DOM, and perform basic calculations.
What do I need help with? I need help improving input validation and organizing my code better.
Super clean and responsive!
i understood a little bit of grid
Some marginal differences from styles in the design but JS functionality is great! Would tweak css just a bit to ensure the success message doesnt break on mobile
-Enhanced Development Workflow and Code Organization- One of the most significant improvements I've made during this challenge is in my HTML and CSS structuring. I adopted a more disciplined approach to semantic HTML, ensuring that elements are logically grouped within containers. This not only makes the codebase cleaner and easier to navigate but also significantly enhances maintainability. For instance, when designing the main content area, I clearly separated the image section from the text and author information, allowing for better control over layout and responsiveness.
-Prioritizing Responsive Design- Another key takeaway has been the emphasis on separating mobile and desktop styling. Instead of relying on a single set of styles, I now explicitly define distinct CSS rules for different screen sizes. This clear separation within the style.css file ensures that the design is truly responsive and adapts seamlessly across devices, providing an optimal user experience regardless of the viewport. This approach, centered on separation and organization, has been a fundamental shift in my development process.
What challenges did you encounter, and how did you overcome them?Google and more Google ..
Great job on the layout for desktop! The table and mobile designs break your styles however!
Great job on the layout! Looks like some minor inconsistencies with font and some global styles but clean otherwise!
Would work on the layout a bit more!
This was my first challenge that consisted of more than just a centered element with some different objects in it. I am glad I got through it and was able to make it work!
What challenges did you encounter, and how did you overcome them?Getting the cards to be in the diamond like pattern took a bit of time to figure out. I wasn't exactly sure how to get stuff out of alignment using flex at the onset of the challenge. But I was able to do a bit more research into flex versus grid and determine flex was good to use for these as it I needed columns mostly.
What specific areas of your project would you like help with?I am starting to see the need for and reasoning behind having more than one mobile design with media queries. Any tips on multiple breakpoints and making the page more responsive to different dimensions would be appreciated.
Looks like you have some white space towards the bottom of the page! Would suggest reviewing html and body styling!
I would certainly start with a more minimal version of the "2 rows become 2 columns" setup and think about media/typography later.
What challenges did you encounter, and how did you overcome them?Learning how to use the <figure> with multiple sources took some reading. Getting flex to work with breakpoints wasn't easy but a good experience.
Let me know if there is any "code-smell" that stands out to you. I'm happy to polish this up a little bit more.
Great job!
Great Job! small but make sure you are using semantic elements in order (ex: h2 before h3 in html!)
great job!
Well done! I would use the style guide for font sizes!
Great job getting started!
