jeepitou• 35
@jeepitou
Submitted
First time doing this! Can I get some tips on how to improve?
What was the best way to apply a color filter on the picture? I'm not too satisfied with how it ended up.
Yudi Yoshida
@yudiyoshida
All comments
- Yudi Yoshida• 350
@yudiyoshida
Posted
Hey, jeepitou, how are you?
Your project look good, congratulations!
I would only suggest to set some max-width to the div.main-component, so it won't look too wide in some screen dimensions.
I'm sorry about my english, I'm still learning and I hope that I've helped you in some way.
Keep coding!
1 I have been self-learing HTML and CSS since May 2021 and I want to become a developer, so any constructive criticism is welcome.
Also, in Chrome there is a cyan border around the top-half of the profile-image, but there is not in Firefox. Can anybody tell me why that is?
Yudi Yoshida• 350@yudiyoshida
Posted
Hey, royschrauwen, how are you?
Your project looks perfect, congratulations! You're studying for only a month and you've made a nice work!
Keep coding!
0- Jean• 335
@JeanMieses
Submitted
OK, this one was fun to do! Any feedback, I would appreciate it.
Yudi Yoshida• 350@yudiyoshida
Posted
Hey, JeanMieses, how you doing?
Your project looks good, congratulations.
I would only suggest to set some border-radius in the cards, so it will look exactly the same as the original.
Kepp coding!
0 - Andres Del Rio• 10
@delrio12
Submitted
Hey!
This was my first challenge, I was wondering if someone can recommend a tool to get all mesures, font styles, etc, from the images provided on the free version. I was thinking about paying for the PRO version but not sure yet, can anyone share their experience with the PRO version? Thank you!
Yudi Yoshida• 350@yudiyoshida
Posted
Hey, delrio12, how are you? Nice work on your project! it looks good! Congratulations.
So, I've been using two Google Chrome tools. The first one is to capture colors from other websites. Its name is ColorZilla. The other one is to get font styles: Fonts Ninja.
I'm sorry about my english, I'm still learning and I hope that I've helped you in some way.
Keep coding!
0 - Sintaxis Dev• 50
@SintaxisDev
Submitted
I know I can do it with less code! All comments are well received! :D
Yudi Yoshida• 350@yudiyoshida
Posted
Hey, SintaxisDev, how are you?
Your project looks perfect, Congratulations!!
Keep coding!
0 - Tony Tang• 215
@FMcoding
Submitted
Any feedbacks are appreciated :)
Yudi Yoshida• 350@yudiyoshida
Posted
Hey, Tony, how are you?
Your project looks good, congratulations! However, there's some screen dimensions that it's not possible to see the column's button (specifically 600 width).
I would recommend using more media queries, so your project will look more responsive in all dimensions. Sorry about my english, I'm still learning and I hope that I've helped you in some way.
Keep coding!
1 - Ernesto• 35
@ernestoK-2000
Submitted
Want to know where can I learn css animation tricks and patterns and which ones are applicable for this project. Also I'm open to critisism in order to improve.
Yudi Yoshida• 350@yudiyoshida
Posted
Hey, Ernesto, how are you?
So, you can learn more about css animation in this link: https://css-tricks.com/almanac/properties/a/animation/
Keep coding!!
1 - Vitor Lacerda• 150
@vitorlfaria
Submitted
Would be happy to hear your feedback. Give me your opinion if you think is something that i should start doing to improve my codes.
Yudi Yoshida• 350@yudiyoshida
Posted
Ficou toppp! Parabéns, Vitor!
1 - Paulo Castro• 45
@Dikkas
Submitted
Better Way to use an image and color together?
Yudi Yoshida• 350@yudiyoshida
Posted
Your project is perfect, really responsive! Congrats!
0 - Benjo Quilario• 1,810
@benjoquilario
Submitted
Beginner here! Love to hear your feedback and suggestion.
Yudi Yoshida• 350@yudiyoshida
Posted
Hey! Your project is perfect! Congrats!
Keep coding!
0 - Bhremada Fevreano• 1,395
@boedegoat
Submitted
Hi, this is my new work using CSS Flexbox Any feedback would be really appreciated. Thank you 😀
Yudi Yoshida• 350@yudiyoshida
Posted
Hey, how are you? Your project is perfect! Congratulations!
1 - Vitor Lacerda• 150
@vitorlfaria
Submitted
Would be happy to hear your feedback!!
Yudi Yoshida• 350@yudiyoshida
Posted
Hey Vitor, como vai? Seu projeto ficou muito bom, parabéns!
Porém, em algumas dimensões de telas não foi possível enxergar todo o conteúdo... talvez seria uma boa ideia adicionar mais media queries.
Keep coding! :D
1 - minthing• 145
@minthing
Submitted
Any feedback appreciated! 🙏 thanks! :)
Yudi Yoshida• 350@yudiyoshida
Posted
Nice Work!!!
0 - Edy• 530
@Evanny
Submitted
Any feedback is welcome
Yudi Yoshida• 350@yudiyoshida
Posted
Hey, how are you? Your project looks good, congratulations!
The only very minor thing I suggest is to set a min-width to div.container-profile-card' element. This way your card will not shrink in other screen dimensions.
I'm sorry abouy my english, I'm still learning and I hope that I've helped you in some way.
Keep coding!
1 - I'm Fabra• 160
@imfabra
Submitted
I learned several properties with this exercise, in the end I was satisfied with the result. I will read any comments with pleasure.
Yudi Yoshida• 350@yudiyoshida
Posted
Nice work! Your project looks perfect
1 - Subham Verma• 30
@Subhamverma2407
Submitted
Designed with a mobile-first approach. Go through the site once. Suggestions are highly appreciated.
Yudi Yoshida• 350@yudiyoshida
Posted
Nice work!
0 - sharipov1717• 40
@Homidjon
Submitted
This was my second challenge. I am a beginner and it took for me 2 hours to complete. I really want if you give me feedback, because I am a beginner and I might do something wrong. Thanks in advance
Yudi Yoshida• 350@yudiyoshida
Posted
Your project looks perfect! Congratulations!
0 - Leon• 30
@valdes91
Submitted
When moving to desktop layout and changing the cards display to flex, the image's height automatically set itself to 0. I found a way to fix this but can't help feel like its a janky solution. Any other approaches I could have taken?
Any constructive feedback appreciated.
Yudi Yoshida• 350@yudiyoshida
Posted
Hey, how are you?
I had the same problem, and I got really confused when this happened hahah. Another way to fix this is: Instead of setting the image as background, you can set as a child element from 'div.image-side'.
Maybe this is not the best way, because I'm not a expert front end developer, but I hope that I've helped you.
Sorry about my english, I'm still learning. Keep coding!
0 - Chris Rumler• 80
@crumler
Submitted
I am not confident that I went about utilizing the images properly. As I shrink and grow the browser window, the images shrink and grow with the size of the browser. I do not believe that is optimal, but I am unsure how to correct it (if it truly is not optimal).
I also have issue with how the buttons shift unevenly with each other when the browser window shrinks and grows at certain breakpoints. But, again, I'm unsure how to address that.
Yudi Yoshida• 350@yudiyoshida
Posted
Hello, Chris! Congrats about your project! It looks great!
Well, I think that I can give you some tips about your issues... About the images, they are growing because you made the 'auto-container' div be displayed as flexbox. All flex items will try to have width 100%, which explains why the images keep growing.
And you can keep all buttons in the same level setting them as 'position absolute' and using the bottom property.
Maybe I said something wrong, because I'm not a expert front end developer, but I hope I helped you in some way.
Sorry about my english, I'm still learning. Keep coding!
1 - NotAmar• 30
@NotAmar
Submitted
feedback is appreciated.
Yudi Yoshida• 350@yudiyoshida
Posted
Nice work!
1 - Jorge Calderon• 35
@JC-d3v
Submitted
I am learning and all your feedback it's great. Thanks, JC-D<3
Yudi Yoshida• 350@yudiyoshida
Posted
Nice work! Your project looks perfect! :D Keep coding.
0 - Hugh• 55
@hugh128
Submitted
I use CSS Grid to create the card with a fluid width columns that break into more or less columns as space is available. I used this to make it: grid-template-columns: repeat (auto-fit, minmax (250px, 1fr)).
That works great, but when the columns get smaller the paragraphs of the cards need more lines to fit in the width of the column causing the buttons to go down and, as not all the paragraphs of the cards have the same amount of words, the buttons go down at different points and they look misaligned when that happens.
I tried to solve it by subtracting the padding I gave the paragraphs so that the buttons are aligned again using media query at the points where the buttons are misaligned (at least up to a width greater than 862px). My question is: is there a way to solve this "problem", and if there is, what would be the best way to do it?
Edit: problem solved using absolute position on buttons. Thank you @yudiyoshida for your comment and suggestion.
Yudi Yoshida• 350@yudiyoshida
Posted
Wow, I didn't know about the minmax function! I'll try to use it on my next project :D
About your problem, I made the buttons 'position = absolute' and then positioned them with bottom = ""px (you can check my project if you have any doubt). It's important to set the article tags as relative, because absolute elements will only be positioned relative to an element that does not have a static position.
I hope I explained well, sorry about my english :p
1 - Shibu Sarkar• 625
@shibuwd
Submitted
I appreciate any kind of feedback. Please feel free to give me any advice to improve my code.
Yudi Yoshida• 350@yudiyoshida
Posted
Nice work!
0 @fabiofigrod
Submitted
What is the best way to apply the color overlay effect to the image?
Yudi Yoshida• 350@yudiyoshida
Posted
You can also apply an overlay this way:
HTML: <div class="container-with-background-img"> <div class="overlay"></div> ... </div> CSS: .container-with-background-img { background-image: url("..."); position: relative; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.6; }0
