JWS Docs - Which comes first the HTML, CSS or contents?

Which came comes first the.... HTML, CSS or contents?

Since we introduced our first JWS tutorial we have received a phenomenal amount of feedback from you all thanking us, with many of you grateful that our help has given you the confidence to create your very first website (Which we think is totally awesome and we can't thank you lot enough too!). One question that became apparent from some of the feedback was... "How do I go about creating my next website or page from scratch, when I'm not following along with your step by step instructions" With most wondering where they should start first the.... HTML, CSS or contents?

Now we did briefly touch on this area with our Next page where we see Sully learn about how to approach his next project, with a three stage guide to Plan, Build and Launch. Though he goes on to create his next project within GitHub using the JWS template again and starting a new repository, which we hope many of you will do too.

But what if you are writing everything from scratch which should come first?

Where to start?

We believe that our approach to creating from scratch is sound advice for all, and especially for those new to web design and building. Which is to break any project down into smaller manageable tasks rather than tackle it all at once. We do this by initially breaking it it down into 3 main areas starting with Contents, HTML then CSS in that order then tackle each of these areas bit by bit like this:

Create Contents

Like we explain in Sully's three stage plan you should always start by planning & collecting together your contents both copy and images / icons.

<body>
Step one
Add content to a HTML file
</body>

Add & Tag your HTML

Then in your editor create a new HTML file and place in your bare contents. By bare contents we mean either type or copy & paste in all your written contents, without worrying about any containing div's with classes that you will target with your CSS. Next go down your page and divide it up by adding basic semantic HTML around your contents such as paragraphs, sections, lists, tables or img tags etc. Though if you feel comfortable enough with the basic tags you could do this as you go along.

<body>
    <main>
        <h2>Step one</h2>
        <p>Add content to a HTML file</p>
        <h2>Step two</h2>
        <p>Then add Semantic HTML tags around the content</p>
    </main>
</body>

Style it up with CSS

Once you have your contents on your page within semantic HTML tags you can then start to write your CSS by selecting these and adding style properties and values to them e.g. add colour and size to your textual elements.

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Segoe, Helvetica, Arial, sans-serif;
color: rgb(70, 70, 70);
}

h2 {
font-size: 1.8rem;
color: rebeccapurple;
}

p {
font-size: 1.2rem;
}

After we have styled up the basic selectors we can then add any extra containing div's that are necessary for us to create our layout.

Such as a product card where its contents are laid out in a certain way and styled up differently to the rest of the page, be that flow of contents, font size or background colour. We would need to add a div around the card content and then give it a class="class_name_here" then select the class name in our CSS and style it up.

<body>
    <main>
        <div class="border_this">
            <h2>Step one</h2>
            <p>Add content to a HTML file</p>
        </div>
        <div class="border_this">
            <h2>Step two</h2>
            <p>Then add Semantic HTML tags around the content</p>
        </div>
    </main>
</body>

In our example we've split the two steps up by wrapping each heading and paragraph within a div and added the class name of "border_this", then in our CSS we select it and add a border property along with the values that will give us a solid 1px thick line in hotpink.

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Segoe, Helvetica, Arial, sans-serif;
color: rgb(70, 70, 70);
}

h2 {
font-size: 1.8rem;
color: rebeccapurple;
}

p {
font-size: 1.2rem;
}

.border_this {
border: solid 1px rgb(255, 105, 180);
}

Bite size tasks

A major plus to breaking your projects tasks into small pieces is that, as you start to complete the tasks the project builds into a real physical thing, which drives you on to wanting to complete the next stage.

As trying to create a whole webpage at once when you're just learning, let alone a multi page website can be a daunting prospect. Plus a little overwhelming as there is so much to learn about in just HTML and CSS alone, which when combined enables you to take a flat, one dimensional, bunch of contents and build it up into a two dimensional, multi faceted and interactive website.

But don't get hung up about whether you are able to create a project today that contains all the bells and whistles possible. Because this should be an enjoyable learning curve and the great thing about creating your own website is that you can continue to build upon and change it up overtime, as you learn new HTML or CSS tricks to add.

Now you may think this is a very basic explanation of the process, and you would be right but when just starting out, keeping things simplified and basic is probably best. But if you feel there is something you would like us to expand on or a particular area you would like us to consider including please let us know.

Page Last Edited: 07/05/2025