Member Avatar for dwssassin

So I started my own project to make a website. Since I know much more about coding a website than designing it I came up with the idea to code the website for now and once its fully functional begin designing it.

Is this a good idea (I am about half way through coding it)?

Is there an app that makes design a breeze? Like once I make my own images, is there an app that will allow me to easily move things around to its right position and what not?


Thanks!

  • 4 Contributors
  • 7 Replies
  • 123 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by macgurl70

Dani AI

Generated

Starting with code is fine—many developers learn that way—but a small, deliberate design checkpoint will save repeated layout rewrites later. , you already have momentum; use it to create a tiny “hand-off” layer so a designer (or you later) can skin the site without changing structure. ’s skeleton gives you that structure, and points from and about planning flows are worth keeping in mind.

A compact, practical workflow to move forward:

  1. Create a living style guide (2–3 colors, type scale, base spacing, button/link styles). Make it a single CSS/Markdown file the designer can read.
  2. Componentize markup (header, nav, cards, footer). Keep HTML semantic and class names predictable so visuals map to code.
  3. Prototype just the key screens in a visual tool (desktop and one narrow width). Share a staging URL for quick feedback.
  4. Run quick checks for responsiveness and contrast before heavy styling.

Useful tools and references: Figma for quick, collaborative mockups (https://www.figma.com/), Webflow if you want a visual builder that produces HTML/CSS (https://webflow.com/), and MDN’s guides for responsive layout and images (https://developer.mozilla.org/). For basic accessibility and color-contrast checks see WebAIM (https://webaim.org/).

A few practical tips: export icons as SVG, version your code (git), keep assets and class names consistent, and centralize colors/spacing with CSS variables so a later designer can change the look with minimal code edits. If a designer helps later (as kindly offered), supplying the style guide and a staging link will make their job quick and avoid rework.

Recommended Answers

All 7 Replies

Member Avatar for benhowdle89

So have you got a skeleton site, with hmtl (or whatever you are coding) and css for layout? Are you looking to integrate images and styling into without messing up functionality and layout?

Member Avatar for dwssassin

Not even CSS just a skeleton site.... and yes.

Member Avatar for benhowdle89

Well not really knowing how proficient you are at coding (as to not patronize you)

i always start off with these couple of basic layouts, they give you a fairly fluid layout (centered in the page at all times) and then i'd just work in some repeating gradients or colours etc...

HTML

<html>
<body>

<div class="container">

<div id="header">
					
</div>

<div id="content">
					
</div>

<div id="footer">
					
</div>

</div>

</body>
</html>

CSS

/*--------------------------------Globals--------------------------------*/

html,body {
background-image: url('/images/bodybackground.png');
height: 100%;
}

* {
margin: 0;
padding: 0;
border: none;
}

/*--------------------------------Container--------------------------------*/

.container {
height: 100%;
width: 1200px;
margin: auto;
background-image: url('/images/main-content.png');
}

/*--------------------------------Header--------------------------------*/

#header {
height: 250px; 
width: 1000px;
margin: auto;
}

/*--------------------------------Content--------------------------------*/

#content {
height: 400px;
width: 1000px;
margin: auto;
}

/*--------------------------------Footer--------------------------------*/

#footer {
height: 100px;
width: 1000px;
margin: auto;
}

Hope this helps in some way!

Member Avatar for dwssassin

Thanks it does! And yes I am a novice in this stuff.

I was actually hoping to code it and then ask someone to design it (if I can find someone to do it for free) and give them credits for it on the site.

The coding process is already taking way to long I can only imagine that design for a newb would even take longer.

Member Avatar for benhowdle89

I mean to be honest, the coding bit is the harder part, the design work just depends on how creative you are (one thing i struggle with). If you get to the stage where you've coded something up, feel free to send the files over and i'll wrap a bit of design around it for you to look at!

Member Avatar for Member #334542

Its not the way that you have followed, somewhat a designing should be done even not with an enhanced level.So start with designing and integerate the code part. If you have a good skeleton to work with design that it might be ok. But not for practice.

Member Avatar for macgurl70

A few questions:

Did you flowchart the site and how you wanted the various sections to flow?
Do you have an idea how your visitors are going to get to one page to another?
Have you had a friend test out if they can figure out how to get to specific pages?
Can you get around to specific pages?

Rajarajan07 is correct in designing the interface first - this will save time coding since you know what you want to code, and not having to changed it each time you want to alter a layout.

Pencil and paper are the best start, and then you can use photoshop (or gimp) to come up with a look that you like. It doesn't have to be fancy - but it gives you the direction to go with coding.

I guess you could look at the flowchart and design as the map for your coding, that way it gets to the finished website more efficiently.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.