Career Ready & Elective Courses / Full Catalog / Web Development 2a: Sketching and Scripting
EDL318 Web Development 2a

Web Development 2a: Sketching and Scripting

You’ve already experienced web development on a smaller scale, but now, it’s time to kick it up a notch! You’ll hit the ground running with the Agile methodology of software development and how it plays into leadership and teamwork amongst developers. You’ll also approach web development from a different perspective- your users!- and you’ll learn to speak the language of JavaScript to enhance your web development efforts. Your efforts will commence in a professional portfolio that will allow you to experience GitHub to display your work. Let’s get that framework going!

Review Course Outline

Units at a Glance

Unit 1: Working in Software Development

As a web developer, you’ll need to learn critical skills for both teamwork and freelancing. On this journey, you’ll gain insight into the ways real software engineers write code and manage their projects with Agile methodologies. Rather than joining an existing company, some web developers prefer to freelance by creating their own brand and bidding to attract personal clients. You’ll learn how to build your portfolio and write competitive proposals. Finally, we’ll introduce the cumulative design project: a data science website where you can dig deep into a preferred topic of your choosing as you practice your research and presentation skills along the way.

What will you learn in this unit?

  1. Describe the principles of Agile software development
  2. Explain the responsibilities of each role on an Agile team
  3. Create a unique brand, project proposal, and portfolio website
  4. Dive into a data-driven research project of your own

Unit 2: Make a Plan

Learn the soft skills of project management, communication, and professionalism you’ll need to succeed on the job. Look over the process for creating a website for a real-world client, stepping through each phase of the design and development. You’ll get a sense of the wide variety of tools and technologies for collaboration in the workplace, including GitHub, Repl.it, Trello, Jira, Asana, and more. Finally, you’ll explore and discover how to connect with a mentor, resolve on the job conflicts, and be your best, ready to tackle a wide variety of web design and software development challenges with a solid plan for success.

What will you learn in this unit?

  1. Identify and manage elements of the website development process
  2. Demonstrate project management skills, such as communicating appropriately with a team and identifying tasks that have dependencies
  3. Set up Repl.it and GitHub as key tools for web development work in this course; identify other industry tools
  4. Practice work behaviors, such as interview skills and conflict resolution, that enhance employability and job advancement
  5. Develop clear communication skills

Unit 3: Sketch It Out

One of the most important parts of designing a website is crafting the user interface: what people will interact with to navigate and use the website. User interface is something we take for granted online, but a lot of thought goes into planning and coding the layout of a website. The professional way to draft your ideas for a web layout is with wireframing, like a digital blueprint for the final product. Along with wireframing, you’ll learn to storyboard: visually predicting and exploring a user’s experience with a product before you create it to find any bugs or prioritize important features. This is also an important part of the Agile process of story mapping, a final step in organizing your plan to create your website.

What will you learn in this unit?

  1. Identify and design intuitive user interfaces
  2. Describe how CSS can be used to create website layouts
  3. Create wireframes and storyboards to illustrate your product ideas
  4. Plan projects with an Agile story mapping process

Unit 4: Get Scripting

Computer languages have evolved a lot just over the last few years. New versions are continually released and updates are made all the time, even to the most popular languages. We’ve come a long way since the 20th century, but it’s important to understand the roots of modern scripting languages along with the ins and outs of their syntax and modern usage. We’ll dive in by taking a look at the differences between various programming languages, reviewing JavaScript fundamentals and new features, getting an introduction to libraries, and exploring some examples of DOM events and cookie manipulation.

What will you learn in this unit?

  1. Explain the function of scripting languages, their history, and some of the modern options available to programmers
  2. Work with the basics of JavaScript code, including variables, data types, conditionals, loops, and arrays
  3. Describe how JavaScript has changed over the years, including some new features and modern libraries
  4. Read and write common DOM events, including creating, updating, and deleting cookies

Unit 5: Making JavaScript Work For You

We will dive under the surface of HTML, CSS, and JavaScript to explore how web pages are structured and better understand how information is sent from place to place on the World Wide Web. Web technologies are constantly evolving, and it’s important to understand some of the most modern innovations in web design as well as older ways of writing code and how websites used to be different from how they are now. The document object model is a powerful tool for manipulating web pages, and along with an overview of object-oriented programming, you’ll be ready to start some more advanced web development projects and strengthen your understanding of everything that comes together to make websites work the way we want.

What will you learn in this unit?

  1. Describe the purpose of the document object model
  2. Understand and incorporate JavaScript objects, classes, and functions
  3. Manipulate links and images with the document object model
  4. Understand the importance of AJAX and related web technologies

Unit 6: JavaScript Forms

In this unit, you will learn everything you need to know about JavaScript forms. Almost every modern website uses forms in one way or another and understanding how to write and use forms effectively is a critical skill for any web developer. Everything from product ordering to internet marketing depends on accurate information about customers gathered from forms. Being able to write and validate your own forms will bring you that much closer to your future career in web development.

What will you learn in this unit?

  1. Conduct effective internet marketing
  2. Identify and use form elements to solicit user input
  3. Validate web forms prior to submission
  4. Use JavaScript with HTML form controls

Unit 7: JavaScript Libraries

In the physical world, a library is a place where you can discover hundreds of years of knowledge to add to your projects. In programming and web development, a library is a similar resource of tools that can expand our abilities beyond what one person could reasonably write by themselves. We’ll look at how JavaScript libraries work and how to use them in your own code. We’ll explore the advantages and disadvantages as well as giving you tips and tricks for choosing your libraries wisely.

What will you learn in this unit?

  1. Explain how a library item achieves desired processing
  2. Explore common JavaScript libraries and describe the advantages and disadvantages of using libraries
  3. Analyze pre-built library items to determine functionality
  4. Incorporate pre-built library items into web pages

Unit 8: Do Your Users See What You See?

Browsers are a fundamental part of the way we use the internet, but they can also be a sticking point when we try to get our websites working on all devices. We’ll look at common browser compatibility JavaScript issues and how to solve them. We’ll explore several tools to track down or work around problems, like browser dev tools, polyfills, and libraries. Getting modern JavaScript features working in older browsers isn’t the most glamorous part of web development, but it’s important to keep in mind that many of your users won’t have the same computer system you’re using to develop your website. What might look great to you might not even load on someone else’s machine.

What will you learn in this unit?

  1. Understand what a browser is and why there are a variety of them
  2. Identify key browser features and how to use them like a professional
  3. Determine which version of JavaScript specific browsers support and code a program to meet acceptable standards
  4. Describe how obsolete constructs and coding practices affect browser function
  5. Make web pages accessible and functional when JavaScript is disabled or unsupported

Required Materials

Physical

  • Video recording device

Software

  • Word processing software
  • Graphics software
  • GitHub (requires login)
  • Replit.com (requires login)