@adedotxn
Submitted
How do I resize the curvy background image, I had a lot of trouble with that and I still haven't gotten the hang of it
Looking to hire developers?
@rfilenko
@adedotxn
Submitted
How do I resize the curvy background image, I had a lot of trouble with that and I still haven't gotten the hang of it
@rfilenko
Posted
Hey, good job here, but I see a lot of small issues. To debug some of them use rule - * {outline: 1px solid orange;}. This will help to fix overflow problem. A few points for future projects:
Try to fix some issues first, good luck😉
Cheers, Roman
@Tiasstiass
Submitted
Any idea how to use gap for Safari? I just realized it does not appear on Safari, any work-around? Every feedback appreciated
@rfilenko
Posted
Hey, you can use grid instead😉, cos currentrly gap for flexbox isn't supported in Safari yet. Or use negative margin/padding for placing items inside flex container.
Cheers, Roman
@gacbur
Submitted
@rfilenko
Posted
Hey, try to fix console error - Mixed Content: The page at 'https://react-clockapp.vercel.app/' was loaded over HTTPS, but requested an insecure resource 'http://worldtimeapi.org/api/ip'. This request has been blocked; the content must be served over HTTPS. Probably this is the issue here
@mohamed1maghraby-div
Submitted
Give some feedback to mohamed1maghraby-div about their solution
@rfilenko
Posted
Hey, great work. Looks nice, but I have a few notes:
Cheers, Roman
@monicamclaughlan
Submitted
Am in my first few weeks of learning, but wanted to get responses on possibly a simpler way of formatting this without using quite so many classes. Any input appreciated.
@rfilenko
Posted
Hey Monica, nice try, but there some issues you can easily fix. First, add your your pattern images as background-image with css, this will fix positioning and overflow issues. And work on previous feedback.
Cheers, Roman
@dthuy901
Submitted
On the line with stars, I used span containing img star, I realized that img star not in span. I tried so hard to fix but I can't. Hope to receive your feedback.
@rfilenko
Posted
Hey, good job. Have a few tips for you:
Also you can look into sass or css variables. 😉 Cheers, Roman
@mrjayy5
Submitted
I enjoyed working on this project. Feedback is appreciated!
@rfilenko
Posted
Hey Miguel, great work on this one, clean, nice code and responsive as well. Found few smaller issues:
Hope this was helpful. Have a good one, Roman
@Nicolas-Rodriguez-Ch
Submitted
I had many issues with adapting the design to desktop screens, I didn't really know what was happening and why it wasn't working.
I used a lot of flexbox in this project.
@rfilenko
Posted
Hey Nocolas, nice work. Some other suggestions how to improve:
Keep practicing, Roman
@RomainDesson
Submitted
Hello, thanks to take a look at my solution ! I'm here to take some tips about my code. I'm not really satisfied about that, it works well with the window width asked with the project but when you go on larger width, one div move out from her initial position. I had the impression of design the page only as i see it and i didn't took care about the window width.
Thanks in advance, i'm working hard to improve myself !
@rfilenko
Posted
Hey Romain, good work, but your solution need some improvements. First, I suggest to not position .between block absolutely - you can define negative margin to push it down and add some z-index to make on top of the footer. You can check my solution - I've made similar, a dark challenge and apply some of my techniques from there (grid, hover effects, html structure). Good luck with coding😉
Cheers, Roman
This is designed to be a guide for one way to do this challenge mobile-first, using scss variables and some more advanced css techniques like nth-child.
I used a VS Code extension to compile the scss.
Note: In a real project I would work with the designer to fix the accessibility issues or color contrast and font sizes.
Any questions or suggestions are welcome.
@rfilenko
Posted
Hi Grace, congrats, clean and nice code, almost perfect to me 😉
Cheers, Roman
@ArtemPonomarenko
Submitted
Hello Mentors,
It seems like I really straggle with positioning elements. My code is full of hard-coded sizes, widths and heights. Mostly units are px's and %'s . Moreover all the numbers aren't even whole numbers e.g "margin-left: 214.756 px" , "padding-top: -49.589%" etc.... At the end it's close to the .sketch designs at required screen sizes, but somewhere between.... it's a complete disaster. Nothing is fluid or responsive.
Trying to use min, max widths but it makes the matter even worse.
Please advise! Help needed
@rfilenko
Posted
Hi Artem, you did a great job, mobile looks ok, just a few edits will help with issues you encoutered. You're right about hard-coded values and funky ones like padding-top: -49.589%" - try to avoid them, so my suggestions:
Usually, it's better to start with mobile-first approach and then add needed changes with wider viewport width.
Hope this was helpful😉. Good luck with edits.
Cheers, Roman
@marawanmohamed9876
Submitted
how do I solve my issue in this code?
@rfilenko
Posted
Hey, what issue are you implying to ? Here some fixed and improvements you can do:
Cheers, Roman
I'd never used a plugin before, and as I've done a few forms on other challenges I wanted to try Bouncer. It worked really well and was amazed by how painless it made form validation. Cheating?
As usual my screenshot looks terrible! But I think the live site looks mostly OK, and seems to work fine. Any feedback is most welcome.
@rfilenko
Posted
Hey Dave, good work on this one. You can improve further by optimizing you js code - define variable only once on the top, use one function with if statement inside to not dublicate your code. Also you can wrap the whole code inside self executing function😉
And work on feedback about styles.
Cheers, Roman
@lucasfvera
Submitted
How can i set the width of my cards correctly? Because i couldnt make them very responsive haha
@rfilenko
Posted
Hi Lucas, to make all flex-items same size define flex:1 shorthand property. Check this article for details - https://css-tricks.com/snippets/css/a-guide-to-flexbox/. But would rather change techniques - make .card-profile-container as css grid container and layout all elements inside the .card-profile box with flexbox😉
Have a good day, Roman
Feedback most welcome. Any suggestions on the following would be appreciated:
What is the best way to get the image to span the entire height of the viewport? I currently have it positioned outside of the main tag, which is not ideal.
I am not happy with the alignment of the items inside my form input. I tried flexbox and other approaches but nothing seemed to work. Any best practices here?
EDIT: not sure what's happening with that button? It looks fine to me on Chrome here and on Vercal. Any ideas anyone?
@rfilenko
Posted
Hey Dave, nice work, just a few minor touches left:). To fix your issues:
Overall, would advice to use Firefox, devtools are very usefull, specially when debugging flex or gird problems, give it a try😉 Cheers, Roman
@TheLiberal
Submitted
This time I had trouble with the mockup image as I didn't know wheter it should be put in a container representing the left part of the bigger flex container or just sitting there alone. I settled with the latter, which later presented a problem with widths of 1100px+ until a certain point. If anyone could explain that to me and give me any tips regarding anything that's still wrong about this implementation, I'd be very grateful. Also I made the same mistake as the last time, because I styled some element/s using IDs and now I know that I shouldn't.
@rfilenko
Posted
Hi Błażej, good job, but with a few corrections can be a lot better. I was wondering about choices you made, so here a few tips for improvement:
Keep practicing, Roman
@ArtemPonomarenko
Submitted
Hello guys,
At first it seems like a very simple project, but it has few tricky bits. Progress bar is quite hard to customise. And background keeps sliding sideways on the mobile version. It was quite a challenge =)
Is there a way to test your mobile solution against the design? The same way I check it for the desktop version, with vertical line?
@rfilenko
Posted
Hi Artem, great work on this one. As for screenshot - it probably because puppeteer (would guess in this case) creates screenshot before yor styles kickoff. Have a few notes though:
Cheers, Roman
If you have the opportunity to take time out of your busy day to see through my project, I would appreciate any kind of feedback, especially any feedback regarding code structure and/or any redundant code which could have been omitted or done in a better way.
Thanks!
@rfilenko
Posted
Hi, congrats on your challenge, looks good. I have a few notes how to improve a little bit:
Keep coding😉, Roman
@ApplePieGiraffe
Submitted
Hey, everybody! 👋
This was a nice, simple challenge that I enjoyed and in which I was reminded of the joys of using CSS grid! 😂
I added some subtle hover effects to the testimonial cards to keep things a little interesting. 😉
BTW, if anyone's interested, here's a little cheat sheet for CSS grid that I find is a nice, quick reference.
As always, feedback is welcome and appreciated! 😊
Happy coding! 😁
@rfilenko
Posted
Hey, great job on this one, specially css grid usage. Would maybe use more semantic tags. Also noticed stagering, wobbl text, when hover effect appears on a .card (scale is causing it, play around with values to fix it, adding line-height, backface-visibility or font-smoothing could help). Still don't understand what's the purpose of this hover effect - it's not an interactive element (button, link), but could rather confuse user from ux perspective😉, in my mind. Hope this was helpful.
Cheers, Roman
@jfprentice
Submitted
I am always open to feedback and appreciate any and all critiques!
This was the first project I've done that has used JS - I've been wanting start incorporating JS into my projects but I wasn't sure if I was good enough with HTML/CSS yet to branch off to JS. I also don't have much experience with JS DOM manipulation.
Even though the JS part was really simple, I did have a few issues getting it to work properly - tried using document.getElementsByClassName but couldn't get it to work properly so I had to add a couple of id tags and use .getElementById. I also had an issue toggling the visibility of my share div. I tried using a ternary conditional statement and then just an if/else, both would only make the div visible but not back to hidden. (I left my ternary conditional in the index.js file as a comment if someone wants to look and see where I went wrong) I ended up making a separate class for visibility and used .toggle() to switch between the classes.
As before, any tips/tricks/critiques are welcome - your feedback really helps me improve!
Thanks for looking!
@rfilenko
Posted
Hey, good job on this one. To make a card be centered on a page you missed one important property - min-height. So set on a body {display: flex; justify-content: center; align-items: center; min-height: 100vh;}. Also wrap all other child elements inside one container, that should do the trick😉, also disable margins, paddings as well.
Cheers, Roman
@TheLiberal
Submitted
An unusual (for me) thing I came across was having to set height: auto
on body. I thought the body would stretch out as far as any element inside it goes.
@rfilenko
Posted
Hey, probably it's bad approach - you can just leave min-height: 100% on body and don't set height and overflow as well. To fix scrollbar - adjust ##background-mobile-image-top width (not 105%). Try to not use id's for styling, it's hard to overwrite them due to higher specificity.
Best, Roman
@evannor
Submitted
Thank you for taking the time to look this project over!! Below I've listed issues I had or future improvements I'd like to make: Issue with buttons sitting correctly at different screen sizes. Utilize image assets provided, so hover on social links doesn't show. Would switch to Font Awesome to correct this. Refactored mobile code and added comments expressing desire to keep refactoring tablet and full screen styles once Javascript was added.
Please let me know if there is more I could do or if there is something I've missed.
@rfilenko
Posted
Hey, good job, with smaller adjustments you can really improve this solution. Here are few issues I found:
Start with fixing those first😉
Keep practicing, Roman
@luisdevworks
Submitted
Hello!
I have some issue with the dropdown menu (position: sticky) it does not stick :( , if you can help me on how can I solve this, please let me know..
Thank you.
@rfilenko
Posted
Hi Luis, probably it's because you need to apply your sticky styles to header itself. Also add some height to .dropdown like 320px (now its 100vh). Try to play with values😉.
Cheers, Roman