At first there were difficulties with Tailwind and Framer Motion; it took a lot of time, but now it’s a little easier, because by overcoming difficulties we grow and become stronger. I wouldn't say that I'm not sure about anything. Can we do better? - Yes! Every day I am better than myself yesterday)
Hey this looks really good, I could just suggest that you add a localStorage so that when you refresh the page the tasks you had added are kept.
The rest looks very good, the design and animations were fantastic 😎
Greetings! you have done a great job 😎
📌 Some suggestions
reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsersreset CSS and the box-sizing: border-boxposition to center your content in the center of the screen, you can use the flexbox properties in the body:body {
background-color: black;
min-height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
main {
background-color: #222222;
/* position: absolute; delete */
/* top: 50%; delete */
/* left: 50%; delete */
/* transform: translate(-50%, -50%); delete */
width: 250px;
height: 420px;
text-align: center;
border-radius: 10px;
}
blog preview card
Greetings! you have done a great job 😎
<div class="content"> to a <main class="content">max-width: 100% to your img so that it occupies the correct width within the containermargin to center your content in the center of the screen, you can use the flexbox properties in the body (Remove the margin from your content class):body {
background-color: hsl(47, 88%, 63%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
It looks good at 375 px and around 1000px.
I would like to use SCSS and bootstrap5 on it to improve the view.
The calculations worked properly, so far.
Any suggestion is welcome.
¡Saludos!
¡Saludos @Eddieramirez29!
Lo que pasa es que estás queriendo organizar los elementos con position: absolute lo cual lo hace un poco complicado. Lo que te recomiendo es que antes de usar SCSS o Bootstrap, aprendas a usar flexbox o grid y verás que será mucho mas sencillo que con position: absolute.
También te recomiendo que investigues sobre el reset CSS, generalmente los navegadores traen estilos por defecto y con el reset podes manejarlo mucho mejor para que se vea en todos lados igual.
I have just done this project two times, but you will see the first try here. The first time I did it using tailwind-css and the second time with vanilla CSS. That was really interesting for me that I did it for the second time much faster and better. It reveals for me the practices and struggles in these days are working.
What challenges did you encounter, and how did you overcome them?Making it responsive was so challenging for me. But I resolve it using firefox Responsive Design Mode. I changed the screen size and check where the design was corrupted. then I add a @media for that size.
What specific areas of your project would you like help with?Al tough I think I resolved my problem with responsiveness, I am still sure that I am not working like professionals. I do like to know what techniques should I learn to do responsive design good.
Greetings! you have done a great job 😎
📌 Some accessibility and semantics recommendations for your HTML
<div class="container"> to a <main class="container"> and the <div class="attribution"> to a <footer class="attribution">h1 instead of h2margin to center your content in the center of the screen, you can use the flexbox properties in the body:body {
margin: 0;
line-height: inherit;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px; /* Separate the main from the footer */
}
¡Buen trabajo Luis! 😎
📌 Te dejo algunas sugerencias
<picture> para cambiar de imagen dependiendo el tamaño de la pantalla. Más infoheight: 100vh en lugar de min-height, lo que hace que se corte el contenido si hay un scroll verticalAdd to cart¡Muy buen trabajo Waldo!
Te dejo algunas sugerencias:
width: 100% en lugar de width: 100vw, esto último suele generar un scroll horizontaldetails junto con summary para los elementos del acordeón. Más info¡Saludos Maria Paula! has hecho un buen trabajo 😃
📌 Te dejo algunas sugerencias
<div class="card"> por <main class="card"> y <div class="attribution"> por <footer class="attribution">display: block en tu img para quitar el espacio en blanco por debajo de la imagen. Aunque en este caso es visualmente irrelevante, pero puede ayudarte a calcular mejor los espacios entre un elemento y otroLearning no es un button si no mas bien podría ser un enlace a, ya que, al darle click te llevaría a otra página. Los botones se usan para funcionalidades como enviar un formulario o cambiar el tema del sitioh1, h2, etc, deben ir en orden del mayor al menor. En este caso tu h2 podría ser tranquilamente un pposition: fixed para este footer, si lo notas, en algunas pantallas llega a superponerse con la card y es algo molesto. En su lugar, podes seguir la recomendación que te dejaron de usar flex-direction: column en el body, para que se vea correctamente tenes que quitar el position: fixed del footer y los margin en el card y dejar tu body de la siguiente manera:body {
background: var(--yellow);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 2rem; /* Esto genera un espacio entre el main y el footer */
min-height: 100vh;
margin: 0; /* Esto quita los márgenes que vienen por defecto en los navegadores en el body, podrías aplicarlo directamente como parte del reset en tu selector universal (*) */
}
Espero que estas sugerencias te ayuden a mejorar 🤓
Greetings! you have done a great job 😎
📌 Some suggestions
favicon in your head, however, you did not upload it to your repository, therefore, it is not visible<div class="container"> to a <main class="container">% for width or height. Better use rem, em or pxinputconsole.log that you should deleteGreetings! you have done a great job 😎
📌 Some accessibility and semantics recommendations for your HTML
<div class="container"> to a <main class="container">attribution should go outside the main📌 Some suggestions
reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsersreset CSS and the box-sizing: border-boxmargin: 0 to your body, this will remove annoying scrolling on large screens. If you want to maintain separation on very small screens, you can apply the margin again using media querysgap property in the body to separate your main from your footermargin to center your content in the center of the screen, you can use the flexbox properties in the body:body {
background-color: hsl(217, 54%, 11%);
/* padding: 100px; */
font-family: 'Outfit';
margin: 0; /* reset */
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px; /* Separate the main from the footer */
}
Is the centering and responsiveness well done?
📌 Some accessibility and semantics recommendations for your HTML
<div class="container"> to a <main class="container"> and the <div class="attribution"> to a <footer class="attribution">attribution should go outside the main📌 Some suggestions
padding to generate interior space on your card. This prevents you from using margin or padding on child elements to achieve the same resultmin-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens. For example, use min-height: 100vh instead of height: 100vhmax-width: 100% to your img so that it occupies the correct width within the containerimg of the banner does not occupy the corresponding width because you applied a height: 370px, at least on desktop screens, this causes the borders to not be seen correctly. To solve it, you could leave the height: auto, add max-width: 100%margin to center your content in the center of the screen, you can use the flexbox properties in the body:body {
background-color: rgb(223, 223, 237);
/* margin: 15% auto 15% auto; */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px; /* Separate the main from the footer */
}
card class:.card {
min-height: 400px;
max-width: 320px;
padding: 16px;
text-align: center;
background-color: white;
box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
}
h4 {
/* padding: 0 10px 0 10px; */
margin-block: 15px;
color: rgb(18, 18, 77);
font-weight: bold;
font-size: 23px;
}
Greetings! you have done a great job 😎
📌 Some accessibility and semantics recommendations for your HTML
<div class="container"> to a <main class="container"> and the <div class="attribution"> to a <footer class="attribution">min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens. For example, use min-height: 100vh instead of height: 100vhreset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsersreset CSS and the box-sizing: border-boxdisplay: block to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements