What's the modern way of making front end for a small project? | Hacker News Reader

What's the modern way of making front end for a small project?

9 pointspkrzysiek14 comments

Hello, I’m a CS student and I have to make many webapps either for uni projects or for myself.

What are the modern approaches to style the page myself?

Also, Are there any popular methods to generate the page style and markup for free?

You state you have to make things for uni projects. Without knowing the potential restrictions around using AI for your University, I would say go on youtube and take a TailwindCSS fundamentals course and have the docs handy. Just focus on the concepts and work thru the examples. TailwindCSS is more of a set of shorthand syntax for actual CSS. If you have a plugin for your editor, it should show you the actual CSS for the Tailwind syntax.

Then pick a component library, like DaisyUI (or another component lib), that uses tailwind under the hood. Use tailwind for your layout, grid, etc. and DaisyUI for things like cards, accordions, forms, etc.

Once you understand the concepts and fundamentals then for personal projects use AI to help you generate the code.

Tailwind is one of those things you should use once you feel the pain that it solves. Start with CSS. Should be enough!

You have the fast approach and the really fast approach.

1) Use libraries like ShadCn that give you all of the functionality that you need for the components. Use Tailwind or other frameworks, to change the styling of these components to fit your application theme. Using the components and theme, let Claude 3.7 design the apps for you, it is good enough to get you to pretty decent and custom pages that do (mostly) work. If there is a specific page that you don't like, then you can redesign it.

2) Do the designs in Figma, and then use Builder.io to convert the designs directly into code, use Cursor to fix anything that builder has broken.

Of course, the 2 methods above can be mix and matched, this is what I have personally used in both startups and more established company projects.

I'm still using Bootstrap 5. Not that "modern" but it gets the job done fast.

I'm also still on the Bootstrap bandwagon, mostly because it was what I picked up while I was learning the ropes of Django a few years ago. The highest praise I can give for it is that the design recedes into the background letting me focus on what I actually want to do.

tailwind simplifies web design for beginners and experienced developers

Claude 3.7 Sonnet can generate your page layout and styles for free.

Vanilla css

Claude is also really good at Tabler Admin HTML if you‘re looking for a SaaA application frontend.

component libraries that you can reuse - shadcn, daisyUI

modern styling - tailwind css

generating pages - haven't tried these but heard of bolt.new , v0.dev being popular

rails scaffold will get you pretty much there, you might add in a stylesheet.

Vibe Coding. Use LLMs to do it for you. That's the easiest (and free) way of doing it!

I know I'll get downvoted for this -- but if can use AI, ask it to use VanillaJS and no libraries (if possible).

Consider that any libraries you load (ReactJS, etc) already use JS built into the browser anyways. So creating a project like this will be WAY more understandable and easy to reason about.

After you can load up on any libraries you need, but understanding the basics is key.

Thanks, I know that, I've been learning pure CSS and Bootstrap in the meantime and took whole Odin Project course.

I just wanna get info about the current tools and standards of making things in a more modern approach.

Reply on news.ycombinator.com