Frontend Mentor | tortaruga's profile

Latest comments

AmIKamil•140
@AmIKamil
Submitted 4 months ago
What are you most proud of, and what would you do differently next time?
I am proud that this web may be open on phones too It is not perfect, but I am still a newbie in responsive web dev I am glad that I have learned how to add fonts directly from files and not from a web And finally, I am quite good at centring elements :)
What challenges did you encounter, and how did you overcome them?
Centring img in a card was bit challenging but I've solved it with some web research and a bunch of practice Also I had to find out how to set correct spaces between paragraphs
What specific areas of your project would you like help with?
Well, please check and advise if I have correctly positioned all items. Additionally, could you advise regarding responsive design? Best wishes from Poland! :)
Flexbox, adding fonts directly form file
2
tortaruga•790
@tortaruga
Posted 4 months ago
Good job! to make even better responsive designs, you can look into media queries, or use relative units like vw so that elements scale according to the viewport's width.

for example, if you want a .card element to be bigger on big screens, you could do something like this:
```
.card {
    width: 20rem;
}
@media screen and (min-width: 600px) {
   .card {
       width: 30vw;
       max-width: 40rem; 
   }
}
```
this ensures that the .card has a width of 20rem on screens smaller than 600px, while for bigger screens the card will have a width of 30% of the viewport's width, and so it will automatically adjust in relation to the screen size, while also ensuring that the card will never be wider than 40rem.
by playing around with different values and combinations you can create a design that looks good on all screens! hope it helped, good luck
FrontendDev•60
@Ali-Learner
Submitted 5 months ago
What are you most proud of, and what would you do differently next time?
Somewhat proud of making the first website. Havent done anything special, only basic html and css
What challenges did you encounter, and how did you overcome them?
Getting used to with the overall process was the difficult part and it can be overcome with practice only
What specific areas of your project would you like help with?
How to perfectly center a div using only html and css nothing advanced?
QR page using basic HTML and CSS
1
tortaruga•790
@tortaruga
Posted 5 months ago
hi! on large screens it looks good, but since your .container has a width of 18% it becomes too narrow on smaller screens.

to center a div in a simple way you can use margin: auto, or you can use flexbox on the parent element:
```
.parent {
display: flex;
justify-content: center;
align-items: center;
}
```
this will center the child element both vertically and horizontally inside of .parent! hope it helps, good luck
Marked as helpful
Ibrahim•30
@Ajibose
Submitted 5 months ago
What are you most proud of, and what would you do differently next time?
i designed it using a mobile first approach. in my next project, i will like to experiment with CSS Grid instead of flexbox for centering and layout control to compare the flexibility and simplicity of each approach.
What challenges did you encounter, and how did you overcome them?
Initially, I struggled to vertically center the .main-container for larger screens. i thought using margin: auto; will automatically center vertically as well but later found out thatit has to have a defined parent height.

Solution: I switched to using Flexbox on the body with align-items: center and justify-content: center, which solved the issue.

i also had issue with knowing the size to use for an average size mobile
What specific areas of your project would you like help with?
Are there better ways to ensure the design remains consistent on even larger screens because i noticed that the design seems a bit off for some screen size

Could I improve how i’ve used media queries to handle responsiveness more efficiently?

Am I following best practices for accessibility? For example, is the alt text in my <img> tag descriptive enough? and are there other things i could add to make the page more accessible
Responsive QR Code Component Design
1
tortaruga•790
@tortaruga
Posted 5 months ago
hi! i think the reason it looks weird on bigger screens is because on screens larger than 768px the width of .main-component is set to 15%, which is a bit small. you can try playing around with other percentage values, or even setting a fixed value like 320px, until you are satisfied with the way it looks. the rest is looking good, keep it up!
MrGankon•10
@MrGankon
Submitted 6 months ago
Social profile links
1
tortaruga•790
@tortaruga
Posted 6 months ago
Good job! The only issue is the image not showing, if you deployed using GitHub you can fix it by adding the image file to the repository (and making sure the src path is correct)
Toyeeb Ambali•10
@Lanzyk11
Submitted 6 months ago
What are you most proud of, and what would you do differently next time?
I am proud of my improvement. learn better ways to style my code.
What challenges did you encounter, and how did you overcome them?
pushing my code to github and i used the internet to overcome them.
What specific areas of your project would you like help with?
how do you style an image with a border-radius
CSS styling for margin
1
tortaruga•790
@tortaruga
Posted 6 months ago
hi! good job on the challenge. to style an image with border-radius you can just use the border-radius property like you would on a div element:
```
img {
border-radius: 15px;
}
```
kensher0•40
@kensher0
Submitted 6 months ago
vs code
2
tortaruga•790
@tortaruga
Posted 6 months ago
hello, congrats on completing the challenge! it looks like there's an issue with the image, i think it's because you didn't add the image file to the github repo
Marked as helpful