Tips for workflow when creating a website?

Hello everyone, I’m currently going through the Web Development path and I just started the project called “Tea Cozy.”

(https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/layout-with-flexbox/projects/tea-cozy).

Although I only know HTML and CSS so far, I’m curious as to how you would tackle a new project. More specifically after you look at the design aspects given for the Tea Cozy project. Assuming you’re all set up in your text editor, what is your thought process on planning the way you would build the website from scratch?

For myself, I feel as if I have no method so I just start building from top to bottom.

Outside to inside, as opposed to top down. Set out the basic core structure, both opentag and endtag.

<html>

</html>

Now nest the immediate children.

<html>
<head>

</head>
<body>

</body>
</html>

And so on. Build the structure first, and add content last. And, don’t style until the end.

2 Likes

Thank you! I really appreciate the advice.

1 Like

It is quiet often helpful to do a rough drawing on a piece of paper, so you have a basic guideline to follow.

I don’t mean to say anything against your comment. I just personally find it easier to style the structure elements as I am building. I don’t usually style the content until the end though.

It seems to end up being a personal preference depending on the person.

2 Likes

Depends on how you define style.

I knocked together a single-page web app in the last couple of days. I got the element structure in place first, then did the basic CSS to make sure the bits and pieces were where I wanted them. (Positioning, dimensions, etc…)

The last thing I did was “make it pretty” with colours, typeface etc… but only after the structure (which relied on CSS in some ways) and functionality were there which is in line with your approach.

(I’d wager this is probably quite common. Having a working “scaffold”, even if it’s all monochrome and using the default font, makes it easier to see how any interactive/backend stuff will present as you implement it.)

2 Likes