Back to Learning Catalog

Status

Open

Estimated Completion Time

18 weeks

Overview

Web Development 1b: Planning and Designing

Having an aesthetically pleasing, secure, mobile-friendly, and well-functioning website all starts with a plan. Start with learning how to apply the fundamentals of visual design to develop beautiful websites. Engage your users through different embedded media that you’ve learned how to create and embed. Understand your responsibility to keep you and your users safe through compliance and identifying web vulnerabilities by understanding security principles. Your career in web development starts here: with a plan and design!

Note: due to the technical requirements of this course, it is not recommended for Chromebooks.

During this course, you will learn career-related skills and earn a badge for this accomplishment. A badge is a digital certification of your career-related learning that you can share on social media and higher education platforms, or with colleges, potential employers, peers, and colleagues. Select this link to learn more about badges.

Course Requirements

Required Materials: Software

Visual Studio Code
Canva Color Wheel
Unsplash
Icons8
Graphics or visual HTML editor
Word processing software
Google Docs and 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

Major Topics and Concepts

Unit 1: Beautiful Web Design
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
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
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
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
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 Regulations
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

Unit 7: The Mobile Web
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 and implement a Bootstrap-enabled responsive navigation bar
Discuss how mobile-first development has an effect on e-commerce development

Unit 8: Working the Web
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

Credits .5

Competencies

  • Basic Principles of Web Design
    Students will demonstrate an understanding of basic principles of web design by describing the use of design principles centered around layout, color and typography, explaining the incorporation of text, images and multimedia, and creating their own web design which applies these principles and applications.
  • Web Maintenance and Performance
    Students will demonstrate an understanding of web maintenance and performance by designing a plan that addresses best practices for server data safety, explaining the components of website analysis and quality control, and describing the use of XML markup language to enhance data transfer, compatibility and encoding.
  • Web Security and Regulations
    Students will demonstrate an understanding of web security and regulations by implementing security protocols to protect the server and code, explaining the appropriate use of web resources, and analyzing the ways in which web resources are created.
  • Mobile Web Design
    Students will demonstrate an understanding of mobile web design by identifying the needs associated with the mobile community, explaining the qualities of responsive design associated with the bootstrap framework, and creating a template utilizing the bootstrap frameworks grid system and CSS3 media queries.
  • Educational and Career Opportunities
    Students will demonstrate an understanding of educational and career opportunities within the field of web development by explaining the role of the career and technical student organization (CTSO), the importance of student-oriented technical organizations, and the job search process as it relates to web development.

Pre-Requisites

Web Development 1a

Attend a virtual open house

We offer regular online open house webinars where VLACS staff members provide parents and students with an overview of our programs and answer questions about online learning.