@Mtrxxo
@Linda-Anima
Submitted
What are you most proud of, and what would you do differently next time?
Was proud of the fact that I was able to get the idea on how to go about it as soon as I saw the design.
What challenges did you encounter, and how did you overcome them?
How to set the required height of the container and the card.
I kept adjusting the height till I got what I wanted.
What specific areas of your project would you like help with?
Media queries
@Mtrxxo
Posted
Hey Linda 👋,
Tye concept of Media Queries can be daunting at first, but with practice, it gets easier... Just remember for any large stuff of your design... Make the size smaller than phones, which most of them are 360px, but iPhone5 is 320px... You might wanna consider everyone, but as iPhone5 is no longer in use, you can just make your smallest size 360px.
For this design... Try making your mobile view of ".card" about 350px and ".container" having a margin top makes your page have white on the top... Try adding the background color you added to ". container" to the "body" element. If you still don't get it, use my submission for the challenge as a guide for you.
Happy Coding 😊✨
@michel-matoski
Submitted
What are you most proud of, and what would you do differently next time?
The mobile layout. The responsive layout.
What challenges did you encounter, and how did you overcome them?
Fitting the image in the right size. And making it responsive.
What specific areas of your project would you like help with?
The HTML tags (What can I do to write better HTML) and in the CSS (the same thing).
@Mtrxxo
Posted
Hello 👋
To write better HTML... Use Semantics... Learn more about HTML Semantics
Happy Coding 😊✨
@sivaprasadev
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of myself for just completing a responsive component using HTML and CSS. I will build few more projects to get a proper grip on responsive web development.
What challenges did you encounter, and how did you overcome them?
I was struggling to get mobile responsiveness. With the help of Google, I understood some points and applied them.
What specific areas of your project would you like help with?
I still need help with making the site responsive. I need help with media queries and other layout implementations using Flex and Grid. Moreover, I would like to know what are the units we should use to get a proper responsive pages.
@Mtrxxo
Posted
Hello 👋
Speaking of your page's responsiveness... When you're making a media query for a mobile device... The width of the card should be a bit smaller than 360px as most mobile phones have a width of 360px.
Also, try using Mobile Simulator (Chrome Extension) it simulates Mobile phones, Tablets, laptops, and Desktops... It gives you the accurate size for what it'll look like on those devices.
Happy Coding 😊✨
@Linda-Anima
Submitted
What are you most proud of, and what would you do differently next time?
I was able to get the work done before I realized. I would change some of the colors next time.
What challenges did you encounter, and how did you overcome them?
The positioning of my image.
I used height, width and border-radius to overcome it.
What specific areas of your project would you like help with?
Image positioning and media query.
@Mtrxxo
Posted
Hello 👋, your code is So Nice...
Let me give some tips, To center the card Try creating a container by using a div and placing the card inside it and style it as follows:
.card-container{ display: flex; justify-content: center; align-items: center; height: 100vh; }
@Alejandro1709
Submitted
What are you most proud of, and what would you do differently next time?
Mobile design
What challenges did you encounter, and how did you overcome them?
Responsive UI
What specific areas of your project would you like help with?
Responsiveness
@Mtrxxo
Posted
Hello 👋
I previewed your code and it's lovely... Just a few things you can do to make it better... Try Keeping the whole design inside a container... And reduce the size of the container so, it's not as large as the screen's width... Also to center the container add your preferred margin to the top and bottom of the container and set margin left and right to "auto"
That'll be all... Happy Coding 😊✨
@slackwaree
Submitted
What are you most proud of, and what would you do differently next time?
I didn't struggle nearly as much as I thought I would when I had to transition from the mobile layout (which uses block-level elements) to the desktop layout (which uses a grid layout), and so in that regard, I am pretty proud of myself.
I struggled a bit with keeping my CSS code clean and minimal and trying not to write any unnecessary duplicate selectors in my media query that controls the desktop layout.
What challenges did you encounter, and how did you overcome them?
I struggled a bit when I initially started working on the desktop layout because elements were all over the screen haha, but once I gave the wrap class display: grid everything seemed a little more formatted and easier to work with.
What specific areas of your project would you like help with?
Is there any way I could make my CSS code a little smaller while keeping it easy to read? I feel as though 90 lines for a project of this size is quite a bit.
@Mtrxxo
Posted
Hello 👋 To make your css code DRY(Don't Repeat Yourself) you can look for things that have the same style and combine them together, separating them with a comma.
The card design looks great
Happy Coding 😊✨
@Linda-Anima
Submitted
What are you most proud of, and what would you do differently next time?
Having an idea about the challenge and being able to implement it.
What challenges did you encounter, and how did you overcome them?
Was struggling with how to set the media query.
Tried my best by setting media query breakpoints.
What specific areas of your project would you like help with?
I'm struggling with how to set the media query.
@Mtrxxo
Posted
Hello 👋
Consider the sizes of devices you're writing the media query for... Like if it's for mobile, make it smaller than 360px which is the width for most mobile phones
Also to get it even better... Use Mobile Simulator(Chrome Extension)... It simulates Mobile phones, Tablets, and Laptops and desktops.
Happy Coding 😊 ✨
Marked as helpful
@natebe4
Submitted
What challenges did you encounter, and how did you overcome them?
Media query for mobile.
What specific areas of your project would you like help with?
Same as above. Sizing properly for mobile. I will learn this properly eventually.
@Mtrxxo
Posted
Hello 👋
In order to style properly for mobile, consider the width of a mobile phone is probably 360px... So you have to make the width of the card smaller than 360px, which means you also have to reduce the size of the image.
@natebe4
Submitted
What are you most proud of, and what would you do differently next time?
I figured this out quite quick using basics.
What challenges did you encounter, and how did you overcome them?
Getting flexbox down properly, but once i actually paid attention to where i was placing div containers, i figured it out.
What specific areas of your project would you like help with?
Sizing. I realize afterwards the sizing on the live page looks smaller.
@Mtrxxo
Posted
Hello, 👋
Try using Mobile Simulator, it simulates Mobile phones, Tablets, and Laptops and desktops... It simulates the real size on those devices.
Happy Coding 😊✨
Marked as helpful
@Akifa12
Submitted
What are you most proud of, and what would you do differently next time?
try this with other technologies
What challenges did you encounter, and how did you overcome them?
i faced difficulty in deploying
What specific areas of your project would you like help with?
i need help with git and git hub
@Mtrxxo
Posted
Hello, Akifa 👋
You said you need help with GitHub... Well, I can help with that
The only issue you have is the fact that the path in your GitHub Directory is same as the directory in your Original Code
I viewed your code and here's a solution👇 Remove that "./images/" from the path on your GitHub as it's not in that directory on GitHub. Do the same for the other image...
Happy Coding 😊✨
@ghostofegypt
Submitted
What are you most proud of, and what would you do differently next time?
styling the box
What challenges did you encounter, and how did you overcome them?
The avatar image and the buttons,unfortunately I can't fix them
What specific areas of your project would you like help with?
I need help with the buttons , i need to make it not to take the whole width I need help wth the avatar image ,I can't make it rounded
@Mtrxxo
Posted
Hello, ghostofegypt... You wanted help with your button's width
Just add a specific width to the buttons... Perhaps something close to the width of the whole container... And to place it in the center... Set a certain margin for Top and bottom and set margin left and right to auto... Saw that you used margin bottom only... You can modify by using:
.btn{ margin: 0 auto 25px; } For top, left and right, and bottom respectively
Happy Coding 😊✨
Marked as helpful
@CaveCodes
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of being able to complete the design. Next time I would like to understand how to center things properly, as well as how to limit the size of boxes more.
What challenges did you encounter, and how did you overcome them?
1."Learning" title box had color on the whole line, i had to limit the width to 5rem. 2. I struggled getting the shadow right.
What specific areas of your project would you like help with?
Should I use CSS for onhover or javascript?
@Mtrxxo
Posted
I think it's more easier and faster with CSS.
