P
@eestaniel
Daniel Ayeni
@DannimationsAll comments
- @Dannimations
Welp, u got the layout pretty much perfect. Would u mind sharing how u did that? :)
- P@KaeTheDevWhat are you most proud of, and what would you do differently next time?
I’m proud that I was able to figure out how to get the layout working using flexbox. When I first saw this project, I kept skipping it because it felt like I needed to know just a little more about responsive design to complete it. Overcoming that challenge and getting it done felt really rewarding.
What challenges did you encounter, and how did you overcome them?One challenge I encountered was getting the design to display correctly without scrolling on both desktop and tablet views. I had to dive into CSS Grid and learn how to incorporate it into the media queries to achieve the layout I wanted. This really helped me improve my understanding of responsive design. It's not perfect but I am learning.
What specific areas of your project would you like help with?Honestly, I’m still learning responsive design, so I feel like I could use help with almost every aspect. With each project, I find myself stepping outside of my comfort zone, but I’m learning as I go. I really appreciate any and all feedback to help me improve!
@DannimationsFirstly, GREAT job on the flexbox layout 👏👏👏👏 I know this project wasn't easy to figure out, especially with the transitioning between the mobile and desktop view.
What i'd suggest (and what I do personally) is use wps photo viewer to see the full-screen version of the project and the image, and then alternate between them using the two by using alt+tab. That's how I do it, and I think that'll really help.
Then for the screen sizes, just knowledge of media queries is kida enough to make progress on your own, especially if you like to experiment with different screen sizes.
@media (min-width: 800px){}that's for the bigger screen sizes@media (max-width: 450px){}that's for smaller screen sizes.Hope this helps:)
Marked as helpful - @TheLuuiis@Dannimations
👏👏👏👏👏👏👏
VERY impressive what you did with the entry behavior of the div's and the media queries.
Three where some issues with the mobile views though, as the last div had a bit of a layout issue, which I also experienced when I did this project.
A quick way to resolve this is by adding min-width or max width to the media queries.
Marked as helpful - @rashed-miaWhat are you most proud of, and what would you do differently next time?
- complete with Tailwind CSS
- making layout flex and grid
- learn positioning
- I have faced a challenge in the footer
- It's hard to make an absolute positioning
- It's time to go footer
- Header is an amazing part
- and a pop-up card in the footer
@DannimationsWell, I think you submitted the project in the wrong place, but I understand what you were trying to do.
For starters, you can try changing the appearance of the buttons and links when they're being hovered over, to give some sense of user functionality.
You can achieve something like that using the 'hover' state attribute in the css
button:hover{ }and then put the properties of the hover in the curly braces.
Then for the footer, I had issues with it before, but I think you nailed it. Just use a basic flexbox for the layout, and if the div's are put in the right place, everything kinda falls into place automatically.
Hope this helps:)
- @cakesandcarrotsWhat are you most proud of, and what would you do differently next time?
Things look good to be honest
What challenges did you encounter, and how did you overcome them?The UI worked fine on varying widths but broke on varying widths so I added a min height to avoid that issue.
What specific areas of your project would you like help with?If some experienced individual is reading this then please review my code and tell me the things to improve upon.
@DannimationsI see you've made the project very close to the original, though id suggest you view it in full screen size before you submit, as it helps you to properly measure the dimensions you need for the project.
Might I suggest using a photo editor or viewer that allows you to go into full-screen mode and then toggling between your web browser (with the project) and the image.
ps. use 'f11' to go into full screen mode (atleast on chrome) :)
Marked as helpful - @nayyabaqibWhat are you most proud of, and what would you do differently next time?
I am proud that I successfully completed this project using only HTML and CSS. It was a great experience that helped me improve my front-end development skills. If I were to do this project again, I would add JavaScript to make the component more interactive and enhance the user experience.
What challenges did you encounter, and how did you overcome them?i faced some challenges with CSS positioning and properly aligning the elements. Responsive design and button interactions were also a bit tricky. To overcome these challenges, I studied documentation, watched online tutorials, and used CSS Flexbox and Grid to fix the alignment issues.
What specific areas of your project would you like help with?Through this project, I learned how to design interactive UI elements and gained a better understanding of advanced CSS concepts like Flexbox and Grid. Additionally, I realized the importance of proper spacing and alignment for a good user experience. In the future, I plan to integrate JavaScript to add more interactive features.
@DannimationsIt looks like you've got a good handle on CSS. That's very good. What u need to do now is add the Java-script to add functionality.
What I'd suggest is making the user's choice into a variable, let var userInput
then implementing that variable in a p element in the html that changes with regard to the change in the user's choice, so that when the user clicks on something, it changes the userInput.
You can always achieve this using event listeners
Remember that you'll also need to get the id's of each of the buttons, and then call them in the JS file
const buttonOne = doccument.getelementbyID('buttonOne')
this is if the button one has an id of 'buttonOne'. You can do that for the rest of the buttons. Then add an event listener:
buttonOne.addeventlistener('click', =>{ })
and in the event listener, set the innertext of the p element to be the value of that particular button.
I know it's a bit confusing, but a tutorial should help more :)
- @Marcus-Kodehode@Dannimations
beautifully established. What I'd suggest is resizing the parent div so that there's no overflow, and then making the error message disappear when the user types into the email so it's better to use.
Hope this helps :)
Marked as helpful - @Denilson15What are you most proud of, and what would you do differently next time?
I think for this project, I really tried my best to problem solve looking for different resources to not only fix any issues but learn how to use different features. I think for the next project I would like to better understanding how positioning works. I want to make sure there are no redundant usages of specific styles or tags.
What challenges did you encounter, and how did you overcome them?I was not sure how to scale down the image I was using and centering it. I knew I could apply a margin to the image but I was not sure if that was the most efficient use. I was able to overcome this by making small edits and testing my code on a live server to see how the changes I made impacted the page.
What specific areas of your project would you like help with?I would like to get better at positioning items, specifically understanding what is the best style to use for each projects respective goal.
@DannimationsWhat I'd suggest is using wps photo viewer, and double clicking to view it on the full screen. Then go to your web browser (I use chrome) and click on f11 to make that full screen as well.
Quickly change between the now magnified image and your full screen web browser by pressing Alt + tab to easily view the errors that you may have.
It's a great way to compare your project with the original.
Hope this helps:)
Marked as helpful - @Tasin269@Dannimations
You did a good job in inserting the quotes as the background image for the first card. You still need to make the background colors of those two cards white, and maybe consider re-sizing the whole thing. :)
- @velvet-jedi@Dannimations
You did a really good job making it responsive with multiple screens, all you need to correct is the padding in the cards, but asides that, its really good.
Marked as helpful - P@aurelienfliegerWhat are you most proud of, and what would you do differently next time?
I successfully implemented the cart icon using the ::before pseudo-element in CSS - no HTML needed, since this is only a decorative icon, the screen readers do not need to see it.
What challenges did you encounter, and how did you overcome them?I was not sure whether to use clamp() or the traditional min-width & max-width for the width.
I experimented with clamp but did not find the results controlled enough. It provided a janky interface. I need to experiment more.
What specific areas of your project would you like help with?/
@DannimationsIt's a bit bigger, but asides that you nailed it! Good job man.:)
- @JacksonRuddWhat are you most proud of, and what would you do differently next time?
This was my first time using a table, or horizontal breaks. I also used a media query, but not sure if there is a better way to make this responsive.
What challenges did you encounter, and how did you overcome them?I had some trouble making this responsive. I'm still using some
min-widthand some media queries. I want to learn more about doing this the right way.@Dannimationsgood job
- @FirstHalcyonWhat are you most proud of, and what would you do differently next time?
Last two exercises were Flex-only, so I opted to do just Grid with this one. Managed to completely avoid using divs and got by with just semantic elements.
Really happy with how it all came together. Flex seemed like the obvious choice here and I haven't practiced Grid in a while, so it was a nice change of pace.
What challenges did you encounter, and how did you overcome them?Was a bit rusty on Grid, so it was a bit cumbersome at first. It was just a single column of elements, so Flex was much more fitting. Still, by the end, I got a good hang of it.
@DannimationsYou did a very good job, especially with the dimensions of the main div, which are almost identical to that of the original project. Keep at it! :)
- @abedbortol@Dannimations
.....I think you may have pushed the wrong project, or there was an error in your pushing, because this hardly looks like the original project.
- @PREETHAM-HT@Dannimations
Good job, just put the main div at the center of the page. You can achieve this by making it's position relative, then use the top, left and right attributes to position it accordingly.
