Looking to hire developers?
@mcktivity
@SteveTj88
Submitted
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?
@mcktivity
Posted
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!
@andreast12
Submitted
Please leave a feedback on my work to help me improve my frontend skill. Any thoughts or suggestions would be appreciated. 😉👍
@mcktivity
Posted
Great job. to improve your css skills i suggest you try using selectors. for example, you can remove your div top-bars and instead usesection::before on css file to generate the same bar with :first-child, :nth-child(n), :last-child selectors to modify colors and style. something like this:
section::before {
content: "";
border-top: 5px solid #000;
position: absolute;
width: 100%;
margin: -2em;
}
@Antoooane
Submitted
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
@mcktivity
Posted
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.
@ShiKirill
Submitted
It's my first project. I'm waiting for your comments and advices.
@mcktivity
Posted
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!
@ceize123
Submitted
@mcktivity
Posted
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.
@FloPereira75
Submitted
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 !
@mcktivity
Posted
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!
@mcktivity
Posted
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.
