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:
- CodePen – https://codepen.io/pen/
- Visual Studio Code (VS Code) – Downloadable editor at https://code.visualstudio.com/
- 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.