If we as a front end developer are not given the design for all screens (as for this case we only have 2 screen which is 375px mobile and 1440px desktop) by the designer, what is the best way to proceed with the website?
Normally, this will depend on the contents. As a frontend developer, you have to identify the components/elements that should/could remain side by side while maintaining the feel or consistency of the design as a whole. Personally, I usually add flex containers and let them wrap then set min/max-widths on the elements i want to position, rearrange divs if necessary, conditional rendering, flex grids or media queries if necessary. Another very good way, in my opinion, is to start with the mobile-first approach and adjust til you get to desktop.
This may not necessarily be the best/correct way to do it but i hope this helps you! Happy coding!
Can you help me to improve this, according to me, I used too many flexbox, but I don't know how to do without, and I don't know how to do a good mobile version. Thank you for your help
I think you did great! You can also use align-items: center on the main which will align all 3 divs to the center of the tallest. To improve the responsiveness you can use @media queries on css and min-width: px + max-width: px + width: 100% instead of fixed values to prevent the 2-column 3 boxes on mobile<x<desktop.
It's my first project. I'm waiting for your comments and advices.
You are doing great! Keep it up. Something to improve is you may use display: flex and flex-wrap: wrap(if needed) on your human class and then adding a margin-right: xx on the avatar so you can avoid using width: % as sometimes it kinds of mess up responsive design. Overall, good work and try more challenges!
You are doing well! keep it up!
using plain javascript, you can use document.getElementById("myDIV").className += " mystyle"; to add a new class on your element. In mystyle class you can then have for example: height: xx, override a display:none to display:xx or visibility:hidden to visibility: visible. or you can directly change style like this: document.getElementById("myDIV").style.display = "none"
you can use filter attribute then try brightness(0) invert(1) to achieve white color. another option would be another svg with different fill color. or there's a longer method in stackoverflow for changing fill on svg in an img tag.
Hope this helps! you can check my solution if you have time.
Hi it's my firt challenge here , so if someone have something to say it's can be helpful for me.
I have a small device (>1200px) so I had to reajust the size because the result isn't the same on my desktop and on the other.
Sorry for my english. Have a good day/night/week !
Sometimes, its hard to match the design when you dont have the design file where all margins and paddings are present. But i think you did pretty well without them. Next step should be try to use html semantics.
Open to any feedback!
Good job! Looks almost the same as the design. A bit of suggestion for your mobile view is to add min-height on your slider. otherwise its already responsive. also try to add css on your arrow:active selector to give a click effect which is good for user experience. might as well add transition effect on the slide texts so it wont feel late.
