CS50 Watch on YouTube

Web Development - CS50's Computer Science for Business Professionals 2017

3 min read 10 hours ago

Published on Oct 23, 2025 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial provides a comprehensive guide to the web development concepts covered in CS50's Computer Science for Business Professionals course. The course is tailored for business professionals who want to understand web technologies and make informed decisions in technology without needing to be technologists themselves. Here, you'll learn the basics of HTML, CSS, and JavaScript, essential for building and understanding web applications.

Step 1: Setting Up the CS50 IDE

Visit the CS50 IDE website to create an account and access the integrated development environment.
Familiarize yourself with the interface, including the file explorer and code editor.
Create a new file named hello.html to start your web development journey.

Step 2: Creating Your First HTML Page

Open hello.html and input the following basic HTML structure:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Save the file and run it in the browser to see the output.

Step 3: Adding Images to Your Web Page

Create a new file named image.html.
Use the following code to display an image:

<!DOCTYPE html>
<html>
<head>
    <title>Image Example</title>
</head>
<body>
    <img src="path_to_image.jpg" alt="Description of Image">
</body>
</html>

Replace path_to_image.jpg with the URL or path of your image file.

Step 4: Creating Links

Create a file named link.html.
Add a hyperlink using the following format:

<!DOCTYPE html>
<html>
<head>
    <title>Link Example</title>
</head>
<body>
    <a href="https://www.example.com">Visit Example.com</a>
</body>
</html>

Step 5: Structuring Content with Headings

Create a file called headings.html.
Use various heading tags to structure your content:

<!DOCTYPE html>
<html>
<head>
    <title>Headings Example</title>
</head>
<body>
    <h1>Main Heading</h1>
    <h2>Subheading Level 2</h2>
    <h3>Subheading Level 3</h3>
</body>
</html>

Step 6: Adding Paragraphs

In a file named paragraphs.html, add text using paragraph tags:

<!DOCTYPE html>
<html>
<head>
    <title>Paragraphs Example</title>
</head>
<body>
    <p>This is a paragraph of text.</p>
    <p>This is another paragraph.</p>
</body>
</html>

Step 7: Creating Lists

Create a file called list.html.
Implement ordered and unordered lists:

<!DOCTYPE html>
<html>
<head>
    <title>Lists Example</title>
</head>
<body>
    <h2>Unordered List</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
    
    <h2>Ordered List</h2>
    <ol>
        <li>First Item</li>
        <li>Second Item</li>
    </ol>
</body>
</html>

Step 8: Creating Tables

In a file named table.html, create a table structure:

<!DOCTYPE html>
<html>
<head>
    <title>Table Example</title>
</head>
<body>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </table>
</body>
</html>

Step 9: Introduction to CSS

Create a file named css0.html to start styling your webpage.
Link a CSS file in the <head> section:

<link rel="stylesheet" type="text/css" href="styles.css">

Begin adding styles in your styles.css file, for example:

body {
    background-color: lightblue;
}
h1 {
    color: navy;
}

Step 10: Understanding JavaScript and the DOM

Create a simple JavaScript file named script.js and include it in your HTML:

<script src="script.js"></script>

Create an interactive element, for instance:

document.querySelector('h1').onclick = function() {
    alert('Hello, World!');
};

Conclusion

In this tutorial, you learned the foundational skills of web development, including HTML structure, CSS styling, and basic JavaScript interactivity. These skills enable you to create and understand web pages effectively. For further learning, explore more advanced topics in web development or delve deeper into JavaScript and its frameworks. Start building your web applications today!

Table of Contents

Recent