What challenges did you encounter, and how did you overcome them?
I really struggle with image as background, taking 100% of the screen, while having a padding.
@Rohloffmeister
What challenges did you encounter, and how did you overcome them?
I really struggle with image as background, taking 100% of the screen, while having a padding.
@Rohloffmeister
Posted
Hi, Your Website looks good so far. To start with your problem you could try putting the footer outside of your <main> (this also helps with accessibility. If you want to know more google "HTML Semantic Elements"). I also saw that the 4 images can get pretty big. I personally would use the grid property.
/* Dekstop and Tablet*/
.img-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.img-grid img{
width: 15wv;
}
/* Tablet */
.img-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.img-grid img{
width: 22wv;
}
/* Mobile */
.img-grid {
display: grid;
grid-template: repeat(2, 1fr) / repeat(2, 1fr);
}
.img-grid img{
width:40wv;
}
Thats how i did it. I hope this helped you a bit.
Marked as helpful
@Rohloffmeister
Posted
Looks very good so far. I personaly would've added another media query(between 500px width and 1000 px width), because the boxes get really thin when you have a thin screen over 500px wide.
@Citycod
Submitted
What are you most proud of, and what would you do differently next time?
i would love to research more.
What challenges did you encounter, and how did you overcome them?
i had issues doing the four card in different positions.
@Rohloffmeister
Posted
That looks very good. I dont really know what could be improved. I personly would limit the width of the cards so they dont stretch so much.
Marked as helpful
@Muhammad-Taus
Submitted
@Rohloffmeister
Posted
Looks very good. I dont see any problems.
Marked as helpful
@Rohloffmeister
Posted
Looks pretty good. Only thing i can say is that you should probably size everything up since the text is barely readable without zooming.
@santhoshjavascript
Submitted
@Rohloffmeister
Posted
Looks good so far. You could play around with the "font-weight:" to get the font thinner for the "Front-end developer..." part and maybe add a border radius to the buttons.
@santhoshjavascript
Submitted
@Rohloffmeister
Posted
Looks very good. I personaly would make the border 1px thick and I think you forgot to implement the hover state for the "HTML & CSS foundations". If you dont know what i mean look at the picture in the design folder (design/active-states.jpg). If you dont know how to do that yet maybe google for "CSS :hover".
@dhiaa-zer
Submitted
@Rohloffmeister
Posted
Looks pretty good. Only thing i saw i that the text can get pretty small on big and wide screen (iPad Pro 1024x1366) And there are some empty lines in the myText class selector
.mytext{
flex: 1;
padding: 8px;
}