How I build a website from scratch
HTML-код
- Опубликовано: 26 июл 2023
- You can enroll in BeyondCSS right here use code EARLYBIRD for 20% off: www.beyondcss.dev/?...
Come hang out with other dev's in my Discord Community
💬 / discord
#css
--
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 RUclips 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!
Hi Kevin! You've inspired me over the years and I've built a full stack web app using your UI design principles. One thing to consider when it comes to using data attributes might be to try a different naming convention. For example, instead of "data-type" you could use "data-button=primary" or "data-nav=bottom" or "data-input=secondary" etc.... basically naming it after your element type in HTML. I say this because you may want to reserve the "data-type" attribute name for like an actual data type like text, currency, number, phone number etc. But, the data attribute is the way to go for changing not only css but state. I actually use data attributes to change HTML Tables (and all other view states) from vertical to horizontal using media queries so Tables are actually useable on mobile devices as well! Thanks Kevin for all your content and efforts! Much appreciated!
I love how happy He is, you can see his passion.
Kevin is the best at CSS! Highly recommend the course! 🤩
Thanks Florin!
True!!!
True True. I stalk his videos 😊
True.. and you're the best at JavaScript 😎
Agreed!
I've been trying to see how others to sass, theming etc, what are some good practices but tutorials on youtube that I found are really surface level. I love how you go into detail explaining how everything is structured and used. Thanks a lot!
Two hours I will be glad to spend. Thanks, as always.
Together with Andy Bell, Heydon Pickering, Brad Frost, Jen Simmons and the guys of the Google Chrome Developer channel, you gave and give me the reasons and the motivation I need to keep learning new stuff in CSS and web design.
Seeing the variable in the &::marker to target the fill is so cool!
Just awesome as usual!! Luv seeing the methods!
I love you Kevin! Thank you for everything
Sweet. Replay available instantly. I only caught the end when it was live.
Very informative and inspirational. Considering doing a similar tutorial on my own!
Amazing video Kevin. You make me love CSS and it was a long shot 😁
Are you planning to do a series of tutorials on creating a merchant site with secure payment ? I struggle with this kind of things.
Thank you for your advices and pedagogy
Hey Kevin, I loved a lot of what you did in CSS here, really good stuff. I do want to provide a single constructive critique though on something I personally disliked however.
Disclaimer: Please don’t take this the wrong way! I have learned a lot from you. :)
I see people do this aplenty, but in my humble opinion, setting variables and maps for absolutely everything is a bad practice. Only use them for essentials. Otherwise you have a wall to sort through, it can become a big mess. Split what you can into manipulation functions and mixins that automate tasks for you! If you need more variables put them in the component file they will be used in. Sass modules are great for this.
I would create a library if you can! Ones for color, layouts, font-sizing, the works. It makes it really easy to ensure color accessibility, legible font-sizes, consistent breakpoints, ect. when you have a function or mixin for it. It also makes any changes or add-ons you need much easier and faster to implement.
This last part I admit specifically is a hugely subjective take. I dislike the use of CSS custom properties for anything really. Yes, I’m serious. My reasoning is that while they are great for the cascade-CSS still has a huge long way to come for manipulating them. In terms of color, especially. And probably will not for years to come.
That’s it. You can disagree of course! There is no definitive way to write code! That’s what is so great about it! We can all find ways to innovate and speed up our development cycle! Have fun coding!
Wow, this video really opened my eyes to how I am doing everything wrong. This is wizardry! Amazing, now I know my next goal. Thank you.
Thanks so much for these videos Kevin, you're a wonderful person. God bless you and your family.
Kevin. Just thank you. Watched it all:)
Hi Kevin! I'm thankful to you for this tutorial and I always follow the tutorials that you dedicate to convert a Figma file into a real website, but it is my humble request please try to give the Figma file link next time because that way it will be much easier for everyone to follow along. Thank you
Oh I'm just diving deeper into Sass and this is gold. Just as you other contents!
Starting template is a GREAT shout. I use next react apps almost exclusively now, so it's a bit more risky to not use the @latest version and start manually, but it would save me a tonne of time in the short term!
Thank you so much for this, you're a saint!
this guy knows what he's doing and loves it! master in css
You are the black belt in CSS, Sir❤
Thank you Kevin you're the best
Hey Kevin! I love these longer videos, seeing your process on a larger scale, not just on smaller portions. I know you're not a fan of Tailwind but have you though that lot of your utilities can just be javascript objects in tailwind? you could still separate it out if you want, but basically Tailwind would take all your sizes for example and create all the utilities for it for all the different types of situations, as well as for your colors, you can use your SCSS to generate your CSS custom properties but for your tokens you could use the Tailwind config that maps to your CSS custom properties so you still get the power of CSS custom properties combined with Tailwind, as well as with the VS Code plugin, its able to provide autocomplete on your custom Tailwind classes. For general utilities like your flow, even columns, autofit columns, etc you could create a plugin so you just need to add it to the plugins field in the config.
Bonus: one thing I learned recently is rather than creating a mixin for media queries, you can define your screens in the config and use the screen() function that comes with tailwind in your css kinda like your mq() mixin
Thank you Kevin! I follow many teachers but you are always the most detailed and easy to understand
I use SCSS for mixins. That's the only SCSS feature that I still need. I like mixins more than Tailwind. Tailwind puts the styling into my markup. Mixins let me keep all of the styling details in my SCSS. Add that with SCSS Modules, and I can embed React component specific styling directly in the component and keep the reusable parts in shared mixin libraries.
I don't know if you did that in your BeyondCss or not
but I would love to see a video of you creating those explained
11 minutes of introduction you made it will be great
Kevin ... I'm already enrolled in your course and looking forward to Module 5. What is the Headless CMS that you talked about?
amazing work Kevin, stay cool 4 ev3r
Kevin, if I buy the premium package, will I have this entire initial project like you showed on the live stream? I got confused by your sales pitch, probably because English isn’t my first language
But it sounded like we are going to be building something similar to this, but not so in depth and complete
I think having this base project and knowing how to build it all would be the most valuable thing for me
Could you confirm? Thank you so much.
A quick question Kevin what happens when you have a max-width and min-width that have a specified pixel values and have a width:100%. Appreciate if you make a video out of it Thanks
Once you finish a website you use it as is or do you make an admin panel with a CRUD of sorts, or do you transpile it as a wordpress theme? Can you do something like this on your channel? I see a lot of people using static site generators nowadays but nobody says what is the correct or suggested next step. CRUD's or Themes?
how would i get those files that you have when you start the project? do you get it from your course?
What app that u use for displaying the concept of the design in the beginning?
This is awesome❤❤
Thanks!
King of the css. I don't know what I say. But I love you my mate....... from Sri lanka 🦁🦁🦁
what technique do you use to fill out the scss?
Is tailwind used in production? Is it useful to spend time on mastering it?
Can I get the assets from somewhere or git repo?
Hi Kevin, do you have a video on how you setup your Sass and classes for your project?
Are you willing to share your sass library or do you show/sell it in one of your videos/courses?
Will propably keep using php and my trusty vanilla css
I love how with tailwind would save you all this sass headache
Agree mate. Andy Bell is already using Tailwind to get all that config done.
in the beginning it looks more like that he recreated tailwind with sass of so many utility classes that he created lol
hey Kevin ive beeen your viewer for hile now I wonder which software do you use for creating databases since you work on multiple projects and most definately you've interacted with projects that require databases so how do you go about
That my sound paradoxal, but this video actually made me try Tailwindcss for the first time. I prefer to do things my way and to setup things with lot scss / css variables and mixins.
But my weakness is that I tend to almost never use utils classes because I like the style being all "in one place"(namely, in my css file) and I don't want to struggler to overide a "mx-5" that I didn't notice in the html. Not using enough utils leads to repetition and slower development.
Because of that I thought... what if I tried to do the opposite aka tailswind only.
Still not sure how I feel about this though. I don't see Tailwind being maintainable outside of a component-based framework + editing inline style is not as practical as pure css.
Thank you
value content!!
I guess if you change
fill="red"
to
fill="currentColor"
then color can cascade from css to svg.
Hello, i am not yet fluent in english but i would love to be it. Your teach look like so amazing dude ! I follow you on your channel since few times. Thanks again !!!
From France
Thanks
WebDev, like this, is a beautiful art. I'm a paid web developer, nowhere near as good as this with HTML, CSS, SASS though. What I will say... it's a shame the salaries are so low in web development... they really are... you have to pay people well to learn an art like this when it's learned to this level. Frankly, where I come from, the salaries for a web developer that is a master of HTML, CSS, and standard JS are hovering just above the national minimum wage... so what a lot of developers do is they learn basics... then have to jump into heavy frameworks and leave HTML/CSS behind as quickly as possible.
Just purchased, after saying yesterday it was too expensive 🙂
Will you ever release the sass code? Having that would go a long way to having a template for future projects :)
Hi Kevin Powell How to subscribe to your website trg.
To request the abstract or SAS if avail?
It’s amazing to watch. I would love to watch your all videos. Can you share this resource like pre built classes. I can make site for practice side by side with you..
Really nice content and I’ve learned a lot from you! 💪🏻
Couldn’t you just create the layout classes yourself and use the utility classes from tailwind?
I’m kind of thinking from a business perspective and if I want to scale up this website to a dedicated team of 10 web devs, they would all need to learn your proprietary code - instead of just using Tailwind which probably everyone knows and/or might have a better documentation than your code 🙂
Tailwind even has code completion for the classes and direct inline displaying of colours etc, so you’re not poking around in the dark constantly.
Hi @florinpop you mind sharing your camera setup model and parts?
Any Ideas to make video tag undownloadable?
Hi Kevin Powell can't follow your explanation with the codes on your setup?
"Consider using Tailwind instead of SASS, as it allows you to streamline your workflow and save valuable time and effort. With Tailwind's configuration, you can easily handle the headache of configuring SASS and eliminate the need for @apply. Embrace the convenience of accessing Tailwind design tokens by writing regular CSS using the theme() directive or using media queries with the screen() directive.
It's essential to focus on what will work best for the future rather than sticking solely to what has worked in the past. Tailwind provides a modern approach to coding and can be a valuable tool in teaching people how to code properly. Andy Bell's article "Be the browser's mentor, not its micromanager" exemplifies the hybrid use of Tailwind as both a configuration and utilities class generator."
hi Kevin, im a newbie and i wanna learn code and probably change my career. where do i start from
BEST!
i dont understand how you preview your blank page?
The most reusable components are those with class names that are independent of the content. - Nicolas Gallagher
Nice
cool video)
I know this may be a silly request but any chance you can send me the source code for the project so i can better understand nesting? it would mean alot..🙂
I respect for knowing css html I’m scared even to start study it haha look terrifying
Where can we get the Figma file from?
It's something we make in the course, so keeping it for those who're enrolled :)
Can we get the source code please :( ?
Hey kevin, could you do a series or a even a paid course on CSS animations? Baiscs & advanced. Feels like there so much potential there & not enough material to study it.
I've got something sort of in the works, but a *long* way off
Wow
❤❤❤
Every time I hit a roadblock I always end up back here. Learn something, pretend I'm making progress, while my backend is crying CORS error. 😂
I hate deploying...
Hej Kevin I honestly think you are the best, but when you said you didn't like TailwindCSS (which is totally fine by me, btw) and then proceeded to explain all the boilerplate Sass, configs, settings, tokens etc to use classes in the HTML exactly as you would in Tailwind, that was weird tbh. The reasons why you might not like, or not be a fan of Tailwind, are yours and probably totally legitimate. What I can tell you from a viewer perspective, who uses Tailwind a lot, is that your methods are extremely similar. Anyway keep making people fall in love with CSS
I'm well aware they are, I just don't like it for *everything*. I know you could use Tailwind to generate the bits I want as well, but it's not hard to configure and it feels more cohesive to me like this.
I love utility classes, but only for pretty specific things. I did an email series about stealing the best parts of everything and finding a middle ground, which is what I like best 😁
Can chatgpt create this in 5 seconds?
Someone please drop the chapters ❤
Can we get the figma please?
Hey Kevin, can you break this video up into chapters? Would be so useful.
The only possible way with coloring li::marker with css variables for now is this very unpractical solution .. but it's better than nothing, right?
li::marker {
--marker-green: url("data:image/svg+xml.... fill='green' ...");
--marker-red: url("data:image/svg+xml.... fill='red' ...");
}
li::marker {
content: var(--marker-red);
}
50:22
*with keyboard? come on, anyone can build a website from scratch with keyboard!* 🤓
Will you give me the figma file
The title of this video should be "How I build a website with Astro". Astro claims on the front page it's almost 50% faster than wordpress, based on real life data. I don't know about that, but I checked each and every showcase site in Lighthouse and their overall performance is worse than average, it's around 74%. My WP sites never go below 95% and often reach 100% in Lighthouse. At this point I'm not inclined to switch to Astro. I know it's a different use case and is not a direct replacement or even competitor to WP but still, I just don't see a compelling reason to abandon WP for this.
I am sure Kevin has not used tailwind properly. You can do all of that configuration using tailwind config with much less effort. Plus you can use partials there and nesting, purge CSS out of the box without having to use only inline classes. Don't see the point in reinventing the wheel.
Sounds like you've been using @apply, which I really don't like bothering with. It's similar to what I do to a certain extent, but just feels tacked on. I'd rather just write CSS at that point. Even Adam has said he shouldn't have really bothered putting it in in the first place.
@@KevinPowell no need to using @apply. Embrace the convenience of accessing Tailwind design tokens by writing regular CSS using the theme() directive or using media queries with the screen() directive.
Using Sass in 2023 does not make much sense. Only useful to learn it to support legacy projects that are using Sass
Obviously, I disagree 😅. It's still widely used, well beyond legacy projects, but as I said a few times during the stream, this is how *I* like to work, and is the system that works really well for me. It's not for everyone, and I'll never say that it is.
@@KevinPowell Would love to have your files with that amount of sass to use, it takes ages to create mine and its not even close to that level of efficiency is there a way to get like a demo of those to have like a template to start making my own.
@@josuecorella7505 that is my point. You get all that config out of the box with Taildwind. You can access design token by using theme() directive
Honestly i don't see the point of this,he creates a milion different properties,mixins,modules for a simple layout static website. People with no coding skills build these things using drag and drop.
I would really love to see Kevin doing more complicated work,such as a big ecommerce webapp or social network,that would be really interesting. This is just plain boring easy level frontend mentor type project. I would not even waste my time setting up all this stuff for such a simple website.
i'm a vanilla kind of guy. You are a neopolitan kind of guy --way too complicated for my taste
>write course about css
>place "is." alone on the third line
Such nonsense carries, it's a pipets who needs such nonsense?
Sorry but here you created nothing, website was already present.. your other videos were more knowledgeable.. and obviously creating a website isn't creating a simple video or filing tax returns or doing a bank interest calculations or constructing a wall or driving to a location on bumpy road or creating animations which will be done in 2 hrs..further its not even workable on forget small not even on bigger devices yet as far i fast forwarded your video and checked.. further no need of saving on git hub, the number of drafts automatically get saved when you create them for different webpages.. and it will always be time consuming to find the required web page or draft at the time it is required so it will make negligible difference and you will just waste your time making drafts especially for future websites...
Thanks
Thanks so much!
cool video)
cool video)