What did you find difficult while building the project?
Which areas of your code are you unsure of?
Do you have any questions about best practices?
I still can not figure out how to vertically center my <main> element. I have tried align-items with flex multiple times but it just doesn't work. I would love to hear any feedback on how to align any div element to the center relative to the screen size of the browser.
Would also love any other tips you could give me. Currently learning responsive CSS, although not doing great atm.
To centre a div, the flex properties have to be set on the parent element of the div you want to centre. Centre also takes into account the height of the parent div, so say if you have a landing page and want something right in the middle setting the parent element to height: 100vh; should centre it.
Please guys let me know where i am wrong or any advice will be good.. :)Happy coding
Goodjob. I had a look at your code and was wondering about your flex properties in your .container class. If you were attempting to centre your container (QR code container) to the centre of the screen, you have to set the flex properties in the parent container. So the container will be centred depending on the height of the parent. So in your .container class remove margin: 0 auto; and the flex properties and put those flex properties in the body and set the height of the body to be 100vh.
Did a good job! Only thing I can say is increasing the font size on your texts and instill a bit more visual hierarchy.
I tried to add the background img of the div>order-container-wrapper but it didnt work .order-components .order-component-wrapper { width: 80%; height: 100vh; background: url(images\pattern-background-desktop.svg) no-repeat center; background-position: top; display: flex; align-items: center; } i dont know what else i could have done
Good job looks good! I just did the same challenge. I made some changes to center your container, in you're .order-components .order-component-wrapper {code block} remove width of 80%, and in your .order-components .order-component-wrapper .card {code block} remove width of 35% will center your container to the center of your parent. Anyways good job
My Question is about the units , in my project I only use "px" and "%" , I don't know the best practice units for a full responsive webpage and Why exactly them ?
Looks good. For best practices for units I'd suggest using more relative units like em, rem and of course %, unlike being a fixed unit like px, em's, rem's and % offer flexibility. Em: relative to the parent containers font-size. Rem: relative to the root font-size (:root). %: relative to the parents size. Its not a bad thing to start off with using px's to begin with as they are easier to understand, but if you learn other alternatives it should turn out with a more responsive design. Heres this link for best practices https://gist.github.com/basham/2175a16ab7c60ce8e001. Anyways good job with your work!
I've made steady improvements in my attention to detail, responsiveness and and general understanding of css works. still more to learn but I had fun.
Looks really good congrats just completed it as well! I'd say one thing that would improve the site overall is the alignment of your text and padding in various areas. So for example in your .paragraph class if you set that element to display flex and set justify-content and align-items to center, it will center all of the inside tags in relation to the parent div which is the .paragraph class. And for your .mainGallery class you could use a display of grid and set the grid-template-columns property to repeat(2, 1fr) which will split up your gallery to be 2 equal fractions(fr) of the parent container, which would be (50%, 50%). Hope this helps and good job.
Hello everyone, this is my solution for the product-card-component exercise, I was practicing the css with respect to the previous project, I would like you to tell me what you think, and how the change of image could be improved with respect to this given solution. Thank you
Looks good, got really close to the original! Adding some padding for the product description would add a little more whitespace around the element and make it more readable and appealing to look at, as well as having a single margin line that the descriptive elements are pushed against on the left side as it appears the h1 and button arent left aligned like the other elements. But other than that you did a good job congrats!
Well done with your design, you did a really good job! Only have a couple of notes in regards to the pricing, having aligned items that are connected make web designs look more appealing so if you put align-items: center; in your .price class, will horizontally align your items and make it look nicer. Changing the font-size of some of the elements could also drastically improve your design, as well as adjusting line-height for items such as your paragraph and header, rule of thumb for line-height, is the bigger the font the smaller the line height, and vice versa. Apart from that next step is learning media queries to get a fully responsive product card so good job!
Nice work! It looks super close. I had a look at your code and looks pretty good. Only a few notes with the margin on the button could use a bit more, and you could try adding a transition duration for the hover to add a little bit more. And with the pricing a common design principle is alignment, if you group the prices in a container and set that container to flex-box, you would be able to align them both horizontally, but other than that all looks good. Goodjob and the next step is adding a media query to make it responsive to screen sizes!
