First Of All According to my Experience you can design good Ui in Basic Projects but when you design complex projects then Ui simpler. Lets Discuss Different Options.

Design

I am sensing that part of the problem comes from your creativity itself. You feel like you cannot create good designs.

If that is the case, I first want you to know that you can still get a front-end development job even if you have no design skills because the only skill that a front-end developer needs is being capable of developing the client-side interface. Usually the design will be given to you (that is what a web designer does) and you just need to replicate it.

Skill

However, if you do want to better your creativity I will advise you to learn a bit about design like, for example, color theory, color palettes, the effect of shapes in the design and how to use fonts to convey your message. And also, specifically about web design: element hierarchy, 'f' and 'z' pattern, negative space, etc...

To do this you can try some:

1. Online courses (on Coursera or even on Youtube).
2. Follow some designers (and artists - traditional artists can also teach a lot about the cores of designing and appealing to the human eye) and web developers (experienced developers also end up catching on some designing knowledge that they share with their followers).
3. Some of my recommendations are:
4. Color Palette Studio (designer):
5. She offers great advice on color palettes, and her paid color palette generator is worth exploring.
6. Anthony Sistilli (front-end developer):
7. He makes funny videos about working as a developer for companies and gives you coding and designing tips.
8. SamDoesArt (artists):
9. He, obviously, focus on creating art - mainly digital in his case - but if you enjoy watching and appreciating art, you can take a bit of a break from website related content while still gaining bits of useful knowledge for that area.
10. Read about it: books, sites or blogs.
11. Observe your own experience. Visit and investigate websites. Take note of what you like and don't. Notice what could be improved.
12. The web design has the user in mind. To get better at it, you can use your own experience as a user as a learning tool.

Creative Block

Also, if it is more of a creative block rather than a designing skill, creating the design before hand could be useful. That way you are solely focusing on the aesthetic and use of the website (or web app), instead of thinking about how to achieve it. You can worry about that later.

To do that you can use tools like Canva or Figma (Figma is focused on UI and UX design. You can plan everything from the aesthetic, to the the paths and even animations.)

I also find very useful to have a vision board for my project.

Coding

If, on the other hand, the problem is with achieving the design, this meaning: coding it, than you have to deepen your development knowledge.

Most of the designs can be achieved through CSS, with some slight exceptions that can be created with the support of programming languages - JavaScript.

My advise to you would be to start focusing more on CSS.

You can do so through:

1. Online courses and tutorials (on Coursera or even on Youtube).
2. Web documents in websites such as W3Schools, MDN Web Docs, CSS Tricks.
3. Chat GPT. It may sound crazy or maybe even cliche, but Chat GPT can be a powerful tool when used correctly.
4. If you have an idea and you are not sure how to achieve it through CSS (or even if you can do it), you can explain it to the GPT and he will explain step by step and answer any additional question you may have.
5. Then, you try it, take notes and cross-compare with the web docs to make sure it is still functional (and correct).
6. The trick is to work WITH Chat GPT and not to USE it\.
7. Trial and error. Most knowledge I have when it comes to CSS and even coding in general came from practice. You have to try and fail in order to learn.

Where to start

CSS has hundreds of properties and possibilities. What should you learn first?

Well, through my own experience, this are the most useful things to know as a beginner:

1. Selectors Learn how to call the elements properly, not only through classes and id's but also through selectors like: >, *, +, etc... And through pseudo-selectors (nth-child(i), first-child, etc.).
2. Basic Properties Learn how to style the simple things like: font, size, margins, paddings, backgrounds. Make sure you also learn the difference between margin and padding.
3. Element State Learn how to style each state of an element through pseudo-classes like: hover, focus, active, etc...
4. Flexbox and Grid Responsive websites are a must this days. By learning *Flexbox* and *CSS Grid* you can create them easily. Those will also make the element placement a lot easier.
5. In my opinion, Flexbox is the more beginner friendly, but CSS Grid is better for more complex designs and placements.
6. Google Dev Learn how to use the Inspect Option on your browser to analyze and debug your CSS.
7. Positions Learn the difference between each position possibility (sticky, absolute, relative, fixed) and when each comes in handy.
8. Animations Learn how to create animations through transitions and later on through keyframes.
9. Complex Things Learn about the more complex imports, properties, selectors, pseudo-classes. Like for example, the pseudo-classes before and after or how to import an outside font.

Tips

1. Self-Challenge As a way to practice CSS I created a challenge for myself. Every time I see a design or animation I like, I will try to replicate it with no source code provided, only my eyes.
2. This has made me improve my CSS skills a lot because it not only forces me to use it but also to look for ways to do it.
3. Practice Selectors CSS Diner is a mini-game like website that helps you understand and practice selectors.
4. Gradients Gradients are a bit tricky on CSS since you kind of have to work a bit with trial and error. Css Gradient lets you edit your gradient as much as you would like and then provide you the CSS code.

IDE Problem

You also mentioned an IDE problem (I am assuming you misspelled it as LDE) due to using a Chromebook.

My go-to IDE is Visual Studio Code:

1. The code editing works with IntelliSense (smart autocompletion)
2. It has built in debugging tools
3. Also built-in Git for version control
4. Lets you install various extensions and plugins to enhance and customize your development experience.

Although it is from Microsoft, I think you are still able to install it in a Chromebook. Check this website and maybe test it out.

If it does not work or you do not want to try it out, you can practice on websites like CodePen and jsFiddle and for bigger projects you can create them in GitHub directly (however I do not think you can have a preview while you are working on GitHub - but I may be mistaken, so maybe try it for yourself).

NOTE

If you do not have Github yet, I highly recommend it as it serves as a cloud for all your projects and also as a version control tool. As mentioned above, you can also code directly there, as well as share your projects publicly and even find useful tools and tips created by other developers and programmers.