One of the biggest lessons I learned becoming a coder is to clearly state what you want to happen then translate from english to code. The better you become at describing what should happen and the better you learn to speak javascript, the more effortless it becomes.
That is not the final transformation yet though. Final transformation is when you write the code as fast as you can think what to write. Kind of like actually speaking a language. When we speak English, we don't cosciously think about what we need to say and how to say it, we just do it. When you become more experienced with code, you will also write it without thinking. I like that I can just fall into my zen state and before I know it, I wrote all my code already.
@@GordonKojo-du8fx Language doesn't really matter. How long it takes is another question. First you need around a year of two of general experience solving complex problems in programming and then second - you need to have written that thing at least twice-thrice already (fully knowing what you did). If you have both, you can write the code without thinking pretty easily. All it comes down is getting used to it.
i started learning html and css a year ago, and i can completely relate to what you are saying, i was trying to build my own designs/UX while learning web dev which slows you down a lot, we should focus on the functionality first, great content!! cheers!!
Loved that you mentioned not needing to be pixel perfect. It takes a SIGNIFICANT amount of effort to get that last 2% and there definitely is more valuable work to be done instead. Love the content, thanks!
Tip#4 Really made me view things differently. I started my journey on web development this july of 2022 and the biggest thing that consumes my time is designing websites even though I'm not a designer myself (as I would like to actually create a project) and then coming up with a shitty design lmao. Thank you so much for this video.
Agreed. And one of the problems is that employers don't understand the difference and they get web developers to design front ends and they end up with mediocre results, the project doesn't get adopted/fails, or web developers go back and forth with little progress. Specifications, design, and development should be separate. Get a UX specialist to talk with the client and determine what should be on the page -- fields, data, descriptions, instructions, etc. Get a designer to make the layout, fonts, graphics, etc. Finally, give it to a developer. You get better results as each team isn't conflicting. The UX specialist knows exactly what is needed, the minimum number of steps, field values, etc. without worrying about look-and-feel or what is possible. The designer lays it out to be clear and visually appealing without having to think about what needs to be there. The developer then has something exact to work towards. Strangely, this is easier for everyone. Too many times a developer is doing all three jobs. They spend so much time jumping between tasks (even if subconsciously) that neither is done in a proper order or with care. Say you design something with 25 fields. Ok... you go back-and-forth between tabs, collapsible headings, and a wizard approach... only to go back and realize all but one field on a tab/panel aren't needed, so the collapsible thing doesn't make sense. Then you realize it doesn't look good on mobile, so you go back and adjust it for mobile, but now you realize that key information on the page isn't visible anymore due to it being on a different panel. etc., etc. Separate those tasks, even if you have to do all three. Don't look at the layout until you have the functional design. Don't think about the HTML/CSS until you have the layout. Then, don't go back. Just make it as the layout was.
4:20 "Stop Trying To Design" - This is a road block that keeps showing up in my face when I think about rewriting my website. It makes so much more sense to find a site idea that I like and learn how to code it, then fit it to my needs.
I would add one more tip, related to planning ahead. When you have to edit existing CSS, spend time to understand the code, the layout, etc, instead of going in blindingly and overwriting things. A lot of juniors do this often and then they end up with spaghetti code and have to call a senior dev to fix it.
I would argue you can be a good designer and developer. I've learned so much about design from just developing projects and a lot of things go hand-in-hand
A designer thinks "What's the most important thing on the page" while a programmer thinks everything is important. Those kind of conflicting perspectives will mess with even the best brain. Trust me, as a graphic designer and frontend programmer. Let the designer design and the coder code.
You can be a good designer and developer, but there is a reason why both designers and developers both get paid to do either job full time. Design is a 4 year degree, just like how a good web developer isn't born overnight just by reading some docs. Both jobs are hard to do well and need lots of effort to be good at. Not trying to say you shouldn't learn design. Just saying it's not something you should expect to be good at without putting in the same effort as you would need to be good at JavaScript for example.
Of course you can be, no one said you couldn't. But Kevin is right that trying to do both when you aren't a professional at either will spread you too thin.
This video really helped me to realize that I can't learn web design and web dev at the same time, I just have to focus on development and leave the designing to web designers. Thanks so much for making this video
The whole part about DOM manipulation is EXACTLY what got me to understand how JavaScript works. Working on node or the browser console just didn't have it click for me until I learned DOM manipulation.
I'm glad it worked for you. I suspect you primarily learned how the DOM works. I find that it is important for beginners to realize where JavaScript starts and where it ends. The DOM isn't JavaScript but it's a part of the browser that JavaScript can manipulate. It's just one of the many browser Web APIs that JavaScript can manipulate. (In fact the DOM is one of the more "disliked" APIs that JavaScript often gets the blame for). Presumably JavaScript clicked with you because you were able to accomplish something with it that you cared about, that you could relate to. That is the idea behind the "go and build stuff" advice. Probably the way to really push developing JavaScript skills is to start using something like Eleventy or AstroDOTbuild; again keeping in mind where the boundary between the product and JavaScript is.
I really enjoy CSS and am still trying to find the best approach to styling and have found your tips to be really helpful. I am particularly curious about you mentioning "pixel perfection". As a perfectionist, I naturally work towards this but when you hear others saying it's extremely important it's an added challenge as a new developer. You've brought to light a number of practical reasons why it's not all that practical. Looking forward to seeing your other videos 😊
Really agree with #4, having a dedicated designer to create the site concept is really helpful. Separating the concerns of design and implementation is really important, and can really be a headache if those roles start to blur
I really feel like liking this video a thousand times. Stop brooding over pixel perfection and just make sure it's close to the design as much as possible.
My lecturer in college for Web Design back in 2003 always used to say 80% planning, 20% writing code. This was the time when CSS was at the beginning and CSS ZenGarden was where every Web Dev wanted to be featured. :-D Yes, I'm that old.
I make extensive wireframes by hand with classes and all. Then, when I understood what I have to do, I start to code. It might take too long, but as I'm starting to learn, I discovered that this is the best way for me to do things. Thank you, Kevin :)
I am a programmer of 40 years. I can't count the languages I have used. I agree with some of this. One must know what they are going to do before doing it. To me the best approach is to learn how to navigate the documentation that comes with the language. Cozy up to it and read it for entertainment. Don't memorize it. When you need something, it will be at your finger tips. Then go for the details and philosophy.
Im a beginner and recently used the inspect tool on a website i was trying to recreate. I thought i had a good handle on key concepts of html and css, but looking at everything going on in the website showed me just how much more there is to learn. Its honestly daunting and makes me worry that ill never be that good. I cant explain it well rn, but im gonn do my best to push through and keep learning
Great tips! (as always) I agree 100% about trying to get "pixel perfect". As you said we have no idea of how a visitor will view a page in terms of resolution and size. Instead I go for "Intent Perfect". This is determining the intent of the design, in terms of how it wants to present the content, and then re-creating that in a fluid way so that it keeps even as the shape/size of the view changes. This also helps to make informed decisions when designing for small mobile screens (or vice versa if starting with mobile)
Yes. You’re 100% correct about programming and designing being two different skill sets. That’s been a major factor in why I’ve been struggling a bit with my coding. Funny how I hear that directly from you, and not once from a single person who I’ve actually spoken to about my coding struggles. Many people just suck at giving advice 😒 I really needed to hear that though, so thank you.
In my opinion, a good frontend developer should at least be a mediocre designer too. Else you always have to run back to the designer for every little thing you encounter. Also, a good Webdesigner shopuld at least know the basics of css - helpful if you just want to try some things in browser-inspect mode instead of firing up Photoshop for a color change....
Thanks so much for this video Kevin! #4 has tripped me up so many times over the years (and still does). I can say with zero shame that I am not a designer lol. Now I can totally look at a design from a aesthetic point of view and either love it, like it, or hate it, but when it comes to actually making something that 1.) Best presents the content and 2.) Actually looks attractive, I'm pretty much in the weeds. That's where I'll take specific content I'm trying to figure out a layout/appearance for (let's say a navigation bar for a quick example) and look at tons of nav designs until I find something that "clicks" for me. And despite that being a totally legit thing to do, I still get an impostor syndrome when it comes to designing. I start questioning whether I *can* do this all on my own if I can't come up with designs from scratch. So honestly just hearing again that it's completely okay to work off of what's already out there is really encouraging. I don't need to reinvent the wheel, they're plenty of fantastic wheels already out there 😆
First of all, greeeeeat video as always. While I totally agree that you should "make it work", I don't believe that is any diferent than pixel perfection. The one thing I struggle with designers is that most of them don't have the skills for a proper "hand off". Too often they start their design from the desktop breakpoint and then try to fit all the pieces into a mobile view on a crunch when the project is almost overdue. If you use tools like figma's autolayout, design defensively and responsively you can then deliver something that can easily reach pixel perfection. In my humble opinion, pixel perfection is achieveble but it is a team effort, not just the developer's responsibility. Of something is off dont be afraid to call the designer and discuss/validate a different approach. I have learned that designers are quite often frustrated when we don't deliver exactly what's on the project. Including them even if it is a one pixel change is really good on the long run.
And now take your "pixel perfect" design and set the browser zoom to 300%. It will still work when you did a decent job, but it's not pixel to pixel identical to the initial design.
@@petraw9792 well, imho it still is. If you inspect with developer tools you will see that font sizes and spacing still matches. We cannot control the settings for each browser and someone could argue that if the user rotate the monitor 90º the layout is completely wrong. Same thing with colors, we can't assure the user has the "correct" hsb settings and there are different color tones for every monitor brand out there. But we can inspect the elements and check if color values matches with what was designed. It might not match the perceived tone on the designer's screen but it's still "pixel perfect"
All of these were amazing but #4 and #5 are PURE GOLD!!!! On #5, trying to achieve perfection in any case is what took the pleasure from many from many things related to programming...
Just want to thank you for the recommending DOM manipulation for JavaScript. Roughly 1.5 months into learning it and it can be difficult to understand sometimes without a concept to apply it to. I appreciate the encouragement to keep pushing forward!
Your videos are fantastic. But what so many of us professionals have to deal with (I've been in IT for 35 years) is integrating SCSS/CSS with third-party controls that have their own proprietary stylesheets. Tools such as Telerik and Syncfusion. Yes, you can override their styles, to a point, but it is often extremely tedious and you must master developer tools within Chrome or Edge. I think a video on how to use developer tools to override 3rd party controls would be excellent. It would be advanced but helpful to many. I will happily contribute some case studies or contribute to the content. It's what many of us professional developers have to wrestle with on a daily basis. For example, you can't always say "my design will use a grid layout our flex layout". Yes. YOUR layout might use that but what if you have controls your company forces you to integrate that want to live in their own world with their own layout scheme? That's where us pros get paid. It's often a pain the butt.
i 100% agree with you. what is the solution to overriding 3rd party controls (+styles)? how would you write a medium web app? php+ jquery, mvc framework, paas like firebase?
Thank you so much these are very good tips! Especially tip #2, I never really thought about doing that, now that I think about it I have seen sites built like that but I never really paid attention. This should make my life a bit easier now. Thank you!
making & processing forms... user accounts... tracking accounts by orders... payment structure... VMware, PHPadmin, etc..etc.. other useful admin & webdev apps.. (few of the things I am going to be learning in next phase after learning how to style a web page) If I get a job in the industry I will be sure to share with those I have learned from... Thx 4 everything you have taught me.. & re-taught me...
Hey Kevin, thank you for adding PPP to CSS Demystified! I've been wanting to enroll for some time, and now it's possible. I'm looking forward to getting it once I finish another course that I'm currently doing. And thank you for the great tips in this video! Cheers from Brazil!
Pixel perfect ambition is what I’ll always strive for. I rarely bang my head against the wall because I’m willing to put in extra time, I have a great relationship with the team, I am personally a bit of a perfectionist, and I have made so many mistakes and learned so much in my quest for pixel perfection that I often do achieve it (by the team’s standards) without tons of work or frustration. I love the content, Kevin! Thx!
The way Kevin says Layout will be stuck in my head forever. But these are solid tips. I still find myself skipping out on some of this stuff, especially trying to design things myself constantly lol.
Thank you Kevin!!!, I needed 100% of what you talked about. Now I know I am a normal person, not alone and most importantly not the only one experiencing these challenges while learning web development. Thank you.
Although I understand why you mention focussing on dev or design, I do both and it benefits me a lot knowing what’s possible in CSS so I don’t make designs that aren’t buildable. Having said that it’s true that they are different disciplines and the more I’ve been doing dev (I prefer it now to design) the harder I’ve found it to be creative in design, because I’m not constantly doing it anymore. That’s the trade-off I suppose.
In terms of pixel perfection you covered it pretty well! I think the biggest pain point is some developers just do such a bad job even getting close to the design that it drives designers up a wall. On the other end when you see designers design they slap things on the wall without the precision the end result might look like haha
Great video! I was going to make my own design.. while what I really want is to practice JS. After watching this, I am just going to take an existing design and focus on just JS and functionality of it all.
I'm currently a victim of not planning because I built a web application without planning how keyboard navigation would work. Then I had to spend a significant amount of time retrofitting key navigation into an existing codebase. An unnecessary pain but I guess I deserved it for overlooking this.
Coming from an 11 year career in Graphic Design REALLY helped me with web dev, but I would 100% tell anyone who's not a designer the exact same thing. Just don't, design is so much more technical and more difficult than people think it is. There's a reason almost every front-end tutorial has people using a design they found online somewhere that they thought was cool.
Javascript helps you to get to the Dom for front end devs. However the Dom helps you get to React. 💯💯 Anyone who uses react daily would definitely agree
There's a Chinese idiom "溫故知新" related to tip no.3. "溫故知新" means that you will learn something new by looking back at the "beginner knowledges" from time to time.
Good. Instead of pixel perfect, which is stupid thing, because of different resolutions, I personally stick with proportion thing. For example, you can draw a face, in different resolutions it should stay the same. that's the clue I think.
damn, this just covered the whole way I've been learning by myself I love how you mentioned design and CSS are 2 different things, because I don't like designing, but playing with CSS can be fun anyway the JS part, I totally agree, because it's better to learn slowly when starting, otherwise, it's like rushing through the learning curve, leaving big holes of important knowledge, which will cost way more time later
#5 too! Never mind if that last 2% takes as long to work on as the other 98% - working on that 2% can often result in you breaking the other 98% without realising it. What about testing with CSS?
Well, every small to medium company I came across, looks for a designer-developer and it is happening for years. Usually they call it UI-UX. It is unrealistic to expect focusing on CSS to be appreciated. In some cases they want you to go even beyond that, justify everything and measure the impact. Basically they want you to be a designer-developer-marketer.
There's a fundamental tension between Tip 1 "analyze the design before you start" (0:18) and 4 "stop trying to design things" (4:20) that I think needs to be addressed. How can somebody analyze a design, without understanding design? How can one recognize patterns, without knowing the patterns? I feel typically design is taught with the intent of developing the skill to create designs, not analyse them (or in this context how to break them down to arrive at an effective CSS implementation). Starting by learning HTML/CSS and then going straight to implementing existing designs would seem to lead people to "QWOP their way through CSS" (Keith J. Grant). What tips 1,4 seem to really be saying is "learn to read before you try to write". But we don't "read CSS" to learn how rules compose to achieve certain styling effects (this is similar to programming; people are taught to write programs and are expected pick up "reading" along the way). Fundamentally a lot of CSS education seems to do the usual code teaching thing; focus on details that can accomplished with the various parts of the language, then combine features for higher level consequences. I.e fundamentally a bottom-up/inside-out approach. However when I look at CSS methodologies/architectures like CUBE CSS and ITCSS (BEMIT) I always get the sense that there is a lot of top-down/outside-in thinking going. So it always puzzles me that no one has tackled the: "Here are the fundamental (large scale) patterns and structures that are used in page/UI design/layout and here is how they are typically implemented with the features that are available in CSS." That approach should convey the knowledge needed to "analyse the design before you start". You have to be able to discern the architecture of the page before you can try to implement it.
@@lawrencedoliveiro9104 The finished product doesn't necessarily convey it's composition to the untrained eye. "Can't see the forest for the trees" The foundational structural elements can be obscured by the more prominent details unless you know what you are looking for.
These videos makes me want to dive back into web dev hehe. 🙂 They are interesting and I can't help but watch them when they appear on my feed. It's videos like this one that I could have benefitted from years ago, when I did my bachelors in web dev since it teaches some of the "unspoken things". I just wanted point something trivial out though, just so people don't misunderstand what HTML and CSS is... I may have heard this the wrong way, and not realized that JavaScript is meant as well when you use the word "code" in the videos. But I just wanted to point out that HTML is a "markup language", and CSS is a "styling language". Just so students don't walk around incorrectly referring to HTML and CSS as "code", since technically they are not that. 🙂 Programming languages (or code) are the ones that utilizes logic, like JavaScript, PHP, Python, C#, etc... And while it can be argued that CSS is getting more "logic" added to it over time, it's not quite "programming". Can't wait to see more videos from you. 🙂
I learned a lot from this guy. He saved me from my internship a few weeks ago, and it is actually my first web-based project as a Computer Science student. I got all the basic knowledge needed to really start building my own project that is all about manipulation of data from a database and some logic. Happy to see you spreading in-depth knowledge in the comment section. Cheeers!
I got really lucky. When I first started learning css, I was working with, and picking the brain of, Thierry Koblentz. The smart as hell dude behind atomic css
I think that if a designer (or more often the boss) is insisting on pixel-perfection, they're not really designing things for the web; it's just one of the constraints of the platform that you *can't* have pixel perfection in the first place and what makes the artist's and designer's job challenging with the web is that they have to create designs that work *despite* that.
the one thing i always wonder about javascript is, how secure is it and who's controlling it. for sure you can built a webshop in JS but its going to run clientside, so updating the basket are you gonna callback the server so you will not overbook your stock or can u trust that data not to mess up the database with code injections, thats one of the drawbacks and why learning server side coding still is better option.
I have an experience with pixel perfection, the designer made the design on mac. So the resolution, font-size, etc will be based on mac. Meanwhile the actual user are using windows 7 with 720p screen resolution, everything in the site becomes so big that makes it nearly inaccessible.
I completly agree with you on the topic of "pixel perfect design". I find it such a marketing BS phrase, and in most cases it's a lie because there will be a browser or device where that design isn't working as it should, let alone pixel perfect.
I agree. Yes the pixel perfect thing tried to kill me when I first started web dev and I hated CSS so much at that time because of it. The company in question had 320xUNK, 720xUNK, 1024xUNK mock-ups that we had to make pixel perfect, but they also wanted responsive (of course). Eventually I went here is my general from lower resalations up, @media width:320px { exact }, etc ... The exact made the CSS files 4 to 5 times the size, before flex and grid was really a thing.
You're right, pixel perfect is lethal. I've had several clients that have experience with print media; they're the worst. I can't believe how many times I've had to explain why the web is different than paper media to people that really should know better.
One of the biggest lessons I learned becoming a coder is to clearly state what you want to happen then translate from english to code. The better you become at describing what should happen and the better you learn to speak javascript, the more effortless it becomes.
Pseudo code
Maybe this is due to a lack of experience, but I tend to overcomplicate things... 😔
That is not the final transformation yet though. Final transformation is when you write the code as fast as you can think what to write. Kind of like actually speaking a language. When we speak English, we don't cosciously think about what we need to say and how to say it, we just do it. When you become more experienced with code, you will also write it without thinking. I like that I can just fall into my zen state and before I know it, I wrote all my code already.
@@twothreeoneoneseventwoonefour5what language do you write your code in? And how long did it take you to achieve this level of fluency?
@@GordonKojo-du8fx Language doesn't really matter. How long it takes is another question. First you need around a year of two of general experience solving complex problems in programming and then second - you need to have written that thing at least twice-thrice already (fully knowing what you did). If you have both, you can write the code without thinking pretty easily. All it comes down is getting used to it.
i started learning html and css a year ago, and i can completely relate to what you are saying, i was trying to build my own designs/UX while learning web dev which slows you down a lot, we should focus on the functionality first, great content!! cheers!!
Loved that you mentioned not needing to be pixel perfect. It takes a SIGNIFICANT amount of effort to get that last 2% and there definitely is more valuable work to be done instead. Love the content, thanks!
The best web dev ''tips'' I've had in a looong time, I honestly appreciate your help, thank you!
Glad it was helpful!
Tip#4 Really made me view things differently. I started my journey on web development this july of 2022 and the biggest thing that consumes my time is designing websites even though I'm not a designer myself (as I would like to actually create a project) and then coming up with a shitty design lmao. Thank you so much for this video.
Agreed. And one of the problems is that employers don't understand the difference and they get web developers to design front ends and they end up with mediocre results, the project doesn't get adopted/fails, or web developers go back and forth with little progress.
Specifications, design, and development should be separate. Get a UX specialist to talk with the client and determine what should be on the page -- fields, data, descriptions, instructions, etc. Get a designer to make the layout, fonts, graphics, etc. Finally, give it to a developer. You get better results as each team isn't conflicting. The UX specialist knows exactly what is needed, the minimum number of steps, field values, etc. without worrying about look-and-feel or what is possible. The designer lays it out to be clear and visually appealing without having to think about what needs to be there. The developer then has something exact to work towards.
Strangely, this is easier for everyone. Too many times a developer is doing all three jobs. They spend so much time jumping between tasks (even if subconsciously) that neither is done in a proper order or with care. Say you design something with 25 fields. Ok... you go back-and-forth between tabs, collapsible headings, and a wizard approach... only to go back and realize all but one field on a tab/panel aren't needed, so the collapsible thing doesn't make sense. Then you realize it doesn't look good on mobile, so you go back and adjust it for mobile, but now you realize that key information on the page isn't visible anymore due to it being on a different panel. etc., etc.
Separate those tasks, even if you have to do all three. Don't look at the layout until you have the functional design. Don't think about the HTML/CSS until you have the layout. Then, don't go back. Just make it as the layout was.
4:20 "Stop Trying To Design" - This is a road block that keeps showing up in my face when I think about rewriting my website.
It makes so much more sense to find a site idea that I like and learn how to code it, then fit it to my needs.
I would add one more tip, related to planning ahead. When you have to edit existing CSS, spend time to understand the code, the layout, etc, instead of going in blindingly and overwriting things.
A lot of juniors do this often and then they end up with spaghetti code and have to call a senior dev to fix it.
Browsers include inspection/debugging tools for precisely this purpose.
I would argue you can be a good designer and developer. I've learned so much about design from just developing projects and a lot of things go hand-in-hand
I think so too, but it's hard to learn both at the same time. You can totally pick things up via osmosis as you work on nice designs though!
Agreed! But as a beginner, it is extremely hard to do both really well but I do think you work your way to being good at both.
A designer thinks "What's the most important thing on the page" while a programmer thinks everything is important. Those kind of conflicting perspectives will mess with even the best brain. Trust me, as a graphic designer and frontend programmer.
Let the designer design and the coder code.
You can be a good designer and developer, but there is a reason why both designers and developers both get paid to do either job full time. Design is a 4 year degree, just like how a good web developer isn't born overnight just by reading some docs. Both jobs are hard to do well and need lots of effort to be good at.
Not trying to say you shouldn't learn design. Just saying it's not something you should expect to be good at without putting in the same effort as you would need to be good at JavaScript for example.
Of course you can be, no one said you couldn't. But Kevin is right that trying to do both when you aren't a professional at either will spread you too thin.
This video really helped me to realize that I can't learn web design and web dev at the same time, I just have to focus on development and leave the designing to web designers. Thanks so much for making this video
"Pixel perfection is a lie" Sir, now you have even more respect from me :)
The whole part about DOM manipulation is EXACTLY what got me to understand how JavaScript works. Working on node or the browser console just didn't have it click for me until I learned DOM manipulation.
I'm glad it worked for you. I suspect you primarily learned how the DOM works.
I find that it is important for beginners to realize where JavaScript starts and where it ends. The DOM isn't JavaScript but it's a part of the browser that JavaScript can manipulate. It's just one of the many browser Web APIs that JavaScript can manipulate. (In fact the DOM is one of the more "disliked" APIs that JavaScript often gets the blame for).
Presumably JavaScript clicked with you because you were able to accomplish something with it that you cared about, that you could relate to. That is the idea behind the "go and build stuff" advice.
Probably the way to really push developing JavaScript skills is to start using something like Eleventy or AstroDOTbuild; again keeping in mind where the boundary between the product and JavaScript is.
Tip #4 (stop trying to design things) would have been of great use to me 10 years ago. Great list, very useful for anyone who teaches others
Agreed 👍
I really enjoy CSS and am still trying to find the best approach to styling and have found your tips to be really helpful. I am particularly curious about you mentioning "pixel perfection". As a perfectionist, I naturally work towards this but when you hear others saying it's extremely important it's an added challenge as a new developer. You've brought to light a number of practical reasons why it's not all that practical. Looking forward to seeing your other videos 😊
Really agree with #4, having a dedicated designer to create the site concept is really helpful. Separating the concerns of design and implementation is really important, and can really be a headache if those roles start to blur
I really feel like liking this video a thousand times. Stop brooding over pixel perfection and just make sure it's close to the design as much as possible.
My lecturer in college for Web Design back in 2003 always used to say 80% planning, 20% writing code. This was the time when CSS was at the beginning and CSS ZenGarden was where every Web Dev wanted to be featured. :-D Yes, I'm that old.
I make extensive wireframes by hand with classes and all. Then, when I understood what I have to do, I start to code. It might take too long, but as I'm starting to learn, I discovered that this is the best way for me to do things. Thank you, Kevin :)
You are by far the best teacher for soft soft . It's very complicated at first - overwhelming, actually - but, you make it doable for
It is very helpful for me as a beginner to programming thank you
"pixel perfection is a lie" --- 100%!!! We need more people shouting this from the rooftop.
Beautiful man, you're the only one who could help me, I watched 8 videos and yours was the only one that saved me
I am a programmer of 40 years. I can't count the languages I have used. I agree with some of this. One must know what they are going to do before doing it. To me the best approach is to learn how to navigate the documentation that comes with the language. Cozy up to it and read it for entertainment. Don't memorize it. When you need something, it will be at your finger tips. Then go for the details and philosophy.
Im a beginner and recently used the inspect tool on a website i was trying to recreate. I thought i had a good handle on key concepts of html and css, but looking at everything going on in the website showed me just how much more there is to learn. Its honestly daunting and makes me worry that ill never be that good. I cant explain it well rn, but im gonn do my best to push through and keep learning
Great tips! (as always) I agree 100% about trying to get "pixel perfect". As you said we have no idea of how a visitor will view a page in terms of resolution and size. Instead I go for "Intent Perfect". This is determining the intent of the design, in terms of how it wants to present the content, and then re-creating that in a fluid way so that it keeps even as the shape/size of the view changes. This also helps to make informed decisions when designing for small mobile screens (or vice versa if starting with mobile)
I'm pretty new to web development and coding in general but your videos are a huge help! Always clear and easy to understand thanks for everything!
Yes. You’re 100% correct about programming and designing being two different skill sets. That’s been a major factor in why I’ve been struggling a bit with my coding.
Funny how I hear that directly from you, and not once from a single person who I’ve actually spoken to about my coding struggles.
Many people just suck at giving advice 😒 I really needed to hear that though, so thank you.
In my opinion, a good frontend developer should at least be a mediocre designer too. Else you always have to run back to the designer for every little thing you encounter. Also, a good Webdesigner shopuld at least know the basics of css - helpful if you just want to try some things in browser-inspect mode instead of firing up Photoshop for a color change....
Thanks so much for this video Kevin!
#4 has tripped me up so many times over the years (and still does). I can say with zero shame that I am not a designer lol. Now I can totally look at a design from a aesthetic point of view and either love it, like it, or hate it, but when it comes to actually making something that 1.) Best presents the content and 2.) Actually looks attractive, I'm pretty much in the weeds.
That's where I'll take specific content I'm trying to figure out a layout/appearance for (let's say a navigation bar for a quick example) and look at tons of nav designs until I find something that "clicks" for me. And despite that being a totally legit thing to do, I still get an impostor syndrome when it comes to designing. I start questioning whether I *can* do this all on my own if I can't come up with designs from scratch.
So honestly just hearing again that it's completely okay to work off of what's already out there is really encouraging. I don't need to reinvent the wheel, they're plenty of fantastic wheels already out there 😆
Yes tip number 1!!!!! I really really wish was emphasized. i was building a complete mess without learning a few lessons in design
First of all, greeeeeat video as always. While I totally agree that you should "make it work", I don't believe that is any diferent than pixel perfection. The one thing I struggle with designers is that most of them don't have the skills for a proper "hand off". Too often they start their design from the desktop breakpoint and then try to fit all the pieces into a mobile view on a crunch when the project is almost overdue. If you use tools like figma's autolayout, design defensively and responsively you can then deliver something that can easily reach pixel perfection.
In my humble opinion, pixel perfection is achieveble but it is a team effort, not just the developer's responsibility. Of something is off dont be afraid to call the designer and discuss/validate a different approach.
I have learned that designers are quite often frustrated when we don't deliver exactly what's on the project. Including them even if it is a one pixel change is really good on the long run.
And now take your "pixel perfect" design and set the browser zoom to 300%. It will still work when you did a decent job, but it's not pixel to pixel identical to the initial design.
@@petraw9792 well, imho it still is. If you inspect with developer tools you will see that font sizes and spacing still matches. We cannot control the settings for each browser and someone could argue that if the user rotate the monitor 90º the layout is completely wrong.
Same thing with colors, we can't assure the user has the "correct" hsb settings and there are different color tones for every monitor brand out there. But we can inspect the elements and check if color values matches with what was designed.
It might not match the perceived tone on the designer's screen but it's still "pixel perfect"
2:58 thought my internet dropped :D Thx for tips. Always enjoying your videos with examples. That's how i learned flexbox :)
Thanks Kevin. Great tips. Hope you make a video implementing tip #1. Going through the design, identifying patterns and components and etc.
All of these were amazing but #4 and #5 are PURE GOLD!!!! On #5, trying to achieve perfection in any case is what took the pleasure from many from many things related to programming...
Great content! Thanks again.
Just want to thank you for the recommending DOM manipulation for JavaScript. Roughly 1.5 months into learning it and it can be difficult to understand sometimes without a concept to apply it to. I appreciate the encouragement to keep pushing forward!
Your videos are fantastic. But what so many of us professionals have to deal with (I've been in IT for 35 years) is integrating SCSS/CSS with third-party controls that have their own proprietary stylesheets. Tools such as Telerik and Syncfusion. Yes, you can override their styles, to a point, but it is often extremely tedious and you must master developer tools within Chrome or Edge. I think a video on how to use developer tools to override 3rd party controls would be excellent. It would be advanced but helpful to many. I will happily contribute some case studies or contribute to the content. It's what many of us professional developers have to wrestle with on a daily basis. For example, you can't always say "my design will use a grid layout our flex layout". Yes. YOUR layout might use that but what if you have controls your company forces you to integrate that want to live in their own world with their own layout scheme? That's where us pros get paid. It's often a pain the butt.
i 100% agree with you. what is the solution to overriding 3rd party controls (+styles)? how would you write a medium web app? php+ jquery, mvc framework, paas like firebase?
Thank you so much these are very good tips! Especially tip #2, I never really thought about doing that, now that I think about it I have seen sites built like that but I never really paid attention. This should make my life a bit easier now. Thank you!
making & processing forms... user accounts... tracking accounts by orders... payment structure... VMware, PHPadmin, etc..etc.. other useful admin & webdev apps..
(few of the things I am going to be learning in next phase after learning how to style a web page)
If I get a job in the industry I will be sure to share with those I have learned from... Thx 4 everything you have taught me.. & re-taught me...
Hey Kevin, thank you for adding PPP to CSS Demystified! I've been wanting to enroll for some time, and now it's possible. I'm looking forward to getting it once I finish another course that I'm currently doing. And thank you for the great tips in this video! Cheers from Brazil!
Thanks Kevin, these are good tips.
Separating layout classes from style classes; that's a pretty profound statement. Sooo good.
Pixel perfect ambition is what I’ll always strive for. I rarely bang my head against the wall because I’m willing to put in extra time, I have a great relationship with the team, I am personally a bit of a perfectionist, and I have made so many mistakes and learned so much in my quest for pixel perfection that I often do achieve it (by the team’s standards) without tons of work or frustration. I love the content, Kevin! Thx!
The way Kevin says Layout will be stuck in my head forever. But these are solid tips. I still find myself skipping out on some of this stuff, especially trying to design things myself constantly lol.
Great info as always, Kevin 🔝
Thank you Kevin!!!, I needed 100% of what you talked about. Now I know I am a normal person, not alone and most importantly not the only one experiencing these challenges while learning web development. Thank you.
My speed codiing increased a lot with your tips.
Although I understand why you mention focussing on dev or design, I do both and it benefits me a lot knowing what’s possible in CSS so I don’t make designs that aren’t buildable. Having said that it’s true that they are different disciplines and the more I’ve been doing dev (I prefer it now to design) the harder I’ve found it to be creative in design, because I’m not constantly doing it anymore. That’s the trade-off I suppose.
In terms of pixel perfection you covered it pretty well! I think the biggest pain point is some developers just do such a bad job even getting close to the design that it drives designers up a wall. On the other end when you see designers design they slap things on the wall without the precision the end result might look like haha
I'm honored to be part of this community
Using the * key to duplicate code in the IDE was something that never even occured to me.
Thank you for that, and all of the info in this video
thanks Kevin, could you please create a complete video about analyzing and planning the design ? it would be so useful
I wanted to say I'm so thankful ! for what you have done! it influenced and taught me a lot !
Brilliant vid, Kevin.
Great time saving tips from a master.
And straight from the shoulder.
Great video! I was going to make my own design.. while what I really want is to practice JS. After watching this, I am just going to take an existing design and focus on just JS and functionality of it all.
I'm currently a victim of not planning because I built a web application without planning how keyboard navigation would work. Then I had to spend a significant amount of time retrofitting key navigation into an existing codebase. An unnecessary pain but I guess I deserved it for overlooking this.
Coming from an 11 year career in Graphic Design REALLY helped me with web dev, but I would 100% tell anyone who's not a designer the exact same thing. Just don't, design is so much more technical and more difficult than people think it is. There's a reason almost every front-end tutorial has people using a design they found online somewhere that they thought was cool.
Javascript helps you to get to the Dom for front end devs. However the Dom helps you get to React. 💯💯 Anyone who uses react daily would definitely agree
2:59 Is it just me or the video is frozen for a bit there?
Thanks Kevin, it's really helpful for me. I agree with you about your pixel perfect thinking as a UX Designer.
im senior fd i wish i knew those things when i started, thank you for sharing, guys like and shsre his content, he is only guy who actually helps
There's a Chinese idiom "溫故知新" related to tip no.3.
"溫故知新" means that you will learn something new by looking back at the "beginner knowledges" from time to time.
Good. Instead of pixel perfect, which is stupid thing, because of different resolutions, I personally stick with proportion thing. For example, you can draw a face, in different resolutions it should stay the same. that's the clue I think.
damn, this just covered the whole way I've been learning by myself
I love how you mentioned design and CSS are 2 different things, because I don't like designing, but playing with CSS can be fun anyway
the JS part, I totally agree, because it's better to learn slowly when starting, otherwise, it's like rushing through the learning curve, leaving big holes of important knowledge, which will cost way more time later
Wish I knew about Emmet earlier! Its like magic and saves so much time!
#5 too! Never mind if that last 2% takes as long to work on as the other 98% - working on that 2% can often result in you breaking the other 98% without realising it.
What about testing with CSS?
Thank you for pixel perfect tip! What a relief!
I have learned some of these things by the hard way. Great video helps a lot!!!
Well, every small to medium company I came across, looks for a designer-developer and it is happening for years. Usually they call it UI-UX. It is unrealistic to expect focusing on CSS to be appreciated. In some cases they want you to go even beyond that, justify everything and measure the impact. Basically they want you to be a designer-developer-marketer.
There's a fundamental tension between Tip 1 "analyze the design before you start" (0:18) and 4 "stop trying to design things" (4:20) that I think needs to be addressed.
How can somebody analyze a design, without understanding design?
How can one recognize patterns, without knowing the patterns?
I feel typically design is taught with the intent of developing the skill to create designs, not analyse them (or in this context how to break them down to arrive at an effective CSS implementation).
Starting by learning HTML/CSS and then going straight to implementing existing designs would seem to lead people to "QWOP their way through CSS" (Keith J. Grant).
What tips 1,4 seem to really be saying is "learn to read before you try to write".
But we don't "read CSS" to learn how rules compose to achieve certain styling effects (this is similar to programming; people are taught to write programs and are expected pick up "reading" along the way).
Fundamentally a lot of CSS education seems to do the usual code teaching thing; focus on details that can accomplished with the various parts of the language, then combine features for higher level consequences. I.e fundamentally a bottom-up/inside-out approach.
However when I look at CSS methodologies/architectures like CUBE CSS and ITCSS (BEMIT) I always get the sense that there is a lot of top-down/outside-in thinking going.
So it always puzzles me that no one has tackled the: "Here are the fundamental (large scale) patterns and structures that are used in page/UI design/layout and here is how they are typically implemented with the features that are available in CSS."
That approach should convey the knowledge needed to "analyse the design before you start". You have to be able to discern the architecture of the page before you can try to implement it.
You are a babbling fool.
The point being that the layout design is given to you, you don’t have to decide how it looks.
@@lawrencedoliveiro9104 The finished product doesn't necessarily convey it's composition to the untrained eye. "Can't see the forest for the trees"
The foundational structural elements can be obscured by the more prominent details unless you know what you are looking for.
@@PeerReynders Even the designer of the layout may not have that level of insight into their own design.
that was exactly what I needed , thank you so much
Can I just offer one more tip? Don't put styling in the JS - use CSS classes and then use JS to add/remove those classes.
I like that approach ... 😉
These videos makes me want to dive back into web dev hehe. 🙂 They are interesting and I can't help but watch them when they appear on my feed. It's videos like this one that I could have benefitted from years ago, when I did my bachelors in web dev since it teaches some of the "unspoken things".
I just wanted point something trivial out though, just so people don't misunderstand what HTML and CSS is...
I may have heard this the wrong way, and not realized that JavaScript is meant as well when you use the word "code" in the videos. But I just wanted to point out that HTML is a "markup language", and CSS is a "styling language". Just so students don't walk around incorrectly referring to HTML and CSS as "code", since technically they are not that. 🙂 Programming languages (or code) are the ones that utilizes logic, like JavaScript, PHP, Python, C#, etc... And while it can be argued that CSS is getting more "logic" added to it over time, it's not quite "programming".
Can't wait to see more videos from you. 🙂
I learned a lot from this guy. He saved me from my internship a few weeks ago, and it is actually my first web-based project as a Computer Science student. I got all the basic knowledge needed to really start building my own project that is all about manipulation of data from a database and some logic. Happy to see you spreading in-depth knowledge in the comment section. Cheeers!
I would like to know more about typing shortcuts as seen at 2:30 (very briefly). There has to be more cool tricks I'm unaware of :)
So true, in military s/w design, we spend more time in the design phase than in coding
BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!
thank you! these are all thoughts I've had but struggled to articulate
cool video it helped out a ton with starting out and composing my first soft
I got really lucky. When I first started learning css, I was working with, and picking the brain of, Thierry Koblentz. The smart as hell dude behind atomic css
Thank you so much for sharing your experience with us. God bless you .
I think that if a designer (or more often the boss) is insisting on pixel-perfection, they're not really designing things for the web; it's just one of the constraints of the platform that you *can't* have pixel perfection in the first place and what makes the artist's and designer's job challenging with the web is that they have to create designs that work *despite* that.
Thanks sir❤
0:29 definitely do this! it helps alot!
Do u need to have any tutorial plugged in or is all the softs on soft
Excellent! Simple principles clearly explained.
Whats the extension/setting that he uses at 02:18 to create the skeleton?
Emmet abbreviation on vscode
the one thing i always wonder about javascript is, how secure is it and who's controlling it. for sure you can built a webshop in JS but its going to run clientside, so updating the basket are you gonna callback the server so you will not overbook your stock or can u trust that data not to mess up the database with code injections, thats one of the drawbacks and why learning server side coding still is better option.
"pixel perfect sends a chill down my spine" 😆 couldn't agree more
@8:32 Watch my tutorial on how to get out of tutorial hell, hehe
Thank you, it helped but i had a little bit of problems. Good Tutorial
BROOO thankyou so much, this really helped and the tutorial was really easy to use as well :)
2:58 The way this frame froze for a few seconds kind of scares me
I have an experience with pixel perfection, the designer made the design on mac. So the resolution, font-size, etc will be based on mac. Meanwhile the actual user are using windows 7 with 720p screen resolution, everything in the site becomes so big that makes it nearly inaccessible.
That was funny when your face got stuck @ 2:58
Kevin, thank you very much for these helpful tips! 💛💙
I completly agree with you on the topic of "pixel perfect design". I find it such a marketing BS phrase, and in most cases it's a lie because there will be a browser or device where that design isn't working as it should, let alone pixel perfect.
I agree.
Yes the pixel perfect thing tried to kill me when I first started web dev and I hated CSS so much at that time because of it. The company in question had 320xUNK, 720xUNK, 1024xUNK mock-ups that we had to make pixel perfect, but they also wanted responsive (of course). Eventually I went here is my general from lower resalations up, @media width:320px { exact }, etc ... The exact made the CSS files 4 to 5 times the size, before flex and grid was really a thing.
You're right, pixel perfect is lethal. I've had several clients that have experience with print media; they're the worst. I can't believe how many times I've had to explain why the web is different than paper media to people that really should know better.
PDF, DjVu and SVG are quite capable of achieving pixel-perfect layouts, HTML/CSS is not. Use the right tool for the job.
thanks a lot!!! so nice reverb
This is very helpful, thank you!
Great video! I also wish I had learned all of these from the start. :)
I recognize some of those classes. Beyond CSS just makes sense, and for a newbie like me it gave me many of those "aha!" moments.
How does this advice apply to web components/shadow dom?
Good video! Thanks for sharing the knowledge.