From Figma to Code / Creating a resume page
Vložit
- čas přidán 26. 07. 2024
- My friend Gary Simon from @DesignCourse recently put up a video where he refactored a few different designs in Figma, and one of them looked like it would be a ton of fun to code up. Luckily, he was kind enough to share the design file with me, and I went ahead and did my best to make it come to life!
🔥My Flexbox properties cheatsheet: kevin-powell.ck.page/25792a66b4
🔗 Links
✅ Gary's video where he made this design: • This is how you Refact...
✅ Flexbox Cheatsheet: kevin-powell.ck.page/25792a66b4
✅ A privacy-friendly drop-in replacement for Google Fonts: fonts.coollabs.io/
✅ More on Visually Hidden: www.a11yproject.com/posts/how...
✅ Before and After explained: • Before and After pseud...
✅ More on custom scrollbars: • Create custom scrollba...
⌚ Timestamps
00:00 - Introduction
02:05 - How I start a project from scratch
04:31 - My custom properties
06:41 - Getting the font
08:15 - Setting up some basic styles
12:13 - Do we need utility classes?
12:45 - Writing the HTML for the icon list
19:23 - Writing the HTML for the main area
24:48 - Starting the CSS - the page layout
30:00 - Quickly setting up the job experiences
31:10 - Styling the icon list
52:37 - Components don’t live in isolation
53:10 - Styling the top of the main area
54:14 - Styling the job experiences
1:03:04 - Setting up the horizontal scrolling
1:17:52 - Adding some extra space to the last element
1:19:52 - Fixing responsive issues
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Thanks for covering it!
You're welcome
Thanks for making it, was a lot of fun 😊
Loving the shorts lately. Great vid, looking forward to working through this one
You should do a video about setting up a css skeleton as a base for your project showing what kind of utility classes etc you use and recommend
Legend you are. Read my mind have you? Drew a pretty similar design just yesterday I have.
Thank you for all of the content you have made. Keep up the great work.
Super useful to see you doing this. Extra 💜 for making the chapters!
YES! Love the chapters too! Ditto!
While Watching this part from Gary's video today, I was thinking how can we create this design in real life with coding and after 30 minutes your video poped up on my feed. You guys are awesome 😍
Wow this was a design that Gary refractored for me. Haha and now the css king is coding it! Two amazing teachers ❤🎉
Thanks for the redisgn and coding my resume section. @DesignCourse and @kevinPowell
I always watch your videos and walk away more creative.
My two favourite web design creators in one video,
LOTS of good nuggets to learn in this, even if you have been doing css for a long time! Totally worth the watch! 5 stars :)
Genial Kevin !! muchas gracias por tu tiempo en enseñarnos.
I am falling in love with CSS because you. Thank you very much ❤❤
Always love your content. Inspire me a lot. Watching from Viet Nam 🔥
I haven't seen your scrollbar video and how you style it easily blow my mind nice trick
If you downloaded the font zip, you'd find a variable font file for Outfit.
I used it for my personal project a month ago. It's super versatile 👌🏾
Fantastic!
Clicked in for the thumbnail. I'm a sales engineer and I will definitely use that description when writing my next resume 😅
Thank you very much. I learned so much
Thanks, this is golden!
Thank you so much!
Kevin,
I'm glad to see you had a little bit of an annoyance with the clamp that you have to replace by a simple solution (that is remove your computation to the one done by the browser) as it allows me to illustrate a point about this:
When I have to use calc() to help the design to be responsive, I know that I'm not doing it the way it should have been. With a little bit of thinking and tweaking (like for the clamp to flex), the calc could be changed in a way the browser will do the job natively. Sometimes, a grid, some areas (or grid cells defined) and some position absolute could solve this problem.
Thanks Kevin
Дякую Вам King of CSS !
Hello Kevin, in the minute 59:50 seconds you mentioned the about the misalignment of the align-items but this is easy to fix, you just have to change "end" to "baseline".:)
Thank you so much!
This is awesome
Recognized Gary's redesign from the thumbnail
Cómo te quiero Kevin. Un gran abrazo desde Argentina y gracias por tanto
Thats pure premium content 💯✅
Kevin one day i'll battle you in a Css battle 🤝🏼
Yo! Love the vids! Heard you mention a css boilerplate that you often use. Would love a vid that covers that boilerplate or a “how to build your own boilerplate” would be super cool! Thank you ser 🙏
Yes please, things that would not change over time and things that keep changing...
this would be very useful for me , please make a video about it
Coding with Kevin === time well spent
I believe CSS is the more powerful side of web design ... I enjoy writing it more than the HTML stuff ... I can't get enough of these videos
Thanks Kevin. Amazing content as always. I had not heard the term "Eyebrow" until today and have called this the "Strapline". I use this a lot and often struggled with how to mark it up. It's always felt wrong to me to have a before the . Plus the Eyebrow often has a good SEO keyword. In those cases have put this in a span and made it all the one . Honestly that has never felt right either. Do you (or anyone) have any more thoughts on this?
Great content as always.
A couple of observations:
You could have used scroll snap on the job experiences scroll to get it it jump to each role.
For small screens, whilst it isn’t in the original design, I would suggest moving the skills section down below the main contents this freeing up horizontal space.
Yeah without watching I thought he would use scroll snap. Well always good to make things even nicer.
Just Thank You
I would suggest adding a visually-hidden h2 for Job experience as well and change each jobs heading to a h3. I think the page structure would make a lot more sense that way.
I'm wondering if there's any document or video about how you would setup the custom properties? I feel like you include them in all videos, but each time only some of them. I would love some sort of "complete CSS setup for large projects with custom properties and dark mode" type of video or document. Does anyone have something like that? 😁
If it works, it works 😂🔥
I am really loving your videos, Kevin! I am a UX/UI-designer and I am wondering wondering this; I used to do all my HTML/CSS myself years ago, but went more into the analytics part of UX (and UI)-design and paired myself with great front-end developers to build the front end. However, after probably 10 or so years since I "left" HTML and CSS, I am getting really in to it again, and a lot has to do with your videos. However, most of the front end these days is assembled in "pick-your-favorite-framework" and I have gotten feedback from the front-enders that they prefer that I just give them the Figmafiles as they have to redo most of my HTML/CSS into React components (and often Tailwind) anyway. What are your recommendations to bridge the gap so I can do most of the actual front end building by myself (HTML+CSS) and eliminate any "parsing" to React (or any other framework? And again - thank you so much for all of your incredible content!
Honestly, I wouldn't recommend doing any of the dev work unless you can do it within library/framework/whatever they're using. If they're using Tailwind, the project should only use Tailwind anyway for consistency. Whatever the system that's in place, it needs to be consistent throughout the project or it just creates a mess and is harder to maintain on the CSS side of things.
And then a lot of things have dynamic content, so it needs to be turned into a React/Vue/Angular/Svelte/etc. component to work anyway.
The only other option is to create a CSS design system, which would generally mean moving away from Tailwind and into something more custom. If it's a big enough project, it might be worth doing, but the dev team would have to be on board with it, and it would take time to fully develop properly. Then, instead of Tailwind, it's a custom system. If that sounds interesting to you, Mike Aparicio has a lot of good content that might interest you www.mikeaparicio.com/blog
@@KevinPowell Thank you for taking the time! 👍😃
Similar question(s) here. What happens to the interactive design and engineering? The data agnostic GUI and business logic (workflow, etc.)? Is that all lost in the translation shuffle between designers and framework developers? Why don't we define front-end as all things (data agnostic) GUI related and the back-end as all things (GUI agnostic) data related? Maybe with some sort of API abstract in the middle (middleware?) to map the two? Maybe the API abstract could be the JS framework? Wouldn't matter because they would be independent. The GUI would be framework agnostic.
Would that not make both sides (and the middle) more independent and easily built and maintained? Each part is independent working toward mutually shared project requirements. All without having to redesig/rebuild multiple times.
Maybe that's the "custom system" you're talking about Kevin? What if all this was done with standards driven, browser supported, vanilla HTML,CSS, and JS? Is that custom?
Standards + vanilla + no dependencies === sustainability (future proof)
Maybe it depends on the definition of "custom"?
WDYT?
How can I extract custom properties and utility classes from tailwind or bootstrap or Open Props and put them in my sass or postcss compiler files? Is this action allowed?
Great tutorial. I have also one question, is it ok if you chain classes when creating website like this way: .class-1 .class-2 class-1 is parent and class-2 is child element of class-1 or it depends ?
Hey Kevin, can you tell me why are you not using BEM and when is the best case to use it?
hi kevin, nice video I actually just saw gary's video about this refactor, great idea to try and code it. I really like the more condensed videos for more advanced design my attention span stops me from watching this 1h video. I think it would be great if these tutos were done with some easier designs cause I feel like I'm missing advanced stuff by not watching the entire 1h... just personal preferences here idk if other will agree
I totally get that long videos aren't for everyone, and I do try to mix it up. Unless I'm picking out a very specific part of a design that's tricky, it is hard to do a full code-along on a simple design that also runs into interesting things though. This one, for example, was pretty small, and is still a long video.
I do have a few where I code up smaller frontend mentor projects as well, but they're not super short either.
@@KevinPowell Hello Kevin, will you continue frontend mentor projects??
hi Kevin I am one of your subscriber, When I use prettier it add forward slash in single tag line img and input and meta, how do I remove the forward slash ? :)
for mobile design i would change layout of icons and make them horizontal and put them on top maybe
Kevin - since you know code so well I am curious what your opinion about FIGAM is: I am currently looking into it to see if I could use it to teach students basic web design and then export the code easy. What I found sofar was that the FIGMA to code was rather bad and needed a lot of hand writing (knowledge too).
Tools like framer etc are not usable for us in academia.
4:32 Where did you get the values for hsla colors, as Figma doesn't show it?
7:45 You didn't change the address at rel="preconnect".
convertors lol for the colors
Hi Kevin, love your videos , Please share figma design,if possible.
thank
Hey Kevin, thanks for your amazing contents. I'm recently started CSS / HTML. I can not feel free while doing some practise. I'm trying to understand the environment and CSS world. Do you think about making grid layout and adding elements with flex tutorial ? This type of practise will really helpful for beginner imo cuz, feeling free while positioning of elements really helps beginners. Thanks !
59:38 I'd try align-items: baseline; in that case.
edit: nvm. should have waited a couple of seconds 😂
Can you do the card articles on the CSS-TRICKS website ?
Hi Kevin, love your videos, I follow you for a while now (about 3 years) as I learned a lot from your content I see you focus on teaching more on layouts, would you care to do a content about styling something from the web application world (custom tables/dropdown/charts/etc).
Again, I love ❤ your videos 1:30:10
Hi Kevin
I love all your videos.Can you please make videos on how to make responsive pages using Sass media query.
Same way in sass as you would in CSS, only difference is you can nest the media query inside the selector of you want
Helo, thank you for this video. is it possible to copy the code?
FYI there are some blockers now that block any external stylesheets. Only reason I know is I use a popular one that has made a few items on several pages an empty square.
That seems fairly aggressive, a lot of stylesheets on CDNs out there with no privacy issues or anything.
I think it is also, but was the default of the blocker after the Europe thing.
Pages still work just break a few font icons mostly. example I do not see YT or Twitter icons on a few websites now.
How to find the right value for Rem unit? e.g. you are using 1rem for fs-300. How to decide this ?
He makes it so complicated when you can make the damn thing so much easier! Just grab the values and set it up!!
where did he got those svgs?
Brilliant video.. however, that half pixel is still tripping me :D
Yeah, you can't use Google fonts in Germany because the user data is sent outside of Schengen (into the US) without an option for the user to disagree. You can use CDNs if their servers are in the EU.
Is the any option to host Google Fonts locally on the web server?
@@gashumba888 yes, a download button and a quick explanation how to use it is included in google fonts itself. And there are multiple tools to automatically download fonts, split them up per language to reduce download sizes, etc.
@@peterlistig2020 Oh cool. I will check it out later. Thank you!
17:39 - why not figure and figcaption?
where to get icons
Guys please someone answer me this! i stopped on CSS with the class job-experience.. i did just like he did grid then grid-auto-flow: column; but it didn't work. They didn't got aligned next to each other! why!!!?
it worked thx
Why not use "scroll-padding-right" on the container instead of a pseudo item?
how can i get figma?
Couldn't find a link to code to check, but I think, following should work:
0:17:35 Disagree. What if images are turned off or by some reason failed to loa0:d? alt is not only for screenreaders.
1:08:38 But you can set margin-right.
1:09:59 Drop the width on main and set contain: inline-size instead. Or even overflow: hidden.
1:13:15 Adding scrollbar-width: thin can remove arrows I think.
1:18:42 Padding for .job-experience itself or margin for .job:last-child, I think?
figma balls lmaooo gottem
Why not just serving the font from your server?
I would love to say to my clients: Mmm, this is difficult, i'll just do something else (talking about the scrollbar)
Thank you very much for this! Can you do that also, the project setup etc for also bigger project? Or how it would look for a bigger project, from scratch?
Dude your real name is CSS KING. , i'm an asp coder btw. 😁
.love-and-support-from-Pakistan {
transform: scale(100000000000000);
}
BEM is already dead ?
BEM is still wildly popular, I just didn't really see the benefit on something small like this
Hello world
👋
@@KevinPowell Please do provide the code files and the links in the description as soon as possible for free 🙏
You introduced your son to web development and you didn't give us updates.
Did he quit?
He's 11, of course he quit 🤣 - I'm lucky if he stays interested in *anything* for more than 15-minutes, lol.
The way you set up those custom properties is so convoluted that I don't even know where to even begin with it. Just grab the background color, the colors for the letters, and the font weights!!! Why do you have to make it so complicated!!! Like you have to perform some mundane calculations and stuff!!
A doubt,
Using figma first and then again developing the website.
2 times literally.
.
Time waste and logically useless, Isn't it?
Instead of using figma for prototyping,
Coding and simultaneously testing would be useful.
Isn't it?
Most developers aren't designers, and most designers aren't developers. Most common thing is a designer creates a design in a software they are comfortable with, and then the developer makes it work.
kevin eats,digests and poops in stylesheets
Being in tech is like they are asking you to be a fucking robot!!