I would most certainly appreciate it if anyone could please explain how i could have made my JavaScript shorter, I feel it's unnecessarily long.
Any area where anyone thinks I could have done better.
Any part that anyone thinks I could have done better
I would appreciate help with any part of the code anyone thinks i could have done better
my JS needs some tweaking... if there's a better way I could have written my JS... Let me know
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
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 😊✨
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).
Hello 👋
To write better HTML... Use Semantics... Learn more about HTML Semantics
Happy Coding 😊✨
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.
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 😊✨
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.
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; }
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
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 😊✨
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.
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.
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 😊✨
