@juancfsSubmitted over 3 years ago
This is the second challenge I do. I'd appreciate any feedback you could offer to improve the code. Thanks in advance!
Vinci Taylaran
@vincitaylaranAll comments
- @vincitaylaranPosted over 3 years ago
Great work on completing your second challenge š
A suggestion I would make is to make your cursor into a pointer when you hover over the sign up button. Lastly, I would give the
<h2>elements under the subscription and why sections a font weight of 700.These are my personal thoughts. Other than that, your solution is very well done š
0 - @pikapikamartSubmitted over 3 years ago
Working with json is really a great challenge whoever taking on this challenge.
Just drop your query if you find any issue and that will be really helpful^^
@vincitaylaranPosted over 3 years agoGood eye for detail, Raymart. Your solution looks very close to the original design š
Filtering for jobs also works correctly. The only thing you're missing is the "Clear" button which should appear at the right side of the stack. Adding it shouldn't be much of an issue for you š
Congrats on completing another challenge!! š
1 - @jcoder6Submitted over 3 years ago
Feel free to correct if there's wrong I am willing to learn. and add some feedback thank you.
@vincitaylaranPosted over 3 years agoCongrats on completing your first challenge š
The only thing I would add is to change the color of the bookmark when you hover over it. It's only a small nitpick but other than that there's nothing wrong with your solution.
Looking forward to seeing your progress š
0 - @NspennyukSubmitted over 3 years ago
I tried to use as little code as possible, as tidy as possible, and as accurate as possible. Any tips or recommendations are welcome.
@vincitaylaranPosted over 3 years agoGood eye for detail, Nick.
Only adjustment I would make would be for the
.card__social-listclass. Instead of a solid grey color for theborder-topproperty, I would replace with itrgba(211,211,211,0.5). It's still grey but is less strong on the eyes as it has 0.5 opacity.Looking forward to seeing your progress and congrats on completing your first challange š
0 - @NJain0001Submitted over 3 years ago
One of the things that I struggled with was the star section on the desktop version. It feels like the stars and the message aren't lined up properly, and the code around that piece felt "hacky". I was using positioning and display inline-block which felt wrong. If there is a better way, can you point me in the right direction?
@vincitaylaranPosted over 3 years agoGreat look solution, Nishant!
In regards to the solution to your problem with the stars, I went with giving your
.star-rating-itemclass a flexbox and then aligned them usingalign-items: center. I removed all of the styles for your.starsclass and replaced them a grid, gave it agrid-auto-flow: columnproperty, and then gave them a gap of 3px..star-rating-item { position: relative; width: 450px; height: 25%; display: flex; // <-- Gives this class flexbox. align-items: center; // <-- Aligns your elements vertically. Must have flexbox in order to use this property. } .stars { display: grid; grid-auto-flow: column; gap: 3px; }Other than that, your solution is great. Looking forward to seeing your progress and congrats on completing your second challenge š
0 - @MonikaCyprysSubmitted over 3 years ago
Hey guys! :D
I will appreciate if you can check this site for readability. i just tried to make good readable for small and big screens. any other feedback also would be great!
Have a nice day! :)
@vincitaylaranPosted over 3 years agoThis is a great looking solution. Good work!
Some adjustments I would make would be on the font color of the
.text-sectionclass. I would probably give it a color of#4d4d4d, as it would be less strong on the eyes than a purely black color. One final adjustment I would make would be to slightly increase the font size of the heading elements (h1, h2, etc...). These are nitpicks, but other than that your solution is very well done šLooking forward to seeing you progress and congrats on finishing your 2nd challenge š
1 - @Drumstickz64Submitted over 3 years ago@vincitaylaranPosted over 3 years ago
Hey there š
Your solution looks really good on mobile!!
In regards to your device size problem for the desktop version, would you happen to be using Google Chrome as your browser? You probably know this already, but Chrome has some awesome developer tools that can help you view your app on desktop.
Anyways, good work and I look forward to your progress š
1 - @erickcernaSubmitted over 3 years ago
Hi, could you help me with the responsive design and positioning?
@vincitaylaranPosted over 3 years agoHi Erick, your solution looks very good for desktop.
For responsive design, I would look into media queries and flexbox. Learning these two tools are essential to responsive to design, in my opinion.
0 - @spymonSubmitted over 3 years ago
-
I tried SASS for the first time and I love it! Nesting is awesome, but I don't know how to do @medias with SASS, I created new @media for almost every class..
-
I have a bug in a code, and I don't know how to fix it... On the mobile screen, the testimonials section has a big gap without margins or paddings, and the last testimonials card is cut off the screen.
Any feedback on how to do that is more than welcome! <3
@vincitaylaranPosted over 3 years agoFantastic work! For the bug you mentioned, one way I fixed it was by giving the
.testimonialsamargin-top: -260pxandheight: 1100px.@media screen and (max-width: 1100px) { .testimonials { height: 1100px; margin-top: -260px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } }It's not a clean fix but it should do the trick. If you or anyone else finds a cleaner fix, please do share!
Looking forward to your progress!!
1 -
- @Xhoni43Submitted over 3 years ago
How i can be better in layout and animation ??
@vincitaylaranPosted over 3 years agoGreat looking solution, Xhoni! The only thing I would have to knit pick is that the hero isn't dimmed. Making it dim will make the white text on it pop out more and appear more readable.
.hero { background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(../assets/image-hero.jpg) no-repeat center center/cover }Otherwise, this looks really good! Looking forward to your progress :)
1 - @BonreySubmitted over 3 years ago
This was an interesting challenge. However, I think it would have been much better to complete it using React or some other JS framework. Anyway, I decided to make the site with pure JS and HTML, CSS (with lots of copy & paste) š
Functionality:
- Click filter tablets to select the right jobs;
- Click on the job title to move the page to the top;
- Press "ESC" key or click "Clear" button to remove all the filters;
- You can also TAB through all the job vacancies and chosen filters using "tab" button (or shift + tab to go backwards);
Bugs & small issues:
- š In Firefox the clicking sound doesn't work well. (It either doesn't sound the way it should or not sound at all.) The "remove" sound works all right, though.
- ā Firefox depicts "Ć" (the one that you see on the "remove filter" button) in a different way, which isn't pretty at all.
P.S. I created the JS functionality without using "data-*" attributes in HTML, which was advised in README.md. Probably, I'm missing out on something and don't understand the right way of going about this š
As always, any feedback would be highly appreciated š
@vincitaylaranPosted over 3 years agoI love the work you've put into the animations. The animations don't ruin the user experience for me. They're also quite satisfying with the sound they make and the way they animate in and out of view. I tried doing that myself when I attempted this challenge but kinda failed.
Fantastic work!!!
1
