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.👋🏽
Hello Edward, Congratulations on finishing this challenge, very good job.
Some recommendations:
Try to set the margin and padding of all the elements so you can have more control and it doesn't make you that unnecessary scroll:
* {
font-family: MyFont;
box-sizing: border-box;
margin: 0;
/* padding: 0; */ /* In this case, if we set the padding, the content will be damaged a little, but it is a very good practice to do this.*/
}
And finally you could do a small validation of the email, from what I see when you do not enter an email it still works, you can add an attribute to your html so that it is required:
<input type="email" name="" id="email" placeholder="email@company.com"
required
>
or you could use javaScript to make it more custom.
Well Edward, I hope I have helped you, see you.👋🏽
Hello! Congratulations on completing the challenge. It looks very good, these are some details that I notice can improve.
The <header> element has no function, you could omit it.
The background of the entire page is not completely white, it is something more or less like this background: #eef2fe;, you can add it <section id="result-summary"
You can add these rules to .container, it is no longer necessary to apply a background
.container {
/* padding: 80px 20px; */
/* background: #fff; */
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
Very well used grid, I added these CSS rules to make the card look good:
.item-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 16px;
box-shadow: 0 10px 10px #c8d2ef;
}
It is generally better to manipulate the content from its container, so you can avoid using margin and do something like this in the summary:
.item-container .summary {
padding: 20px;
gap: 10px;
display: flex;
flex-direction: column;
}
and finally the .atributtion generates a scroll and in this case it is not necessary, unless you want it, I show you a possible solution so that it remains at the bottom and does not scroll:
.attribution {
font-size: 11px;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
}
Very good job, I hope I have helped you, let me know if you have questions. Thank you!
Hello, congratulations for completing this challenge.
If what you want is to center the card: you can use the following rules:
body { font-family: 'Manrope', sans-serif; max-width: 375px; /* margin: 100px 25px; */ /* margin-top: 170px; */ font-size: var(--fs); background-color: var(--clr_light_gray_blue); height: 100dvh; width: 100%; justify-content: center; align-items: center; display: flex; }
This way you don't have to play with the margin.
I recommend not modifying the <body> in the mediaquery but rather playing with the size of the card at the breakpoints.
I hope I have helped you, if you have any other questions let me know.🤗
Hello, congratulations on completing the challenge.
If you want the icon to not be affected by the opacity you can use a gradient, like this:
.icon { background: radial-gradient(circle, rgba(0,0,0,0.3701855742296919) 28%, rgba(0,255,247,1) 84%) }
And .icon:hover { opacity: 1; cursor: pointer; }
You can adjust it to your liking.
I hope my contribution is helpful.
See you👋🏽
Hola Juan, felicitaciones por terminar el desafio.
Me gusto mucho el detalle del sonido, y se ve bien en dispositivos moviles.
En pantallas más grandes de 1440px no queda centrado, solo tendrías que quitar el max-width:1440px del <body> y quedaría lo más responsive posible.
También podrías hacer que el cambio de tema funcione con el click en el switch y no solo en los números, y te recomiendo no usar var para declarar variables.
Muy bien Juan, me gusto la solución que has hecho.
Espero que mis aportes sean de ayuda, nos vemos👋🏽
Hello, congratulations on completing the challenge.
Not much to say, you've done a great job. With practice everything gets better.
You can give the <body> a overflow-x:hidden; and it won't do unnecessary horizontal scrolling.
Very good work.
I hope my contribution is helpful👋🏽
Hello, congratulations on completing the challenge.
Very well centered on the card, it is the best way to do it so far. It is very good that you think about semantics, although in this challenge it is not very important. Perhaps when displaying the description you could change the <h3> to a <p>. and in the attribution use a <footer> element and wrap the text in a <p> tag.
And in this case for a better responsiveness, you could use the width:90%; rules and give it a maximum width of max-witdh:360px; and it will look better on mobile devices.
I hope my contribution is helpful👋🏽
Hello, congratulations on completing the challenge.
The idea of centering the component is very good, if you add min-heigth:100vh; justify-content:center; overflow:hidden; to <body> then the content will be perfectly centered.
Then this time you don't need to use this:
`@media (min-width: 955px) #content-box { max-width: 50%; }``
If you add max-width:700px then it won't get that big, you can give it the width you want as well as the height. Otherwise everything is fine, with practice everything gets better.
By the way, it is better to use classes instead of the id if you want to give it styles, it is a convention but it is up to you what to use.
I hope my comment is helpful👋🏽
Hi, congratulations on finishing the challenge.
In order to achieve the effect you should use another layer, and instead of using a <img/> element to display the image you can use it as the background of the <picture> element.
something like that:
<section class="card__image"> <a class="card__image__active" href="#"> <div> <img class="icon-view" src="./images/icon-view.svg" alt="img"> </div> </a> </section>
The <section> element replaces the <picture> element
and in the CSS:
.card__image{
background-image: url(../images/image-equilibrium.jpg); // image url
.card__image__active{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background:radial-gradient(circle, hsla(178, 100%, 50%, 0.1) 0%,hsla(178, 100%, 50%, 0.3) 100%);
opacity: 0;
transition: opacity .5s linear;
border-radius: 10px;
.card__image:hover > .card__image__active {
opacity: 1; /* set it to full opacity so the icon keeps its original color */
cursor: pointer;
}
}
I hope my contribution is helpful.
Hi, congratulations on finishing the challenge.
You are correct there is a better way to center it. A tip is that whenever possible it is better to manipulate the content from its container. You can do this:
body { flex-direction: column; min-height: 100vh; display: flex; background-color: var(--bg-color); justify-content: center; align-items: center; }
This will center everything perfectly.
I see that you use <main> to make the card, which is fine but would be better:
<main> <div class="card" > <img src="images/image-qr-code.png" alt="qr-code"> <h2>Improve your front-end skills by building projects</h3> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </div> </main>
and in this .card give it the styles of the card, and if what you want is to leave the footer below you can apply to the main a ``flex-grow:1;
I hope my contribution is helpful.
Hi, congratulations for finishing the challenge.
Regarding your question, to achieve the desired effect, you should wrap both sides in a main container, although I see that you are using the everything layer, this layer is the one that should give the white background, that will give the desired effect.
Another suggestion is that it is always better to manipulate the content in the container, example:
body{ min-height:100vh; width:100%; display:flex; justify-content:center; align-items:center; }
With this you can center the entire card without having to play with the positioning.
And in this main everything container you can also apply a flex and a max-width:740px or the width you want, then each part of the card will occupy half and you don't have to specify it in each one. if it doesn't work add the rule flex-grow:1; this will make each part occupy the same size.
I hope my contribution is helpful.
Hello, congratulations on finishing the challenge.
With respect to your given it is always better to manipulate the content from the container, as you are doing, if you want to center it well you could use display:flex; and align-items:center; justify-content:center; with min-height:100vh; width:100%; this will center all the content and if you want the footer to be below you could do this:
.background { // card container flex-grow:1; // this will take up as much space as possible and push the footer /*other styles*/ }
I hope my contribution has been helpful.
