Don't Learn CSS. Use This Awesome Tools and don't Waste Your Time
Today, instead of offering you great courses, stuff to learn, and great resources, I want to suggest that you instead save your time and neglect the skill and knowledge that all web developers have, namely CSS.
Of course, it's up to you what to learn and when, but I'll just show you today that learning CSS is not necessary and modern technical solutions can easily handle styling a web page on their own. You just need to know what you want from web design and have a general idea, and the resources that I have prepared for you below will help you with this.
ChatGPT
I don’t think it’s worth explaining to you what ChatGPT is, everyone has already heard about it, and you know what it is. By the way, this article describes in detail how ChatGPT can be used in work. If you haven't read it, I advise you to read it. I would not recommend this resource for complex and complex programs, very often artificial intelligence writes them with errors. Believe me - I checked.
However, simple code, such as styling HTML elements, is fine by ChatGPT. Personally, I always use it to style buttons and other little things that take a lot of time to design. By myself, I always write styles for buttons for about an hour, simply because I can’t decide whether to make the button border one pixel or two. In a word, ChatGPT saves me a lot of time and selects quite stylish designs.
Just remember to be sure to include at least colors or a color palette in the request so that the design turns out to be really modern and does not look like buttons from sites from the 90s. Yes, ChatGPT sometimes gave me just such styles - retro style, I have nothing against it, but now few people will be attracted to it.
ChatGPT - CSS Code Generation
With the resulting code, I highly recommend going first not to your IDE with which you are working, but to Liveweave, which I talk about at the very end. So be sure to read to the end!
Bootstrap
Bootstrap is a web development framework. An absolutely amazing thing that not only makes the styling process faster and easier, but also saves space in the page code file, which is simply incredible. I always use this framework in my projects, even on this site, I'm sure, no more than 150 lines of CSS are used, and everything else is styled thanks to Bootstrap.
Bootstrap - Buttons Documentation
Knowledge of this framework is a must if you want to be a web developer. Here you do not need to think about how to correctly position the site blocks so that it looks acceptable from all devices, it is enough to write one class, one line of code in the div block.
Bootstrap offers many elements for your site that are already styled and do not require any additional CSS code, such as buttons, which we have already talked about, tables, lists, navigation bars, and a lot more. You can read all this in their documentation, which is simply the best I've ever seen in my life.
Be sure to include bootstrap in your curriculum right after HTML. So, moving on to CSS after that, you will understand why I need CSS at all. So I personally thought, because all the elements of the site from carousel to navbars can be done thanks to this framework with just one line (two maximum). Value your time.
Drawter
As an alternative to the previous option, I can offer Drawter. This is a tool that can be useful to you when planning and arranging site blocks at the design stage and before actual development.
I confess that it is not very functional. In fact, it simply allows you to arrange the blocks you draw in a panel on the left side of the screen and get the code for the elements you draw on the right side of the screen. This is all. Nevertheless, such a simple functionality can be useful for you with an unusual arrangement of elements and blocks, as, for example, in the figure.
Drawter - Draw to CSS Converter
I know that there are craftsmen on the net who, on the basis of this site, build themselves a whole template for a large site. To be honest, I don't understand these people. The site is clearly not designed for large projects, it is perfect for creating landing pages, portfolio sites, or just for training purposes and compiling a portfolio.
Everyone has different goals and objectives when developing websites, so I'm sure that such a tool will also be useful in your arsenal when learning and even when working on real projects. I personally consider this an alternative to Bootstrap, but not a very effective alternative, because by copying the CSS code from here your page is not responsive and looks crooked and ugly on different devices. And as you know, adaptability is the first thing a developer should pay attention to.
Liveweave
This resource is not entirely to replace your knowledge of CSS, but rather it is one of the many live sandboxes, whereby correcting the code you instantly see the result in one of the windows. This is very handy when you are just learning or want to test the code you just received from ChatGPT, as I do all the time.
Liveweave - Code Example
Getting the generated style for, for example, a button, I firstly go to this resource. Here I have the opportunity to instantly see the result, make changes and not reload the page a hundred times with one simple detail that I corrected for my needs. So I use this resource.
Liveweave - Live Block Editing
Moreover, here you can edit blocks in live mode, and CSS styles will be automatically generated based on your specified parameters. By editing a block, I mean everything from rounding the borders, to choosing block shadows, from choosing the number of columns in the block, to border thickness, and choosing a back color. Anything you wish.
It also has great educational potential. You don't need to download any IDE to start practicing your HTML, CSS or JS skills. As soon as you open the site, a whole sandbox appears in front of you, where you can do anything and train anything without downloading. A very handy thing to start with. I always advise everyone to study on such platforms and sandboxes.
Conclusion
So, the purpose of my article was not to show you that learning CSS is stupid - not at all. I just wanted to show you how you can save yourself a lot of time on site design by choosing ready-made solutions and testing environments for these ready-made solutions.
Personally, I have never learned CSS, but relying on these resources, all the knowledge I have fit myself. Correcting some lines and parameter values, I memorized more and more keywords and why they are needed and what effect they give to my design. So my advice with regard to CSS is to use these resources and everything in your head will be remembered by yourself in a few weeks.