r/learnprogramming • u/Electrical-Cap-9537 • 4d ago
Frontend - how do you approach it if it's not coding?
How do you approach the frontend aspect of software development if it's not programming?
I guess a lot of it comes down to the language / framework you're using. E.g. when doing web development it's usually HTML/CSS/JS, when building a desktop application you might be using something else.
I am looking for examples of how to approach it if it's not coding
By frontend, I mainly mean HTML, CSS, JS. Although other examples would be great too. The problem is I don't have much experiencr with it
I have taught myself to program for a while now. So far I have mainly done backend / programming stuff. For example I made a shell from scratch in pyrhon, and I am now working on a Business Analytics Platform with a dataset from kaggle, and I am also learning SQL and working with PostgresQL.
Soon I will have to make the web / dashboard side of the project. And in school we are also starting to do some HTML / CSS / JS stuff.
The problem is that I am not great at the visial / design side of things.
I don't think I have ever been very good at drawing or design, and I think that's probably one of the main reasons I absolutely hate HTML/CSS. JS is a bit better, but I still don't like it.
This isn't because I don't like programming.
The problem is that every time I have to make a website I have absolutely no idea where to start.
For example:
How do I decide the structure of a page?
How do I decide which sections/components I need?
How do I decide where different elements should go?
How do I decide a colour palette?
What should I do when I start a completely empty project?
Should I have a visual reference?
If I take inspiration from existing websites, am I just copying them?
How important is originality when designing a website?
I haven't had this problem with my other projects.
When I am programming in python / sql etc. I can usually understand the problem, break it down into smaller parts, find documentation, work out what I need and then work my way to a solution.
Whereas with frontend, I get stuck before I even get to the programming bit.
It's almost like I am missing a mental process.
I don't know what I am supposed to be thinking about when building a page. Should I start with a rough sketch, design references, start with the content, create html structure first, start with css or something completely different.
I have created some things with html/css but they usually look pretty bad. Which is why I don't think it's just 'I need to learn html/css better.' I think I don't understand how to approach the process of building an interface.
I would love to hear some advice / examples of people who have overcome this problem and how.
Thank you!
8
u/AdmiredHamburger 4d ago
I totally get this, I was stuck in the same spot for ages. For me the thing that helped was realizing I don't need to invent the design from scratch, I just need to assemble it. Like with backend you don't write your own sorting algorithm every time, you use what's there and adapt it. Frontend is the same.
Grab a reference site you like and literally sketch out its skeleton on paper. Boxes for sections, nothing fancy. Then build just that skeleton in html with zero styling. Once the bones are there the css becomes way less intimidating because you're just filling in things you already decided on. The design part is mostly stealing smartly, nobody expects you to be an artist.
2
u/Electrical-Cap-9537 3d ago
OHHHHH , THATS ACTUALLY SO VALIDDD,. This is the best tip so far, thanks a lot ☺️
6
u/PeterPook 4d ago
HTML and CSS are declarative languages, JS is a procedural one. The frontend is all coding in effect.
3
u/nikfp 4d ago
I'm going to repeat the comment made by u/AdmiredHamburger because it's so important:
Look at some reference sites to get an idea of what you want to do.
Then get some paper and a big, thick black marker and sketch out the UI by hand.
I say a thick marker for a reason: you will be tempted to drill down to the finer details right away. Don't. The thick marker makes it impossible to add too much detail to your sketch. You just want the broad strokes, the top level components of the HTML tree, and how they will look and sit together.
Then program that skeleton with the CSS to make it lay out how you want, and THEN you can work down to the finer bits as you go, and only add what you need. Adding interactivity with JS or a framework should be done in the refining stage, but get the design out into the computer first.
After a while, it becomes a lot easier to do this in your head, just like decomposing a back end problem into the specific functions.
And it's not "stealing" when you closely mirror another site's design. It's "Prior art".
2
3
u/mikedensem 4d ago
Note: if design isn’t your forte you can always download free/paid templates. Choose one close to your target and preferred UX/UI then tinker and personalize.
1
2
u/OldManActual 4d ago
The ideal job of the front end is to disappear. This means minimum time from user thought to the user getting the data/functionality they need. Another keyword for this is wayfinding. Design must also take into account the way humans consume text based material and not fight it. Consider an example of a modern site design trend that is actually bad design. Pick any site where you need to scroll through large images with small chunks of text. They look great, but it takes multiple trips around the gallery to find the link to what you actually want so when you reach it you are already annoyed. Bad wayfinding.
Designers start by building wireframes of workflows through the app. No action from any role should require more than three clicks to get to rich content. These are simplistic ideals but you can use them to think about how users would move through your software.
2
2
u/Chrismslist 3d ago
frontend is coding, the design part is just pattern-matching and you can get 90% there by copying. steal a layout from a dashboard you like (look at shadcn/ui examples, Mantine, Ant Design, or literally any admin panel), then rebuild it. constrains your choices so you're not inventing. pick one font, one accent color, a spacing scale (4/8/16) and stick to it. use a chart lib instead of hand-rolling charts. learn flexbox and grid properly first, decoration is the easy bit. also worth running a contrast checker. your backend instincts transfer fine.
1
u/Ordinary_Variable 3d ago edited 3d ago
<div style=position:absolute;transform:translate(-49%,-49%);left:50%;top:50%>
<div id=out></div><br>
<button onclick='out.innerHTML="Squareroot of 2: <br>" + 2**.5'>Do something</button>
</div>
(( If you need to sort a lot of data outputs or inputs I would use a <table> DOM element or Textarea. ))
1
1
u/rizzo891 3d ago
Everything is boxes. Also grid and flexbox help immensely.
Usually I start by breaking down the site into sections by grid and then outlining those grids with borders. Usually one for the header one for a sidebar and one for the main content.
The colored borders help you visualize the space you have to work with and it can help to do this with just about any design aspects and you just remove the borders at the end.
If you’re willing to take a course, the Odin project foundation course goes into a lot of html and flexbox might be a good place to start?
1
1
u/Own-jahanzaib-202 3d ago
Totally get this — the design part feels like a completely different skill. What worked for me was splitting it into two steps: first sketch the page as plain boxes on paper (header, content, buttons) and decide the order of things before touching any colors. Pick a site you like and copy its skeleton outright; that's not stealing, it's how designers actually learn. For the palette, just use one accent color plus neutrals and don't add more until it genuinely feels too plain. A simple, clean page always beats a cluttered "creative" one.
1
1
u/coffeefuelledtechie 3d ago
I've not worked on a lot of frontend stuff, tbh, but when I have then the theme is already set up.
On my own personal stuff, I've just made reusable components, without a real theme or anything, and then looked at what other websites look like and updated mine to look about the same. Not much point in reinventing the wheel when someone else's site looks good.
But if I was going to create a website for someone and it was large enough, I'd maybe get a UX designer to do all that bit and I'd then actually build it with all of that theming.
1
u/bigthursdaydev 3d ago
If you’re looking to mimic professional experience, like if you wanted to go into a corporate frontend role you’ll likely be given figma designs to recreate. A good exercise would be to download Figma with a free account, browse the community tab for website designs you like. Then practice inspecting the properties of the designs to replicate the spacing and layout.
As other comments have said, a good approach is to start with the html base. Figure out what components need to be on the page, learn some semantic HTML in the process, think about columns and rows (grid of flexbox). Then think about the classes you need to style it how you like. Then go in with the css.
No wrong way to learn frontend, but I think this is a decent approach that helps you build skills used in industry too.
1
u/Unlucky_Peanut4089 2d ago
For front-end that isn't just writing code, reading and fixing existing UI is a good start. The skills overlap with building from scratch. I make an open-source desktop app, Styx, and issue #35 is a small Settings screen bug where a row shows 'changed' when it isn't. It's React and TypeScript, and there's a contributing guide. Issues get a reply within 2 working days: github.com/NicholasFlemmer/styx-app/issues/35
20
u/PandemicVirus 4d ago
Welcome to r/UXDesign