Assignments

Assignment Title: Exploring Web Development Tools

Objective:

To familiarize learners with various web development tools, understand their differences, and determine their suitability for different types of projects.

Assignment Overview:

Web development requires a set of tools that can range from simple code editors to complex integrated development environments (IDEs). This assignment will introduce you to three different tools: an online code playground (CodePen), a powerful text editor (Visual Studio Code), and another web-based editor (JSFiddle). You will explore each tool, understand their unique features, and learn why and when they are useful.

Tools to Explore:

1. CodePen – https://codepen.io/pen/
2. Visual Studio Code (VS Code) – Downloadable editor at https://code.visualstudio.com/
3. JSFiddle – https://jsfiddle.net/

Task 1: Exploring CodePen

• Visit CodePen and create a new ‘Pen’.
• Familiarize yourself with the interface: where to write HTML, CSS, and JavaScript.
• Experiment by creating a simple web page with a heading, paragraph, and a styled button.
• Explore the ‘Settings’ to add external libraries like Bootstrap or jQuery.
• Reflect on the benefits of using CodePen for quick prototyping and sharing code snippets.

Task 2: Getting to Know Visual Studio Code

• Download and install Visual Studio Code.
• Open it and explore the various views (Explorer, Search, Source Control, Debug, Extensions).
• Create a new file for each: HTML, CSS, and JavaScript. Save them in a new project folder.
• Write a simple web page content in HTML, style it with CSS, and add an alert in JavaScript.
• Install an extension, such as Live Server, to preview your web page in real-time.
• Reflect on how VS Code is different from CodePen and the advantages it provides for larger projects.

Task 3: Using JSFiddle

• Go to JSFiddle and start a new fiddle.
• JSFiddle’s layout is similar to CodePen’s; identify the differences in the interface and features.
• Replicate the simple web page you created in CodePen here in JSFiddle.
• Test the ‘Fiddle Options’ for adding resources like libraries or changing the layout.
• Consider the use cases for JSFiddle and compare your experience with that of using CodePen.

Reflection Questions:

• What are the advantages of using an online editor like CodePen or JSFiddle?
• When would a developer choose to use a text editor like VS Code over an online editor?
• How does the ability to add libraries or frameworks in these tools affect the development process?
• Describe a scenario where you would prefer using VS Code instead of online editors, and vice versa.

Submission:

• Share the links to your Pens and Fiddles.
• Submit a one-page reflection document answering the reflection questions and detailing your experience with each tool to your Discord channel.

Evaluation Criteria:

• Completion of tasks in each tool.
• Depth of exploration and experimentation.
• Quality and thoughtfulness of the reflection document.

Resources for Further Learning:

• Official documentation and tutorials for each tool.
• Online courses on web development that cover these tools in more detail.

By the end of this assignment, learners (you) will have a hands-on understanding of the differences between various web development environments and will be able to make informed decisions about which tools to use for their projects.