I have been mentoring developers since 2013, and I can never stop putting emphasis on how important mastering HTML and CSS is if you want to make y...
For further actions, you may consider blocking this person and/or reporting abuse
Ah, I couldn't disagree more, for a number of reasons. For one, I've never in almost a decade met a designer who thought through all the possible use cases. Since we're developers, it's on us to think what happens if text is too long, number is too small, picture not perfect, and so on.
Then there's also the fact that web is inherently a completely different medium. A designer can provide, best case scenario, 3 different screens, but it's up to us to handle everything in between.
Pixel-perfect design is in the past, when we had to cater maybe 5 possible resolutions in 2 browsers. I'm not saying we shouldn't respect design - that's our job indeed. But it's also our job to first and foremost convey the idea behind it, not pixels.
I do all my own design and developing. That said, even I make changes between my initial design to my final bit of development.
Don't be a slave to the designers original design; instead create what makes sense in the design and talk to the designer about the rest of it. If the designer does not know or only knows a little HTML and CSS, they might simply be unaware of the possibilities available and the limitations inherent to the project.
am i angie is right, so remember to collaborate. There is no greater way to respect the design than to understand it.
FYI, if I ever post a design challenge, not contacting me is likely an automatic failure, unless, of course, the design is reinvented by the developer to improve functionality (aka, taking initiative). 100% will never be the result of pixel perfect anything.
Yeah I agree.
But in terms of "practice", I think it will be a good challenge for the developer to create the frontend as similar as the design.
But in real life, yeah, pixel-perfect design should only be enforced on components level. Even then, the designers should discuss first with the frontend dev, because in the end, HTML and CSS should run in browsers, not just in Sketch/Photoshop, and frontend devs are the one who know/deal with the browsers' antics
In these scenarios, Before making any kind of decisions, one should consult Designers. But I understand the situation if a UX/UI Designer is not in-house. But as Hendra stated for practice purposes I still advise that. As it's a good habit to follow the designer's lead while writing CSS and making changes in design. But again if your designer is not in-house follow your instincts.
Then they aren't good designers. I can code all of my designs to look exactly how I prototyped it. If a UX Designer hasn't thought through everything, read my first statement again.
That's great! Do you think it might be because you are designing and coding yourself (at least that's the way I understood from your comment), so there's less of broken telephone situation going on? Or do you cover all the possibilities for all the elements on all the possible screens in designs? If so, how many prototype screens does it take to convey everything?
I'm genuinely curious about this.
Since, you code your prototype yourself, you already know what is possible code-wise and what isn't. That being said, your prototypes must already adhere to the possibilities and limitations of what one can do in the web.
My thoughts exactly.
How am I supposed to work with the designer's pixel-perfect templates? They made the design on a 1080p screen, how do I replicate on other resolutions?
Obviously letterbox it :p
I did something like that like 10 years ago just to be snarky.
Nice article!C: I would also recommend learning the basics of design, UI and UX. Because this will make it easier on solo projects to have a clear mind and goal with the website/app that is being developed should look and feel like, and it shortens a lot the time of creation and levels up the overall design of the website/app
Yeah thatβs right. If you have any resources for that. Go head.
I think hackdesign.org would be a great resource to follow in this regard
Thanks for sharing π
I'd argue that whether this is a good idea or not really depends on your workflow. Whenever I'm actually updating CSS for any of my projects, I've got multiple browsers open (usually at least Chrome and Firefox on the desktop, and often Chrome on my phone too) with all of them getting reloaded after each change so that I can see right from the beginning if everything looks right, and DevTools isn't exactly good for that type of workflow. Also, it kind of falls apart if you aren't writing vanilla CSS (say, you're using SASS or LESS).
I agree, but I think it helps beginners a lot while working only in Vanilla CSS. I think there are few tools though, using which you can edit SASS in DevTools. π€
If you use grunt to compile, you can have it generate source maps which webkit/blink inspectors will show in the style pane.
CSS is a vast and complicated subject, and part of the difficulty (I think) for developers/coders is that it isn't really programming, on the contrary, it's declarative. It works fundamentally different than a programming language. You write declarations and then "stuff happens". Sometimes it's what you intend to happen, often it's something else.
Another 'problem' with CSS is that it has a long history and as a result it has a multitude of ways to achieve (more or less) the same result. That can make it really confusing.
If I want to make a layout, do I use float, flexbox, CSS grid? Some features are now more or less deprecated or outdated (and not encouraged anymore), other things are so new that they're not properly supported in all browsers. Old features are never removed but new ones continuously added, which makes CSS grow bigger and bigger.
All in all this means it's a vast and complex subject.
Some things are simple and easy to learn (setting foreground and background colors, but even there you run into complexities and subtleties), other things are hard.
THE most difficult aspect of CSS, by far, in my opinion, is layout.
Somewhat embarrassingly, after all these years I still have trouble remembering how to get my 2 DIVs stacked on top of each other, or next to each other! Other example: you want to position an element "absolutely" relative to another element, you then have to make the parent "postion: relative" and the child "position: absolute". How intuitive is that? Not really intuitive, unless you have a firm grasp of what's going on "under the hood".
The way to make it simpler and more straightforward (I think) is to emphasize the more modern parts of CSS like flexbox, and to learn those first, and leave the more arcane 'legacy' features for later (maybe don't learn them at all if you don't need them). The more modern parts of CSS are generally better designed and more easily comprehensible. This makes learning CSS much less confusing.
Cool, thanks!
I am definitely grabbing some links to look through :)
By the way, I am making a series on how to solve CSS Battle.
CSS Battle #1 - Simply Square
Olzhas Askar γ» Jun 4 γ» 3 min read
Thatβs so dope man. Will check it out for sure. π
Thx for the tips. I'm a junior front dev and I knew most of the links you shared but I really like the 30 day of CSS challenge based on Dribbble. That's a nice and fun idea to improve css skills. I'll try to do it with friends =). Thanks for sharing !!!
All the best for the challenge. Go nail it. ππ
Also, feel free to ask anything @sarthology
really nice post, thank's a lot.
i'm a beginner at all things web dev right now. you suggest that i edit my css through the dev tools, but how would i transfer all that to my main code??
Do i just repeat all the steps again on the actual code css file or is there some tool to get the code from the dev tools?
A good tool for leveling up your css skills, is Desech Studio which is a nocode app for html/css.
It's great because you can see all the options the css can do when it comes to effects, backgrounds, border images, svg, etc. And the most important thing is that you know that everything you see there works on all modern browsers.
I would really like to know why itβs so hard for developers to understand. Today, I was debugging a resizable master detail view where after shrinking the master to zero, some elements from the master were still partly visible. I was fiddling around with overflow properties at different levels but fixing one issue created another. I mean, when I program I start with a test then implementation and so on until the feature is ready. But with CSS, itβs just messing around. It just doesnβt appear logical to me. Is there some resource like βCSS for developersβ? I think I need to change the way I think about a problem, but how?
Well, with CSS you start with the structure. You need to pretty clear in your head about where you will use what, Where there will be a div and where there will a section. After that, if you are making a responsive design, go for creating the layout of the grid. Once that's done, then you write HTML for that structure.
Then finally you should jump to the CSS. In the beginning, CSS is all about messing around but once you are familiar with most of the properties, it will be a piece of cake. So, buddy, Keep Practicing. it's all logical.
VisBug is cool as it let's you copy and paste text from sites when they try to prevent copy and pasting!
Oh nice, Can you share the link too?
Not gonna lie, expected a lot more from this article...
Well, CSS isnβt that hard man. Just take the challenge and you can crack it or if you have some more suggestions to add, go head as
β Half of the articles is in Article and half is in the comments sectionβ π
Thanks for this post! At the new project, I was assigned I've been needing a lot of upskilling in terms of design & layouts. Will be bookmarking this resources.
Iβm glad this could help. Hope to see you grow. π
Love this! I always struggle with CSS :D
Thank you!
I always deliver this lil piece of advice, read the damned documentation (be it MDN or W3Schools), no other way around it if you really want to know what you are doing...
I hate W3Schools π
MDN is so much better
For me it really does not matter as long as you read them π
Cool post.
π
Awesome. Very informative. Thanks for sharing.
π
I would avoid being the "perfectionist." Too often people use that term positively, when in reality it's called "waste time/money chasing the perfect code."
There is no perfect code.
css-tricks.com/front-end-challenges/ , some great resources
That's interesting advice. I'll surely try this. Anyway, how to get the pictures/icons from the dribble design?
I just learning CSS to make my anycouriertracking.com blog more Beautiful.
Can you please guide me or mention some resources to learn advance CSS for Building custom website like pickleballcritiques.com/
I'm also learning HTML, CSS for my shoespundit.com blog.
I'm also learning HTML, CSS for my gepco online bill blog