Looking to hire developers?
@LuisJimenez19
@DemuraAIdev
Submitted
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?
@LuisJimenez19
Posted
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.
@rweiss2010
Submitted
I feel like I over did it with the classes. Did I use too many? Should I be combining them more?
@LuisJimenez19
Posted
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.
Marked as helpful
@benhensor
Submitted
Thanks for checking out my solution to the Audiophile site challenge.
I am interested in any feedback or opinions on my approach to CSS. I've styled this project in the old skool method of importing css files. I am currently learning more efficient ways to style projects so I'd love to hear people's thoughts on what their preferrences are? Tailwind, styled components etc.
Thanks!
@LuisJimenez19
Posted
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.👋🏽
@Massive12356
Submitted
This is my second project here, and I have learned a lot. What I found very difficult when building this project was the fact that the dismiss button should redirect you back to the original page. I am happy to be here and your feedback is mostly welcome
@LuisJimenez19
Posted
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 protected]"
required
>
or you could use javaScript to make it more custom.
Well Edward, I hope I have helped you, see you.👋🏽
Marked as helpful
@mishalmusthafa
Submitted
I am new to web designing and development. I used the grid and flex box in this project. I have created this with my own style. Can any one tell if this is a good way of doing this or is there a better way. Looking for some feedbacks
@LuisJimenez19
Posted
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!
Marked as helpful
@ericgalbarn
Submitted
Another solution from mine but the components seem to be ' too central ' i guess so you have to scroll down to see the final result ;)) Hope I'll get some of constructive feedbacks from you guys. Thank you so much in advance!
@LuisJimenez19
Posted
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.🤗
Marked as helpful
@Pallavi2908
Submitted
@LuisJimenez19
Posted
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👋🏽
Marked as helpful
@juanRCoder
Submitted
Me costo al comienzo porque se ve como es todo, osea, muy grande , diferentes temas pero seccionando en pequeñas partes el proyecto si se pudo.
No estoy muy seguro a la hora del responsive design, varia el tamañano de cada dispositivo y a veces me aterra que no se vea igual a lo planeado en otros usuarios.
no por ahora, solo recomiendo practicar , practicar y practicar , tambien preguntar y analizar
@LuisJimenez19
Posted
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👋🏽
@ashrafalmayah
Submitted
This was a fun challenge. I struggled to make the curves fit to the right place, and also has their size responsive. This is the part I spent most of my time trying to figure out how to do it, but it all came in handy and I think I made it well. If you have any suggestion or anything I made wrong please write it down. Thanks for reading, and I hope you like my solution.
@LuisJimenez19
Posted
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👋🏽
@zagorxka
Submitted
Hi ! It's one of my first projects, so there could be some mistakes. I had some troubles using flexbox and with positioning elements.
Feel free to comment on semantics, RWD and anything I could improve !
@LuisJimenez19
Posted
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👋🏽
Marked as helpful
@tabbycoleman
Submitted
My first challenge!
I think there are a lot of better practices I can learn regarding responsiveness, I'm still not sure how to make it scale nicely and not squash too much before getting to the mobile size.
@LuisJimenez19
Posted
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👋🏽
Marked as helpful
@FearlessOne07
Submitted
I failed to figure out how to add the active state for the image. Any help would be appreciated.
@LuisJimenez19
Posted
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.
Marked as helpful
@devusexu
Submitted
margin: 12em auto)? Maybe with percentage/vh or using position as I think hard-coded value is not goodThanks for reading. Any advice would be greatly appreciated!
@LuisJimenez19
Posted
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.
Marked as helpful
@JordanKleinbaum
Submitted
❗Question: If you look closely at the photo of how it's meant to look, the blue rectangle has rounded corners and is on top of the white rectangle with no rounded corners. I tried that, but I couldn't get them to overlap. How would I do that?
Thank you!
@LuisJimenez19
Posted
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.
Marked as helpful
@AlixiaDae
Submitted
I always have such difficulty centering my content. I feel like there must be an easier or cleaner way of doing this. I'll have to read others' CSS regarding best practices. If anyone has any tips, I'd love to hear about it!
@LuisJimenez19
Posted
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.
@timilehin223
Submitted
I'm lost on how to make the circle responsive, or basically, everything in it responsive, when you start reducing the width of the screen, the whole thing looks messy
@LuisJimenez19
Posted
Hello, congratulations on finishing the challenge.
I see that you are using relative measurements, which is fine, I recommend you work with the first-mobile methodology, so you do the design first on mobile and then adapt it to desktop, which I think is what you need, a media store. and everything would be fine. Regarding the irsulo, I did it this way:
.circle {
width: calc(7em + 5vmin);
height: calc(7em + 5vmin);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--Light-royal-blue);
}
So try to make the design for mobile first and then you can implement @media (min-width: 768px) or endpoint you want.
I hope my contribution is useful, if you have any other questions let me know.
Marked as helpful
@samanthaKarungi
Submitted
Pretty great first project!
Main challenge was using media queries and fitting the content of the page based on the size of the users screen. For example reducing the content as you shrink down the page? Would appreciate some help regarding that!
@LuisJimenez19
Posted
Hello, congratulations on finishing the challenge.
I see you're using mediaqueries, and that's ok, I don't know if you achieved what you wanted to practice but the design doesn't rise to the challenge. I advise you that for this type of project it is not necessary to use mediaqueries, so do this:
-grid:
body {
background-color: hsl(212, 45%, 89%);
display: flex;
min-height: 100vh;
display: grid;
place-content: center;
}
body {
background-color: hsl(212, 45%, 89%);
display: flex;
min-height: 100vh;
display: flex;
alignment-items:center;
justify-content:center;
}
And the content will focus. If what you want is that the size changes with respect to it, you can use relative measurements, instead of static ones. -example:
.flex-parent {
display: flex;
flex-direction: column;
justify-content: center;
height: 450px;
width: 90%;
max-width:300px;
background-color: hsl(0, 0%, 100%);
border-radius: 20px;
}
Stop using positioning so much, it's a bit simpler.
CSS also has certain functions like calc() in conjunction with relative measurements you can make the content change dynamically as you resize the window.
font-size: cal(1em - 2vmin)
If you want you can go deeper MDN
With practice we are improving, I hope my help is useful.👋🏽
Marked as helpful
@pobze
Submitted
Hello guys,
This is my solution to the challenge, can i get some of your feedback on it please?
Thanks in advanced for your feedback <3
@LuisJimenez19
Posted
Hello, congratulations on finishing the challenge.
It's perfect, you've got the layout right, one suggestion is better to manipulate the content from its container.
body {
background-color: hsl(212, 45%, 89%);
display: flex;
min-height: 100vh;
display: grid;
place-content: center;
}
body {
background-color: hsl(212, 45%, 89%);
display: flex;
min-height: 100vh;
display: flex;
aling-items:center;
justify-content:center;
}
I hope my contribution is helpful, do not hesitate to ask if you have another question.
Marked as helpful
@JordanKleinbaum
Submitted
Question: I have an issue with CSS position, the way I centered my "card" div was by adding display: flex, align items and justify content to the entire body of the HTML Document. What is the best practice / easiest way to center the div, as well as center the text within the card?
Thank you!
@LuisJimenez19
Posted
Hello, congratulations on finishing the challenge.
As you have done it is fine, if you do not want to add the style to the body then create another element that contains everything, but for this project it is fine.
It is always best to manipulate the content from its container.
You can add the height to the body or to the min-heigth:100vh container element and with the flex rules you've added it should be perfectly centered so you don't use the margin on the card.
Another way to do that and with one less line is to use grid:
body {
background-color: hsl(212, 45%, 89%);
display: flex;
min-height: 100vh;
display: grid;
place-content: center;
}
I hope my contribution is helpful, do not hesitate to ask if you have another question. 👋🏽
@joshuabroqueza
Submitted
I really appreciate it if you could provide me with your valuable feedback. Thank you!
@LuisJimenez19
Posted
Hello, congratulations on finishing the challenge.
If you are looking for a better design, I think that the same challenge gives you the image of the dice, it is not necessary for an emoji.
I think you can give it a max width so it doesn't resize relative to the content.
You can also add a loading status so that when you make the request the user will be aware of it.
I hope my contribution is helpful, if you have any questions, you can tell me. 👋🏽
Marked as helpful
@NatnaelSisay
Submitted
While making the hover effect for the button i noticed the height of the container increase and reset when the button leave, Is there a way to avoid it?
I have seen if i could set the border before hand, having similar color as the background and then, only change the border-color on the active state it seem to have a better effect, but am still curious to see other options
@LuisJimenez19
Posted
Hello, congratulations on finishing the challenge.
So that it does not affect the height of the container, you could change the border to outline so that you do not affect the box-model of the element and make it bigger.
example:
.btn:is(:hover, :focus) {
background-color: inherit;
outline: 1px solid var(--clr-neutral-1);
color: white;
}
That means my contribution is of some use, see you later 👋🏽
Marked as helpful
@3l-5hadday
Submitted
Functional component.
Only major problem in my opinion is that once you click a button the hover effect disappear.
@LuisJimenez19
Posted
Hello, congratulations for finishing the challenge.
It would be better if you captured all the buttons and then iterated them with an array.forEach so you would save more code and you would not be repeating yourself, and to be able to remove the styles from the ones that are not selected you could do something like this:
function selectedOption(arr, current){
arr.forEach((item)=>{
item.classList.remove("active") // remove styles all buttons
})
current.classList.add("active") // add style current button
}
document.querySelectorAll("button").forEach((button,index,arr) => {
button.addEventListener("click", ()=>{
selectedOption(arr, arr[index])
})
})
.active{
background-color: rgb(149, 158, 172);
color: white;
}
I hope my contribution has been useful, let's keep trying.
Marked as helpful
@DadiPraveenKumar
Submitted
Please tell me how I can improve
@LuisJimenez19
Posted
Hello, congratulations for finishing the challenge.
It would be better if you give the body the height and not the <header>, which could be a <main> or a <section> so you don't get the scroll, and if what you want is that the footer below you can do something like this:
body{
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header{
flex-grow:1; // takes up as much space as possible, pushing the footer
display:flex;
aling-items:center;
justify-content:center;
}
I liked the shadow you gave to the card, I hope my contribution is useful, let's keep trying
Marked as helpful
@CodeNinja585
Submitted
aligning the items was difficult for me, I also wanted to try and make the website responsive. Adding more fuel to the fire.
@LuisJimenez19
Posted
Hello, I congratulate you for having finished the challenge
For better control when you have few elements, it is better to manipulate the container and not the content,
You can add flex-direction:column; to the body to have the card above the attribution section and a justify-content:center; to the center so you don't use margin on the card.
something like that:
body {
font-family: 'Outfit', sans-serif;
background-color: var(--lightGrey-clr);
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 15px;
gap: 30px;
}
.card {
background-color: var(--white-clr);
padding: 15px;
text-align: center;
border-radius: 17px;
/* text-align: center; */
/* margin: 0 1rem; */
max-width: 300px;
}
.container {
/* max-height: 100vh; */
/* margin: 0 auto; */
/* display: flex; */
flex-direction: column;
justify-content: center;
}
If you want, you can remove the container, so it could look a little better, I'll leave you with the task of adding a shadow so it would look prettier, I hope my contribution is helpful, gambaree.