The Web Developer Workflow

💡 The Concept

Now that you know a bit of markup, it’s time to move that markup into the web developer workflow. If you’re just starting out in web development, one of the first things you’ll discover is that the tools you use and how you use them matter just as much as the code you write. Before diving into HTML tags and CSS rules, it’s worth getting your workspace set up the right way. A smooth workflow will save you hours of frustration down the road.

Web Development Equipment

Just like a plumber uses wrenches and a carpenter uses saws, a web developer needs the right equipment. The good news: web development equipment is free. Your two essential tools are a text editor (where you write your code) and a web browser (where you test and view your work). No special computer, no expensive software — any modern computer with a free text editor and Chrome is all the equipment you need to get started.

The Core Workflow Loop

Every web developer, from beginner to seasoned professional, lives inside the same three-step loop:

1. Write or edit code in a text editor
2. Save the file
3. Refresh the browser to see the result

That’s it. Simple as it sounds, building this muscle memory early is one of the most valuable things you can do. The faster and more naturally you cycle through these three steps, the more productive you’ll become.

It sounds obvious, but many beginners work with windows overlapping or minimized, which adds constant small interruptions to the workflow. Split your screen from day one.

Choosing the Right Text Editor

Not all text editors are created equal. For coding, the wrong one can actually break your code before you even run it.

Recommended Editors

• Sublime Text: Fast, lightweight, available for Mac and PC. A favourite among beginners and pros alike.
• Notepad++. A solid free option for Windows users.
• Brackets: Built with web developers in mind, with a live preview feature.
• VS Code: Now the most widely used editor in the industry; free and packed with features.

Editors to Avoid

Two editors you should never use for writing code:

• TextEdit (the default Mac text app)
• Notepad (the default Windows app; note: Notepad++ is fine, plain Notepad is not)

The reason is subtle but important: these apps were designed for writing documents, not code. They automatically convert straight quotation marks (") into curly “smart quotes” (" "). In everyday writing that looks nicer, but in HTML and CSS, it breaks everything. Your browser won’t recognise the characters and your code will fail silently. Moreover, a better text editor will help you with the punctuation of coding.

🎬 Video Demonstration

This video demonstrates how to set up your desktop for coding using Sublime Text as the text editor and Chrome Browser to view the result.

Exercise: Try It Yourself

Step 1: Download a text editor. If you aren’t sure which one to use, chose Sublime Text. Sublime Text is the text editor in the videos.

Step 2: Open the text editor and create a new file. (File ->New)

Step 3: Save the file you created with File->Save As, and name it “index.html”. If you are working on a PC, then choose .html as the file type.

Step 4. Copy the Minnesota Summers content into your index.html page.

Minnesota Summers

An article about the beauty of the lakes

The state's nickname, the "Land of 10,000 Lakes", is apt, as there are 11,842 Minnesota lakes over 10 acres in size. The Minnesota portion of Lake Superior is the largest at 962,700 acres and deepest body of water in the state. Minnesota has 6,564 natural rivers and streams that cumulatively flow for 69,000 miles Approximately 10.6 million acres of wetlands are contained within Minnesota's borders, the most of any state except Alaska. 

Wikipedia: https://en.wikipedia.org/wiki/Minnesota

Step 5. Open the same file in the Chrome browser. On the screenshot below, the Sublime Text view is on the left, and the browser view is on the right. Note that the file name on the left side is index.html.

Step 6. Make more changes to the file in the text editor, save them, and then view the change you made in the browser. Add some simple markup to the web page:

• <h1> tags to the title
• <h2> tags to the subtitle
• <p>tags to the paragraphs
• <hr> before the footer
• <small> tags around the reference

That’s the workflow!

Set Up Your Screen for Maximum Efficiency

The practical way to live inside this workflow loop is to keep your text editor and browser open side by side at all times: editor on the left, browser on the right. This way you never have to hunt for a window or lose your place. Every change you save is one Alt+Tab (or a glance to the right) away from being visible.

 

❓ Frequently Asked Questions

★ Key Takeaways

Professional web developers use a specific set of tools and habits to stay efficient. This lesson covered the workflow of writing code in a text editor, saving it, and checking the result in Chrome. Next, you will learn how to organize your project folders and files. Good organization saves a lot of headaches as your projects get bigger.

← Back to Introduction to Web Development Lessons

← Back to All Lessons