Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

The title question is unfortunately pretty vague (or at least may be asking differently than what I intend)... but let me elaborate.

I know basic HTML5 and CSS. I don't need to learn the tags and how they work. What I'm looking for is some information on what sort of process to follow when actually coding a professional style website. I want to make a portfolio website for myself from scratch (that is, not to use turnkey software such as Wordpress and such) but I don't know what to do as a process to making a clean site from the start. I'm a CS student and my skill set is in Java/C#, but I do want to learn web development as well.

I know that HTML is for the content of the site, CSS is for the look, and Javascript is for the behavior.

Do I need to have an idea of what the site is ultimately going to look like before I start the HTML? Can I just write the HTML to describe the content and worry about the look of the site afterward, or do I have to write the HTML knowing what I want the site to look like as I write it?

If I want a horizontal nav bar at the top, do the links have to be side by side in the HTML code?

These are all things I don't know... how to actually build a proper website. I know how to make basic pages with text and links and headers and all that, but to make a professional website is foreign to me. Every page I find on Google is either too high level (giving a design and implementation process without giving examples of how to implement once you know what you want) or is too beginner (trying to teach me HTML and CSS when I already know what I need to know in that regard).

share|improve this question

3 Answers 3

up vote 1 down vote accepted

I would start with what content you need, and be fairly generous in using id properties.

If you look at http://www.csszengarden.com you can see many examples of how to drastically change look by using css.

I also use http://caniuse.com to decide which html5 elements to use based on which browsers I care about, or which ones I need to add in javascript to fail gracefully.

You should also use unobtrusive javascript, http://en.m.wikipedia.org/wiki/Unobtrusive_JavaScript, to keep the webpage clean and fail gracefully.

So, start with content, then look at graceful degradation with javascript, then make it look nice. This will be iterative,so you may need to bounce between these often.

share|improve this answer
    
This is exactly the sort of advice I needed. I recently learned about software engineering principles and iterative development, but I don't know how to apply this to professional web design. –  agent154 Feb 23 at 2:11
    
And thanks for pointing me to csszengarden. That site is an amazing demonstration, and hopefully a great teaching tool. –  agent154 Feb 23 at 2:14
    
Csszengarden is an amazing site. There is something similar for opengl shaders but not with the same objects –  James Black Feb 23 at 2:24
    
@agent154: You would apply software engineering principles and iterative development to professional web design the same way you would any other software project. –  Robert Harvey Feb 23 at 2:45

Do I need to have an idea of what the site is ultimately going to look like before I start the HTML? Can I just write the HTML to describe the content and worry about the look of the site afterward, or do I have to write the HTML knowing what I want the site to look like as I write it?

Yes, definitely start with an outline of what the site is going to do before you start. It'll make your life a lot easier. I usually start with a notepad and just draw a rough outline of where this element is going, what I want the user to be directed towards, and so on.

If I want a horizontal nav bar at the top, do the links have to be side by side in the HTML code? Yes. The simplest semantic way to do something like this is probably:

<header>
   <nav>
      <ul>
         <li><a href='LINK1'>Link name 1</li>
         <li><a href='LINK2'>Link name 2</li>
         <li><a href='LINK1'>Link name 3</li>
      </ul>
   </nav>
</header>

with some css like:

nav ul li{
   display:inline-block;
}

would give you a pretty good starting point.

Do I need to have an idea of what the site is ultimately going to look like before I start the HTML? Can I just write the HTML to describe the content and worry about the look of the site afterward, or do I have to write the HTML knowing what I want the site to look like as I write it?

Yes, definitely start with an outline of what the site is going to do before you start. It'll make your life a lot easier. I usually start with a notepad and just draw a rough outline of where this element is going, what I want the user to be directed towards, and so on.

If I want a horizontal nav bar at the top, do the links have to be side by side in the HTML code?

But honestly, if I was in your situation, I'd start off with a CSS framework like Bootstrap, or Foundation to really get a handle on how a good percent of web developers are developing their code.

If you decide not to start with a framework, at least follow some frontend coding standards, like using a grid system (Simple Grid is one I like, but there are gazillions out there), or following Object Oriented CSS.

share|improve this answer
    
As a professional, I would never recommend Bootstrap to anyone. The number of people using X has nothing to do with how good it is. –  cimmanon Feb 25 at 21:49

If you know how HTML / CSS works then I'm sure you are aware that the concept of CSS is to move the presentation away from the site content. So to answer your question you could just write your content and look to style it later. In reality however most people will create a HTML / CSS template from some wireframes and then work on making it dynamic.

In terms of professional code style why not view the source of pages that you respect and see how they lay things out. Google has a style guide that you may want to check out for this too http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

A good start to creating a dynamic webpage would be to look into a language like PHP. There are plenty of tutorials of how to generate a HTML pages in this way and once you have the basics down you can remove some of the boilerplate associated with web development by using a Framework such as Zend Framework or Code Igniter (PHP) as this is often how professional web services are developed.

Another tool that can make your life easier if you wish to lean on other developers would be to use a UI Framework such as bootstrap to aid your HTML / CSS / JS implementation. http://getbootstrap.com/

My advice would be to decide if you are more focused on dynamically generating webpages or just serving static HTML / CSS / JS files and focus on the techniques involved in doing that first. I hope some of these resources are useful.

-edit-

To clarify my advice would be to draw some wireframes: http://en.wikipedia.org/wiki/Website_wireframe first and then create the HTML / CSS to match this although you do not have to do this if you don't want to. If you choose to just write the content then my advice would be to make sure you use appropriate HTML5 tags such as article, header, footer etc. This will make your life easier when you come to style it.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.