Skip to content
OverviewSolutions
33
Comments
17
Saul Gustavo A. S.
@saul-gustavo

All comments

  • Saul Gustavo A. S.•630
    @saul-gustavoPosted 2 days ago

    Hello, I saw your code and I understand what you did, I recommend that you use a main with a div.container that contains the cards, and to center the content and have an appropriate width, put a max-width to the body and a display flex to center the cards:

    body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}

    Good job!! Happy Coding!!

    0
  • Saul Gustavo A. S.•630
    @saul-gustavoPosted 3 days ago

    Good job!!

    0
  • hkaur108•100
    @hkaur108Submitted 3 days ago
    What are you most proud of, and what would you do differently next time?

    I learned to use Jquery via this project and next time I will try to dig deeper into Jquery to further improve my skills.

    What challenges did you encounter, and how did you overcome them?

    I facing alot of troubled with creating the blue bottom for the smaller screen sized but it eventually I was also to solve it by creating two different divs for smaller and wider screens and the styling them differently.

    What specific areas of your project would you like help with?

    Any kind of feedback is useful, it is just that I face alot of trouble with adjusting font size , I think there is something up with the text size setting of my browser because when I make changes in the font size I do not see any differnce hence I do not know how the fonts will appear on others screen.

    Responsive article preview component

    1
    Saul Gustavo A. S.•630
    @saul-gustavoPosted 3 days ago

    Hello, I saw your code and it is understandable what you did, but I recommend that you center the body, so that it looks like the design image, to do that you can use the following CSS3 properties.

    body {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

.main-container {
width: 100%;
max-width: 600px;
display: flex or grid for 2 sections of card;
}

    I also recommend that you see the solutions of other users so that you can see how to solve it or better understand how each CSS3 property works, very good job!

    Happy Coding!

    Marked as helpful
    0
  • Marvel123g•50
    @Marvel123gSubmitted 3 days ago
    What are you most proud of, and what would you do differently next time?

    Am proud of myself because frontend mentor has helped me alot to improve in my coding career

    Blog

    1
    Saul Gustavo A. S.•630
    @saul-gustavoPosted 3 days ago

    Hello, I saw your code and it is understandable what you did, but I recommend that you center the div.blog, so that it looks like the design image, to do that you can use the following CSS3 properties.

    
body {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

    Happy Coding!!

    Marked as helpful
    0
  • Saul Gustavo A. S.•630
    @saul-gustavoPosted 13 days ago

    Hello, I saw your code and I understand what you were trying to do, I recommend that you do not put html and body twice, since these will be modified, what I recommend is that you put the display flex properties in the body, so the display will be centered. container:

    Like this:

    .container {
     width: 100%;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
}

    For the main-container, do not give it a height, as it will be centered and look bad. I recommend that you put padding in px, rem, em, so that it can look like the design image

    .main-container{
    width: 100%
    padding: 1rem;
    border-radius: 10px;
}

    Practice a lot, good job!! Happy Code!!

    Marked as helpful
    0
  • Saul Gustavo A. S.•630
    @saul-gustavoPosted 14 days ago

    Hola, revise tu código html y css y se entiende lo que intentaste hacer, pero te recomiendo que para tener un diseño como el de la imagen, uses CSS Grid Áreas, con estas podrás poner cada card en una posición especifica para que te de un buen diseño.

    Aqui te doy un ejemplo:

    .container {
    width: 100%;
    max-width: 1100px;
    display: grid;  
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas: 
    "card-one card-one card-two card-three"
    "card-four card-five card-five card-three";
    gap: 20px;
}

    Lo anterior me funciono a mi, su gustas puedes ver mi solución para este desafió.

    ¡Buen trabajo amigo!

    Marked as helpful
    0
  • Eder Procopio•30
    @EderProcopioSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    As my first solo project on Frontend Mentor, I found it quite satisfying. I had some issues using Flexbox because, along with Grid, it’s exactly what I’m studying at the moment. However, it wasn't too difficult to achieve the desired result. In the next challenges, I will try to use Grid as well.

    What challenges did you encounter, and how did you overcome them?

    Centering the components was the challenge of this first project. I would rate it as a 5/10 difficulty. Getting the correct dimensions without using Figma was the biggest challenge.

    What specific areas of your project would you like help with?

    The part where I had to refer to my notes was the positioning of the elements using Flexbox.

    QR code component using CSS flexbox

    1
    Saul Gustavo A. S.•630
    @saul-gustavoPosted 18 days ago

    Good work!!

    Marked as helpful
    0
  • Saul Gustavo A. S.•630
    @saul-gustavoPosted about 2 months ago

    Hello, I saw your html and css code and it looks very good, it is understandable when reading it.

    Good job!

    0
  • Enrique Farias•100
    @EnrikeOmarFariasSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Hola! ahora si pude subir el archivo para que se vea correctamente en sitio, disculpen

    What challenges did you encounter, and how did you overcome them?

    Mi desafío fue centrar los elementos y que cambio la imagen de acuerdo a la pantalla en la que se este viendo la pagina

    What specific areas of your project would you like help with?

    Centrar los elementos

    Tarjeta de vista previa de producto

    2
    Saul Gustavo A. S.•630
    @saul-gustavoPosted about 2 months ago

    Hola vi tu código y se entiende lo que querías hacer, te sugiero que pongas los media querys en el mismo archivo css, así será más fácil de leer tu código, También te recomiendo que para centrar adecuadamente un container, en este caso el main principal, uses lo siguiente:

    .contenedor-principal {
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
  min-height: 100vh;
}

    Esto hará que el main se centre de manera adecuada, y en el .contenedor-secundario, puedes usar lo siguiente:

    .contenedor-secundario {
  width: 100%;
  max-width: 500px;
}

    Esto hará que el contenedor abarque el 100% pero que no pase de los 500px, puedes usar más pixeles para darle la forma adecuada como esta en la imagen del diseño.

    También te recomiendo mucho que veas otras soluciones dentro de la plataforma de frontendmentor para que te des una idea de como hacer los diferentes desafios.

    ¡Happy Coding!

    Marked as helpful
    0
  • j124klo•40
    @j124kloSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I made good looking side. I even added this small blinking animation. Next time i would try to make better text (when you open the page on a phopne, h1 gets folded into next line instead of decreasing font size to ajust).

    What challenges did you encounter, and how did you overcome them?

    I had to learn how to use "@font-face".

    What specific areas of your project would you like help with?

    How can i make my code look more professional.

    My-Frontend-Mentor-Blog-preview-card-project

    1
    Saul Gustavo A. S.•630
    @saul-gustavoPosted about 2 months ago

    Hello, I saw your html and css code and it is clear what you wanted to do, I recommend using the following:

    *, *::before ,*::after {
      margin: 0; 
      padding: 0;  
      box-sizing: border-box; 
}

    this way you will eliminate all the margins and padding by default, in the animation section you can only put a hover effect on the text, like this:

    text:hover {color: yellow;}
    1
  • Giovanna Garavaglia•170
    @giovannagaravagliaSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    To be honest, it was my first time coding javascript. The code is not perfect and I wanna do this challenge again next month and do better

    Newsletter with sign up

    1
    Saul Gustavo A. S.•630
    @saul-gustavoPosted 2 months ago

    Hello, I saw your HTML and CSS code, and it’s clear what you did. I checked the JS code and noticed you use a lot of functions and variables. I highly recommend you check out other solutions here on the Frontend Mentor platform, so you can get an idea of how to better structure your code and follow good practices. In this challenge, I used an addEventListener to submit the email from the form. You can take a look at my solution to get an idea of how to implement the code.

    Happy coding!!

    0
  • Enrique Farias•100
    @EnrikeOmarFariasSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Hola! se que me falta mucho por aprender para optimizar el sitio pero queria compartir el grado de avance que voy teniendo, gracias

    What challenges did you encounter, and how did you overcome them?

    Al principio me costo todo pero como veran me falta ajustar para que quede centrado el qr

    Primer desafío

    1
    Saul Gustavo A. S.•630
    @saul-gustavoPosted 3 months ago

    Hola, vi tu código y se entiende lo que querías hacer, pero te recomiendo que para centrar este único elemento del proyecto uses flexbox en el body, con un min-height de 100vh y con eso se pondrá en el centro. Tu puedes, practica constantemente, ve otras soluciones aquí en la plataforma, te darás una idea de como puedes mejorar cuando hagas otro desafió.

    ¡Mucha suerte, Happy Code!

    0