@adetona54
Submitted
All feedbacks are welcome
Looking to hire developers?
@doganfurkan
@adetona54
Submitted
All feedbacks are welcome
@doganfurkan
Posted
Hey, good job! My suggestions would be:
I think if you handle those, you're going to end up with an excellent job.
Marked as helpful
@Great-kiola
Submitted
@doganfurkan
Posted
Hey, congrats! This is a very good job. I want to help you with one thing, though: Your "Bookmark" button. Your icon there isn't aligned with the button.
I think these will solve the issue. And again, good job!
Marked as helpful
@dipakpadule
Submitted
@doganfurkan
Posted
Good work, but still need some fixes as anything isn't perfect:
Congrats
Marked as helpful
@Musstah
Submitted
Hi all!
This is my first attempt to the first challenge on "frontendmentor.io". I have just started learning WEB development, any feedback will be appreciated.
@doganfurkan
Posted
Wow, have you really "just" started learning web development? This is pretty darn good for a starter. Just a couple of things here:
text-transform: uppercase
in your CSS.<img/>
tag. You can add vertical-align: bottom
to your CSS to get rid of that irritating gap.Apart from all that, it is mind-boggling that you just achieved this as a beginner. Huge Respect!
Marked as helpful
@iEarlG
Submitted
Hello everyone! 👋
I'm out for a week because of a mentorship 😅 I learned a lot but at the same time I can't get over about this challenge. I finished the 3-column preview card component! It felt amazing to complete my 1st challenge this month <3.
What did you find difficult while building the project?
height & width
on the desktop is not the same from the challenge it seems too small I guess? any feedback to fix this I would really appreciate it <3Which areas of your code are you unsure of?
height & width
on the desktop side is not the same from the challenge it seems too small I guess?Do you have any questions about best practices?
Happy weekend coding, guys!! 👨💻💙
@doganfurkan
Posted
Hello! Good job, congrats! Here are some quick fixes that you can do:
.container{max-width:1000px}
you can restrict the maximum width of the design.align-items: center
for your container. This results in each container having different widths. It is not the most pleasing thing to see. Just get rid of that and let them have 100% width of the container.margin-top
for the desktop view.Again, good job! Keep coding!
Marked as helpful
@dariuss1123
Submitted
This is my take for this challenge. I've used HTML, CSS and JavScript. I used random numbers for the values but i didn't managed to link the button. Any suggestions for this or anything else are welcome. Also i used media query for the mobile version using a mobile-first approach.
@doganfurkan
Posted
Hello there! You did a good job, congrats! I've some suggestions though:
width: 50% (for example); aspect-ratio:1
styling. Aspect-ratio makes the height and width equal.justify-content: center
you can have them centered. Also, get rid of that <br/>
tag to adjust the gap.width:100%
for mobile and increase the padding.I think just those can make a big difference in appearance.
Have fun building!
Marked as helpful
@Raghda19
Submitted
Any feedback is welcome thanks in advance
@doganfurkan
Posted
I advise you to have a look at:
display: grid;
grid-template: "here-comes-this here-comes-that"; // that's just a random example
grid-area: "here-comes-this";
These kinds of designs are better done with grid rather than flex. I believe that once you do it with grid, your design will be a lot more similar.
@razeeth11
Submitted
@doganfurkan
Posted
One quick fix would be giving max-width to the main content div instead of the left content div. You see, you have a huge gap between the "The Bright Future of Web 3.0" and "New" sections. If you change the element that has max-width, it should fix that.
Also, it doesn't appear like your solution has the features to be tagged as "#jss #preact #react-query #solid-js #material-ui". I would recommend using true tags. It's not changing anything, but that would be more accurate.
@frkanyilmaz2
Submitted
Hello there, I've tried to make this responsive with react. When I lower the screen height my top element goes beyond the border and I can't scroll to see what's there. How can I solve this?
In summary section I mapped through data.json to list the results. But in order to change both text color and background color I put two more properties inside data.json as color and bg-color. And in <li> I put them inside style attribute. My second question is; What kind of logic should I implement to use right colors without altering data.json?
@doganfurkan
Posted
Adaşım merhaba, işimi kolaylaştırdığı için direkt Türkçe yazacağım. (If you don't know Turkish let me know). Öncelikle mobil görünüm için container'ının position: absolute'a, kesin height ve width'e, transform'a ihtiyacı yok. width:100% height:auto; işini görecektir. Bu düzenleme üst kısımda görülemeyen "Your Result" yazısını ekranın içine almaya yetmeli.
Renkler konusunda da React'tan faydalanbilirsin. Eğer summary'deki her bir li'yi (ki ben olsam div kullanırdım) bir component haline getirip json'dan aldığın veri sayısında componenti yazdırırsan ve de component'e rengi props olarak geçersen arkaplanda aynı rengin saydamlaştırılmış halini, yazıda da rengin kendisini kullanabilirsin.
Bunların dışında birkaç renk ve boyut hataların bulunuyor.
Umarım karışık olmamıştır. Yaptığın iş için tebrik ederim. Eğer yorumum sana yardımcı olduysa "Mark as useful" dersen memnun kalırım. Kolay gelsin!
@KristianJ1
Submitted
i found it kinda tricky, used a lot of divs(and that might have been overkill), and a lot of repetitions in the css part, if u have any tips lmk.
@doganfurkan
Posted
I suggest you have a look at flex boxes. You shouldn't be using that much absolute positioning. My page structure would be like this:
<body>
<main id="card">
<section id="result">{Here is where the "Your Result" section going to be}</section>
<section id="summary">{Here is where "Summary" section going to be}</section>
</main>
</body>
And then, I would use flex boxes to position them:
// This container styling positions my card at the center
body{
width:100%;
height:100%;
display: flex;
justify-content: center;
align-items: center;
}
// This card styling makes my Result and Summary section side to side without using absolute positioning
#card{
display: flex;
background:#fff;
box-shadow:3rem 3rem 5rem rgba(0,0,0,0.25);
border-radius: 1rem;
}
This is what I'm suggesting to you to kick off your flexbox knowledge. If you want to learn more about flexbox, you can click here But if you want to see how my structure would work in real life, I also completed this challenge, and you can have a look at it by clicking here
You are off to a good start, I'm sure you can develop your knowledge by doing projects like this. If you have any further questions, I will be happy to help.
At last, I would appreciate it if you find and mark my comment as useful.
Marked as helpful
@AlvinSetyaPranata
Submitted
The problems that i encounter are:
how can i shrink the gap space inside of my container that does look like in design?
@doganfurkan
Posted
Your h2 and p elements have their default margins. You can see default values here: w3schools They are the reason there is a gap there. You can give them a margin of 0.
A little tip for me is to start styling with cleaning default alignments. You can use *{ margin:0; padding:0; box-sizing: border-box; }
to get rid of default alignments
@sirbiel100
Submitted
Every feedback is very Welcomed!
@doganfurkan
Posted
Firstly congrats, I think I've got some feedbacks for you:
@ArmsAndArrows
Submitted
Is there any better idea for closing animation than toggling a class with backward animation and set timeout to display none after?
@doganfurkan
Posted
I think you did great with styling and most of the things. I've just one complaint: I think your menu animation is slow and irritating. There is some shadow thing going on there, but when it is fully open, shadow isn't detectable. I think you don't even need that. And please make that faster.
@Cyclone3603
Submitted
I couldn't figure out how to make this one responsive. Any ideas?
@doganfurkan
Posted
You should start using @media in your CSS to build responsive websites. Here is w3schools link for @media for you to start learning: @media rule. Using media queries for min-width (or max-width) of screen gives you the freedom to change elements for mobile and desktop solutions.
Other than responsivity, I think you can use the flex-box better. You have #productReviewHolder, and it is a flexbox, but you set a width and height for it. Why? It is flexible unless you set width and height for it. Give it a "max-width" and let the height be flexible.
I also recently did this challenge. If you want to have a look at my solution and see the way i handled it, here is the link: Responsive Product Preview Card
Keep up the hard work!
@cherylli
Submitted
NextUI and the new Next.js app structures are still in beta, there are a few things I couldn't work out or just not working.
There are also a lot of warnings with NextUI.
@doganfurkan
Posted
Love it! Congrats. It's fast, fluent, and good-looking. There are just 2 things I want to mention as "could be"s : why isn't the source line a link? And why pressing on "synonyms" doesn't make a new search? Other than these, it's good work, for sure.
Marked as helpful