Web Development 2a: Sketching and Scripting

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

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

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 20^th 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

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

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

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

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

Physical

• Video recording device

Software

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