Web Development 1b: Planning and Designing
Websites need to be functional, but they need to look great while doing the job! Now that you’ve learned how to create web content, you’ll learn how to apply design principles, like color combinations and font choices, to achieve the greatest impact. You’ll also learn the behind-the-scenes tasks of organizing your files, ensuring website accessibility, following intellectual property regulations, and performing site backup and maintenance. Let’s unravel the web development process!
Units at a Glance
Unit 1: Beautiful Web Design
Let’s tackle some basic principles of good web design. Aesthetics—the study of beauty—suggests that there are a range of reliable principles we can use to create designs that are pleasurable and that communicate effectively, with respect to both information and emotion. We’ll be taking a look at a number of these principles organized around three essential categories: layout, color, and typography. This is a whirlwind tour of design, a subject to which many professionals devote their lives. But after this, you’ll be able to start thinking about your own design workflow, along with an understanding of how time-tested principles make statements about what beauty is.
What will you learn in this unit?
- Conceptualize and apply solid principles of web layout
- Use a color wheel and create a design palette characterized by effective, complementary color combinations
- Select sensible fonts, according to the mood a design is intended to project and how the fonts will relate to each other
- Identify common tools used by web designers to select colors and fonts
- Execute a basic workflow when creating a site’s design
Unit 2: Files, Formats, and Media
Files are everywhere in web development and a large number of every developer’s daily tasks involve pushing files around, optimizing file sizes, and organizing files correctly. There are a lot of different kinds of files developers routinely deal with; we’ll especially take a closer look at what distinguishes multimedia files—images, sounds, animations—and how to incorporate them into a web page. We’ll also look at an alternative web-dev workflow that focuses on visually oriented development, and we’ll see where that departs from, and unexpectedly adheres to, a developer’s typical set of skills. With a little practice, you’ll have a little more confidence incorporating all kinds of files into your websites.
What will you learn in this unit?
- Discuss the structural details of text, image, and multimedia files
- Incorporate audio and video files into a web page using HTML5 elements
- Explain multimedia-content technology in historical terms
- Use a visually oriented web development environment
- Create simple audio and animated media
Unit 3: Web Maintenance and Performance
Once a site is released into the wild web, a developer’s job can become more involved due to the demands of live web traffic. This is confounded by the fact that servers are just devices and, like all devices, they can fail unexpectedly. In order to ensure smooth running, a server needs to be backed up on a regular schedule, and maintenance plans need to be put in place. Careful documentation ensures that changes made to servers and other details associated with them are kept handy in the event of a problem. In addition to backup and consistent software updates, good site maintenance also includes analytics, search-engine optimization, a quality assurance process, and continual testing and adjustment. Getting a good overview of these processes will give you some idea about how to keep your site in fighting shape.
What will you learn in this unit?
- Think functionally about server and site maintenance
- Discuss different kinds of server backup and their roles
- Describe the role of web analytics
- Explain the quality assurance process and how it fits in with analytics and testing
- Start working with SEO and code adjustments meant to improve search-engine results
Unit 4: Legacy Markup: XHMTL
XML, a data-oriented markup language, is everywhere on the web and in computer applications that we use every day. It’s very useful to understand the important role that XML plays in our continual consumption of data through the web. Even though you will most likely use HTML5 more regularly, knowing the ins and outs of legacy markup helps you know how to work with them when you do come across them.
What will you learn in this unit?
- Discuss how XML documents are used in development contexts
- Describe the role XHTML has played in the history of web development
- Distinguish the important but somewhat subtle differences between an XHTML and an HTML5 document
- Identify the three XHTML 1.0 DOCTYPEs
- Perform the basic steps to transform between XHTML and HTML5
Unit 5: Web Security
Because we so often access the web from the comparatively ordered environments of work and home, it can be easy to forget that the web is, in many ways, a pretty risky place. Hacking attempts are not just frequent—they’re everyday occurrences, with users’ data as the contested prize. In order to work more safely on the web, you’ll need a set of solid security principles. For the sake of technical excellence and client safety, you’ll also need to understand how to protect your servers and your code in order to deal with the web’s less-friendly denizens.
What will you learn in this unit?
- Understand the critical importance of security in a context where attacks are common
- Apply a starting list of security principles that will begin to guide your thinking about trust and privacy on the web
- Discuss a few of the basic and most common web attacks
- Protect your server and know when to use encryption
- Think about safe-coding practices and how to defend against various kinds of code injection
Unit 6: Web Regs
The world is a beautiful place, blanketed in fertile fields of wildflowers with deer grazing on lush grasses in warm sunlight. Chances are, though, someone owns the field, the flowers, and probably the deer. If they can, they’ll try charging you for the sunlight. Likewise, the web is governed by laws and policies. We’ll address a few basics of intellectual property and copyright and begin a habit of thinking about the web as a collection of resources that are owned by others. We’ll also address key ideas about accessibility and making sure that the resources we make available on the web are both ethically and legally usable to as many people as possible (a good thing for everyone). Finally, we’ll consider a few points about doing business online and privacy. When you’re finished, you’ll begin to see the web not only as a useful necessity but also—as is so often the case with centers of interaction—a legally regulated space.
What will you learn in this unit?
- Identify key protections related to intellectual property, such as patent, trademark, and copyright
- Understand licensing rights and how to avoid plagiarism in a web context
- Explain principles of accessibility on the web, including the Americans with Disabilities Act of 1990
- Describe how to address common accessibility issues and how to ensure accessibility for a web page
- Discuss principles of e-commerce on the web, as well as some important social and political ideas related to the web
Unit 7: The Mobile Web
The world’s information flows through mobile devices at an increasing rate of consumption. In fact, devices have become the preferred way to experience the web. For this reason, the web-dev world has adopted a mobile-first philosophy, creating frameworks and tools that put device-centric experiences at the forefront of development priorities. This approach increases reliance on solid mobile-first frameworks and libraries, such as Bootstrap. A library like Bootstrap will accelerate development by providing tested solutions to common issues in mobile development—responsive design, for example, is a critical requirement in the mobile context. Generally, the mobile mindset is a new way of looking at web development, and it’s here to stay.
What will you learn in this unit?
- Describe what’s meant by mobile-first development and how mobile-first priorities affect web development
- List the key priorities for choosing an effective and useful development framework or library
- Integrate the Bootstrap mobile-first, responsive framework into your project
- Understand and use a responsive grid system for web layout, as well as implement a Bootstrap-enabled responsive navbar and generally think about responsive components
- Discuss how mobile-first development has an effect on e-commerce development
Unit 8: Working the Web
So what kind of career can you expect to have? And how does someone get started on the path? We’ll examine the role that career-specific education and organizations can play in your growth as a developer. By gaining experience with competitions and career mentoring, you’ll be prepared to put together a resume and a portfolio that will serve as the foundation for your job search. You’re also going to need to know a few things about how the interview process works—the stages of the interview and what’s expected of you at each stage. Finally, we’ll look at what working as a web developer might feel like in a typical context. It’s always good to know what to look forward to.
What will you learn in this unit?
- Take advantage of the resources offered by a Career and Technical Student Organization
- Discuss and seek out competitive opportunities for high-school coders
- Summarize the roles of the developer’s resume and portfolio in the job search
- Prepare for an interview
- Outline a typical day in a developer’s work life
Required Materials
Software
- Visual Studio Code
- Canva Color Wheel
- Unsplash
- Icons8
- Graphics or visual HTML editor
- Word processing software
- Google Drawings (login required)
- Slide presentation software
- GIMP version 2.10.14
- Leshy SFMaker
- Weebly (login required)
- Image editor
- Wordtracker
- jsfiddle
- w3 XML Validator
- Grid Framework
- Text editor
- Google Docs
- Google Account (login required)
We Recommend These Companion Courses
