Skip to content
OverviewSolutions
10
Comments
18
Cacti
@nottohave

All comments

  • Rolando•60
    @rolando-17Submitted over 2 years ago

    Me falta por agregar para que fuera adaptable para los dispositivos móviles pero de ahí en adelante hice todo lo demás que se me pidió en el reto.

    Web Card using CSS

    1
    Cacti•390
    @nottohavePosted over 2 years ago

    Hola Rolando, como estas? Nice work on completing the challenge. I tested your solution on my laptop. The design can look better on a range of screen sizes if you can make these improvements:

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

.contenedor { display: flex; width: 1000px; height: 400px; }

/* Keep these in your tarj, remove the rest */
.tarj_principal {
 border-radius: 15px; background-color: #1C1938; display: flex;
}

/* I'm skipping the next blocks of code */
/* for .tarj_text2 and text_final { remove position absolute and bottom: 250px } Try margin-top and margin-bottom. Read more on margin MDN */

.imagen01 {
 /* Update and keep these: border-radius: 15px; background-size: cover; height: 100%; width: 450px; display: flex; justify-content: flex-end */
}
.imagen01 img { /* just change width & height: 100% */ }
    • For semantic HTML, you can change h5 to p. Wrap h2 and p in <section> instead of repeatedly using div.

    Try these on and let me know how the desktop design looks. I hope it removes the extra paddings, place the right image on full height and give you more control on the text position. Let me know if they don't work out for you. I hope you can get more feedback to improve.

    Keep it up! Nice work!

    Marked as helpful
    0
  • Cacti•390
    @nottohavePosted over 2 years ago

    Hey @Sebastian, your solution looks pretty good! The website is responsive to all range of screen sizes and the layout as well. Your code is also easy to read. It has semantic HTML. Everything looks great from my end. I think you can improve by constructing a throughout README using frontendmentor template. It can definitely improve your skill on writing documentation. Keep up the great work!

    Marked as helpful
    1
  • Caio de Alcantara Santos•250
    @caio-alcantaraSubmitted over 2 years ago

    Had some hard time doing this. The mobile part was really easy and managed to do it quite quickly. However, the desktop layout gave me a lot of headache (maybe because I'm still not so familiar with CSS GRID). Basically, I couldn't make the cards in the 2nd row to be the same size, so I had to do a lot of work around to make that happen, and I fell I did it the worst way possible. Can someone tell me why did that happen? While using the grid layout, I did set 4 columns with same width, but looking into dev tools, the first two columns were much smaller than the others. Was this happening because of the card-2 width?

    Single price grid using CSS Grid / Mobile-first

    1
    Cacti•390
    @nottohavePosted over 2 years ago

    Hi Caio De Alcantara, great work on finishing the challenge. I tested the responsiveness and it looked good on Mobile and Desktop. For your grid concern on Desktop view, you should redefine :

    • the grid-template ... to grid-template-colums: (repeat(2, 22rem));
    • grid-template-areas: "card1 card1" "card2 card3" "card4 card4";
    • Remove grid-column and grid row start in .card1 . card2 .card3
    • change .card3 {grid-area: card2} to card3

    You can test this on the Dev tools before changing your code to see how it works.

    Let me know if this helps :D Have a great one.

    Marked as helpful
    0
  • Cacti•390
    @nottohavePosted over 2 years ago

    Hi Sebastian, the website looks great on my devices. It is responsive and has great layout. Your index file has semantic HTML. The code is well-structured and readable. I think there are a couple of improvements you can make, let me know if they help you:

    • In larger screen, you can add more padding to the logo on the top : header img {margin: 45px 0px}. This is just a preference, you can use a different unit if needed to.
    • For the error label, there is another approach instead of using JS DOM. You can take a look at this video class list. I hope it will give you an idea of creating a class in Style file. Then you use your JS email validation to add and remove the Class List. This is to display and remove the error label. This method is a lot more simplified and versatile.

    Have a great weekend, and let me know if these tips help you. Thank you :D

    Marked as helpful
    1
  • Cacti•390
    @nottohavePosted over 2 years ago

    Hey superset1607, nice work on completing the profile card challenge. I think I have found the solution to your background. In you CSS code, you should add another background, adjust background-position and let me know if it works.

    /* Add your desired background color to the page. I used Yellow as a preference.*/
html {
    background-color: lightyellow; 
}

/* Add your circles and position them */
body {
  background-image: url(./Assets/images/bg-pattern-top.svg), **url(./Assets/images/bg-pattern-bottom.svg)** ;
   background-position: right 50vw bottom 40vh, left 50vw top 50vh;
   background-repeat: no-repeat;
}

    Credits:

    Let me know if this helps :)

    1
  • Gamel Ayodele•410
    @gamelayoSubmitted over 2 years ago

    I will really appreciate any feedback and correction

    flex-box

    1
    Cacti•390
    @nottohavePosted over 2 years ago

    Hi Gamel Ayodele, I am unsure what you want to have feedbacks on? I took a look at your website and I have a few suggestion about your web design.

    1. You may want to use border-radius to round corner. You can read it here border-radius.

    2. Try line-height on your paragraphs. line height

    Let me know if it helps. Have a great one!

    0
  • shan1y•190
    @shan1ySubmitted over 2 years ago

    Feedback welcomed, especially on the transition on desktop design. Had a tough time with adding the triangle and unsure how to properly sync the transitions. Looking forward to seeing others' solutions for this one.

    Article Furniture Challenge

    1
    Cacti•390
    @nottohavePosted over 2 years ago

    Hello @shan1y, congratulation on finishing this project. For this concern on the transition on desktop design, you can move this part

    display: flex;
justify-content: center;
align-items: center;

    to the body at media query 768px.

    • For your triangle at the same media query, .triangle-down.clicked { right: 0%;} . Let me know if this helps.
    0
  • Gabriel Felonta De Oliveira•300
    @felontaSubmitted over 2 years ago

    I did all the desktop layout and I didn't have any big problems or doubts, but when I went to do the mediaquery I had a problem that I couldn't solve, for some reason it's creating a white margin on the right, thanks in advance for all the feedback.

    Base Apparel

    1
    Cacti•390
    @nottohavePosted over 2 years ago

    Hello @felonta, Congratulation on completing this challenge. Everything looks great on my devices. I tried to find white margin you mentioned but I do not see them. Maybe it has been updated? Everything seems perfecto!

    Marked as helpful
    0
  • Cacti•390
    @nottohavePosted over 2 years ago

    Hello @nyrellcl, for mobile view, I hope this helps you out with your trouble. Using flex is easier. I just use display flex and justify content: start / end to position the items. Let me know if this helps:

    HTML Structure
<div class="ham-container">
<a class="sunny> 
<div id="ham-icon">

/* For Mobile */
CSS
.ham-container { 
  width: 100%;
  padding: 1rem 0 0 1rem;
  display: flex;
  justify-content: space-between;
}

.sunny {
  display: flex;
  /* I keep the rest of your code the same as github */
}

#ham-icon {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  margin-right: 1rem;
}

/* For desktop CSS media query */
.sunny {
  width: 100%;
}

.ham-container {
  display: none;
}
    Marked as helpful
    1
  • Sheldon Fam•160
    @SheldonFamSubmitted over 2 years ago

    Hi all,

    Kindly please let me know if I have any mistake/improvement on this solution. Any comment is welcome as I want to improve my coding skills.

    Thank you and Happy Coding!😀

    Profile Card Component using HTML&CSS

    1
    Cacti•390
    @nottohavePosted over 2 years ago

    Hello @SheldonFam, congratulation on finishing this easy challenge. For feedback, I strongly recommend to build a good README file after you finish your project. That way people know who you are and see what you learnt throughout your days. It builds trust as well. Anyways for the project, it looks really good on my devices. Instead of using div in your html file, try using section on area with heading and paragraph. This is for the semantic html. It will make your code readable. You can also add comments on your css file to explain what the box and box p are. I just want to add more clarity into your code. I hope this feedback helps you. Let me know if that does not. Have a great one.

    Marked as helpful
    0
  • Cacti•390
    @nottohavePosted over 2 years ago

    Hello @JayDeeZzz, great work on completing this challenge. For feedback, I think you should take a look at the footer at screen size 768px. The Newsletter area and the attribution are bit off because they take the whole space horizontally. For the overall html semantic, if you can use section for area with heading and paragraph then use them. I personally think it is more readable than using div. Finally, I hope you get more feedback for this project. Have a great one.

    Marked as helpful
    0
  • Cacti•390
    @nottohavePosted over 2 years ago

    Hey @shawky55, your project looks great. You may want to consider using rem instead of px because px is fixed size and it will reset every browser's size when people visit your site. Congrat on finishing this.

    0