Looking to hire developers?
@martinelias1312
@martinelias1312
Submitted
This was one of my longest challenges, i tried to do it all on my own. Mostly i struggled on sending props from one component to other. But anyways, i learned to fetch data, from local json in this case, communicate through components, little bit of typescript...
I am little bit unsure of my components folders layout and i am not sure if i used best practive for scss files layout. (should i use module.scss ?)
Thanks for feedback!
@martinelias1312
Posted
Anyways, first challenge with React !!
@Voqh
Submitted
When working on a small view port, how do you make sure your site will display the same way on a larger view port?
@martinelias1312
Posted
Hello @Voqh,
Media queries are commonly used to code your site on larger viewport. here are two good articles about your question:
Marked as helpful
@WildTsunami
Submitted
I didn't know how to make the :hover with the top image, but otherwise it was pretty simple.
Still taking advices of course, I'm a begginer and want to improve :)
@martinelias1312
Posted
Hello @WildTsunami, look at my solution how i have done it. I started with the variable cyan color and changed its opacity to 50%. (:root section).
One more suggestion:
If you have any questions and don´t understand something from my code, feel free to ask!
Marked as helpful
@SachinShelke7
Submitted
I Completed the Frontend Mentor | Order summary card challenge, if you have any suggestion please suggest.
@martinelias1312
Posted
Hello @SachinShelke7, my few suggestions:
Marked as helpful
@nelsonfleig
Submitted
How would you rate my use of Html tags and naming of css classes?
Do you think my SCSS files are structured properly?
Any general tips?
@martinelias1312
Posted
Hello @Kokopelli84, i have some suggestions. Accessibility issues:
Marked as helpful
@Aryan-ki-codepanti
Submitted
Any feedbacks on webpage are welcome :)
@martinelias1312
Posted
Hello @Aryan-ki-codepanti, my few suggestions:
Anyways good job!
@Old1337
Submitted
as always any feedback is appreciated!
@martinelias1312
Posted
Hello @Old1337, my suggestion isto use <a> element istead of <input>, which is usually used for forms.
Anyways good job on this challenge!
@1Hanif1
Submitted
Used CSS Grid for layout. Added Animations. Used Font Awesome CDN for Icons. vw unit along with max() function for responsiveness. Do give some feedback :)
@martinelias1312
Posted
Great job! Nice responsiveness and animations!
@CEC-IL
Submitted
The cancel order anchor tag doesn't take padding or margin. how should I have handled that better ?? Any suggestions or help will be much appreciated
@martinelias1312
Posted
Hello @CEC-IL,
you have to change anchor element from inline to display: block/inline-block.
Then you can use margin and padding.
Also you should only use <a> element without <button> element.
Another accessibility issues can be fixed like this:
<main> element. E.g. instead of <div class="content"> use <main class="content">.Hope this helps a bit :)
Any feedback appreciated
@martinelias1312
Posted
Hello @Katja721, few suggestions from me:
Hope this will help you on your next challenges!
Marked as helpful
@mustafaalkhiat
Submitted
I dont really understand diffrence between padding and margin, so i use them both. Is there any specific use cases? thank you for answering from now💖💖👍
@martinelias1312
Posted
Hello @mustafaalkhiat, padding is the space between the content and the border, whereas margin is the space outside the border. Recommended aritcle about it here.
Marked as helpful
@Roshan310
Submitted
Hello everyone! This is my first ever self-made project. I'm pretty new to the coding field and this was my first time coding something myself. I was following the tutorial before but not this time. Is there anything specific you would love to see? Please give any feedback you have. Hugely appreciate it.
@martinelias1312
Posted
Hello @Roshan310, accessibility issues can be fixed by:
Marked as helpful
@ruuen
Submitted
If there was a more elegant way to achieve the grid layout than using my grid shorthand + grid-area declarations, please let me know - I would love to see alternatives!
Also any feedback on my class names is much appreciated too.
@martinelias1312
Posted
Hello @ruuendigital, i have done it like this E.g.:
@media screen and ( min-width:1300px ) {
.cards-wrapper {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 0.5fr 0.5fr 0.5fr 0.5fr;
}
#card-supervisor {
grid-row: 2 / 4;
}
#card-team_builder {
grid-area: 1 / 2 / 3 / 3;
}
#card-karma {
grid-area: 3 / 2 / 5 / 3;
}
#card-calculator {
grid-area: 2 / 3 / 4 / 4;
}
}
My solution link.
Marked as helpful
@Kamasah-Dickson
Submitted
Please I really need your opinions to help me
@martinelias1312
Posted
Hello @Kamasah-Dickson,
alt"" blank, like in this case.@osoriodev
Submitted
My solution to the challenge.
@martinelias1312
Posted
Hello @osoriodev, i have one suggestion:
<p class="about__descrip"> and <span> in it, i recommend to use unordered list with lists in it.<ul>
<li>Tutorials by industry experts</li>
........
</ul>
Good job on responsiveness!
Marked as helpful
@DummyKen
Submitted
Feedback Appreciated!!
@martinelias1312
Posted
Hello @DummyKen, from 376px to 655px cards are on each other.
This is the problem and should be changed:
.cards .push { transform: translateY(110px); }
Media querie with max-width 975px and transform: none; at this px should fix this prob.
And i suggest using more relative units (em, rem...) instead of px. Article here.
Anyways goo job and hope this helps.
Marked as helpful
@MSA-new
Submitted
CSS-card I restarted the challenge
Hello everyone.. I wanted to Thank you for your answers.. it helped me practice and write the code correctly..
Thank you very much..
@martinelias1312
Posted
Hello @MSA-new,
i suggest to:
.img-container { border-radius: 10px; } to 13px, because of visible cyan borders<div class="attribution"> in a <footer> element for better accessibilityHope this helps for future projects :)
@subhamengine
Submitted
I am working hard on my CSS skills. Please give me your valuable feedbacks.
@martinelias1312
Posted
Hello @subhamengine, few tips about accessibility issues:
<main> element <div class="background"><div class="attribution"> can be wrapped in <footer> elementalt="image" alternate text should be more descriptive like: "Women sitting in an office"Anyways nice job and hope my suggestions help :)
@KhaledAhmedKassem
Submitted
Hope you could give me feedback. Thanks!
@martinelias1312
Posted
Hello @KhaledAhmedKassem,
one suggestion from me is that you can use relative units em, rem, % instead of absolute units(px) and max-width instead of width.
Marked as helpful
@danieldudu
Submitted
I'd love your feedback if you have the time :)
@martinelias1312
Posted
Hello @danieldudu, accessibility issues can be fixed like this:
<main> element instead of your <section class="card-container bg-card"><h1> heading per pageGood job anyways on this challenge!
@asifsalim
Submitted
i try my best to complete the project with minimal project.suggest me more if you have any suggestion :)
@martinelias1312
Posted
Hello @asifsalim, few tips about accessibility issues:
<main> elementalt=""<h1> should be used only once per page, article about it here<h2>....<h3>....Anyways nice job and hope my suggestions help :)
Marked as helpful
@JaydenTeoh
Submitted
Not sure what are the actual instructions for the media component for screen vs desktop users. Both the provided images of the designs look the same when on screen vs on desktop. Do provide pointers on where to improve and make my code more efficient!
@martinelias1312
Posted
Hello @JaydenTeoh, few suggestions for better semantic HTML layout and more accessible page:
alt = "icon-ethereum" and alt = "icon-clock" ---> alt=""Hope this will help you on next challenge :)
@Gauravkumario
Submitted
suggestions are welcomed
@martinelias1312
Posted
Hello, my few suggestions:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Hope this tips will help for next challenge :)
@Gioltek
Submitted
Hello! This is my first project after one week of learning html and css, and it's been a blast so far! I learned a lot thanks to this challenge, especially some neat grid related stuff and responsive tricks to adjust the site accordingly to a device's screen size. I really liked the challenge overall and I suggest it to other html and css beginners, it is amazing! Some of the stuff I found hard to achieve: correct grid setup, grid centering. Two things I know are incorrect: I have put the icons at the end of the box using margins, but this causes a problem regarding their position in relation to the description: if the description is one line long, the icon is shown higher in the box; if the description is two lines long, the icon is shown lower. I know there is some kind of fix to this, probably I shouldn't have used margins but something else. The other incorrect thing is the height of the page. I would've liked the page to not be scrollable, and instead be just a single page, but probably I got my sizes wrong and the page is now scrollable. I could've fixed it readjusting all the sizes, but I couldn't be bothered. Is there something easier to fix this issue? Thanks for your time!
@martinelias1312
Posted
Hello Giovanni @Gioltek, i see that you have done a great job after one week of learning!
The positioning of the picture i did like this:
.img-wrap {
display: flex;
justify-content: flex-end;
And the page with scroll bar ? It´normal like David said. Hope this will help you with another options how to position your image :)
Marked as helpful