Whether you are a beginner or an expert in Frontend Development it is important to follow some best practices in order to keep your cascading style...
For further actions, you may consider blocking this person and/or reporting abuse
The article is great, well done๐๐๐ I would add a tiny few more useful functions and tips from myself ...I will not describe them here, I will tell the names and I count on the human curiosity...๐
1) use CSS Custom Properties (Variables)
2) use when flex-box single columns/rows , Use Grid when multiple columns/rows.
3) min, max, clamp CSS functions
4) Calc CSS function
5) CSS counters
6) aspect-ratio(video)
And the last and i think most important (for me) Use dev-tools (firefox) when you styling in CSS .We can edit properties directly on fly and testing those.
I hope it will be useful ! See you ! Best Regards ...and Keep on Coding!๐๐๐ป
Not always; some layouts look like they should be done using
display: grid, when in reality they are just a bunch of boxes that wrap over several lines. In these cases,display: flexis still the better option.Grid becomes useful when you want finer control over the alignment of your elements, specially when you don't want to just fill the grid cells one after another.
Awesome suggestion! Context is the King ๐ Could you send or show(link) us some examples this "some layouts" ? Just to reference and knowledge obviously...๐ป ๐ก
Can't think of any specific example right now, but think product cards for example, where you have 3 of them on each line and they look somewhat like a grid; but really, they can just be in a flex container with
flex-flow: row wrap. Same goes for any other listing of items, like users on a social media site, etc.Take your time.... I am very patient and hungry for example, By the way learning from example is, in my opinion, one of the best teaching methods ๐
Have You Great Day and do not haste ๐
dev-to-uploads.s3.amazonaws.com/up...
Like such layout, you should use grid. It's easily manageable with grid, flex will be most difficult for this one.
Most recently i will bring a series of article based on CSS Grid, stay stick and keep learning. I love your dedication.
Almost everything in this "article" has been copy-pasted from other sources without any reference:
webtips.dev/10-best-practices-for-...
linkedin.com/learning/introduction...
code.tutsplus.com/tutorials/30-css...
Please don't give such blame. "Almost everything in this article, has been copy-pasted" how could you say like this. For take inspiration I have read some post it doesn't mean copy past those content. I just start writing articles here and this is my second post here please investigate carefully. If you have full intention to discourage mine then it's different i guess. We need effort to published such article, hope it make sense. Thanks man.
No, this makes no sense at all.
Because it's true, everyone can compare the linked articles with what you wrote. It's copy-pasted.
No excuse at all, on the contrary! It's the absolute minimum requirement for any public writing to reference sources. This is not some "nice to have, please, excuse me, I'm learning" thing! You disrespect other authors who put the work in.
"Such articles" is what will destroy this website in the long run, because it is becoming a dump for hastily copy-pasted blog spam.
I wrote about such topics there ton of post, articles are available in web. Because that is not a unique topics some one else discuss already some of points on internet, I tried represent it and organized it with my own perception. I must say again please investigate carefully.
intresting, let's investigate. Such thing is not allowed here.
We took care of most of those things in our online IDE. It let's to create UI Widgets along with possibility of using over 50 premade one. The IDE (automatically) splits CSS into smaller files allowing to edit singular parts of the website. At export everything is minified. Try it here:
glue.codes
Or watch on YT:
youtube.com/watch?v=OGR7cjZW44Q
Wonderful article was having much taught as regard my approach when starting to make design, I usually do desktop view first but I find it easy writing responsiveness for desktop than mobile so mobile first approach is best since 70% of users try mobile access first.
Glade to know you find it insightful. Let me know, how you gonna use mobile first approach in your next project. Thanks man, happy codding.
Nice post :)
FYI we've added it into a GitHub project gathering content about best coding practices :)
github.com/promyze/best-coding-pra...
Nice !
Thanks a bunch, You can follow for more exciting content.
It was usefull I get to know about CSS preprocessor that i dont knew before
Happy to see you find it handy, stay stick more interesting topics on arrival.
Nope I meant vertically, for horizontally you need to use "justify-content: center;"
Thanks