MT HTML STRUCTURE
What challenges did you encounter, and how did you overcome them?RESPONSIVENESS OF THE PAGE
What specific areas of your project would you like help with?RESPONSIVENESS OF THE PAGE
Hello!
Congratulations on completing the challenge successfully.
header {
width: 90%;
max-width: 1400px;
margin: 20px auto;
display: flex;
}
main {
height: 100vh;
margin-top: 40px;
display: flex;
flex-direction: column;
width: 90%;
max-width: 1440px;
margin: self;
}
footer {
text-align: center;
padding: 20px 0;
position: static;
bottom: 0;
width: 90%;
max-width: 1400px;
margin: auto;
}
These CSS rules are so that the containers always have the same width, as you can see there are three of these rules that are repeated so you could create a class eg: wrapper and use them instead of repeating.
Very well documented code. and good for using mobile first.
I hope I have helped you, if you have any questions let me know.
I learned to always go with the mobile-first workflow
Make my code responsive with rem for font-size instead of px
Make use of rem for min-width in media query instead of px or max-width
Wasn't able to get my mobile view displaying fully at first, because I built desktop view first and used px for my font-sizes, so a lot of things weren't working as they were supposed to, until I asked for help in Discord and got the best help from Alex, thanks to him now I understand better and will be going back to change my past challenges to mobile-first workflow and always pay attention to building responsive sites.
Will appreciate any views at all in whichever aspect I can make my code better and make better decisions going forward.
Hello!
Congratulations on successfully completing the challenge.
element.style {
width: 100vw;
height: 100vh;
overflow: hidden;
display: grid;
place-content: center;
}
This is for devices with a width of more than 768px.
It's great that you've left comments and that you use mobile first.
I hope I've helped you, if you have any questions let me know.
I am most proud of successfully replicating the design with clean and efficient code while ensuring responsiveness. It was a great learning experience to work with HTML, CSS, and JavaScript in a single file.
Next time, I would focus more on optimizing the code further, improving accessibility, and ensuring even better responsiveness for different screen sizes.
What challenges did you encounter, and how did you overcome them?One of the challenges I faced was ensuring that the design looked exactly like the given reference while keeping the code clean and efficient. Another challenge was handling the share button functionality and positioning the popup correctly.
I overcame these challenges by carefully analyzing the layout, using CSS flexbox for proper alignment, and testing different positioning techniques. For the share button, I used JavaScript to toggle the visibility of the popup, making it work smoothly.
What specific areas of your project would you like help with?I would like help with optimizing my CSS for better responsiveness and ensuring the JavaScript functionality is as efficient as possible. Additionally, any feedback on improving accessibility and overall code structure would be greatly appreciated."
Hello!
Congratulations on successfully completing the challenge.
it makes an unnecessary vertical scroll. add ´overflow:hidden;´ to the body.
I understand that it is a very basic challenge but you can separate the scripts to make it more organized.
If you want to improve your CSS you can use a methodology, I recommend BEM.
I hope my contributions are helpful, if you have any questions let me know.
Hello! Congratulations on completing the challenge.
One recommendation is that you remove the styles that the browser brings by default, you can do something like this:
.*,
*::before,
*::despues de{
margin:0;
padding:0;
box-sizing:border-box;
}
Very well centering the card. In this case, when it is a single card, I don't think it is necessary to use a media query to reach the objective (I think you are using the media query wrong, I don't know if there are phones with 1440px screens) what you can do is give it a width:90% to the card and give it a maximum width that they ask for, for example max-width:375px
This is how the container would look:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
overflow: hidden;
}
And this is how the card would look:
.card {
background-color: var(--white);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
padding: 1.2rem;
border-radius: 1.5rem;
/* width: 50%; */
/* max-width: 20%; */
width: 90%;
max-width: 375px;
}
I hope I have helped you, greetings.
Hello! Congratulations on completing the challenge.
Regarding your question, I think you haven't used many unnecessary classes, I think that's fine. With practice you get better, there are also tools like PostCSS that optimize your code and eliminate the classes that you are not using and/or add prefixes to make it more compatible with other browsers but that is another topic.
I can see that the responsive is not very good, I would recommend using the "mobile first" methodology to make it easier for you. You can notice when the width of the window or screen is 500px or so, the layout is damaged, what you could do is something like this:
.container {
width: 90%; /*As you already added a maximum width then it occupies the spaces well*/
max-width: 38rem;
margin: self;
display: flex;
flex-direction: row;
margin: 0;
height: 70%;
max-height: 30rem;
border-radius: 1rem;
background-color: white;
filter: drop-shadow(1rem 1rem 1rem #e3e3e3 );
}
And since you've already done it this way, one of the ways I can think of is to do this:
@media (max-width: 580px)
.container {
flex-direction: column;
width: 100vw;
height: max-content;
margin: 0;
padding: 0;
max-height: none;
}
You have done a great job, I hope I have helped you, greetings.
Hi Ben, congratulations on finishing this challenge, very good job.
In this case I see your website very well, you can add an overflow-x:hidden; so that there is no unnecessary horizontal scrolling.
body {
background-color: #f2f2f2;
background-color: var(--bodyBG);
font-size: 1.5rem;
font-weight: 400;
font-weight: var(--fwRegular);
line-height: 2.5rem;
overflow-x: hidden;
}
In my case I prefer to use TailwindCss because if you know CSS it is very easy to bring it to this framework. It allows you to literally write any CSS rule and it is also very easy to customize it. The disadvantage is that in development it is sometimes very difficult to read the components because to customize An element must add many classes, however it also has directives that you can extend, that is my opinion.
Regarding the challenge, you could add certain animations between each page to make it a little more pleasant.
Well Ben, I hope I have helped you, don't hesitate to answer if you have questions, see you.👋🏽