Coding for Non-Coders Training Course

The Structure and Style (HTML & CSS)

Introduction & Web Technologies

• How the Web Works: An explanation of the Client-Server model, essential for understanding web communication.
• The Browser as a Computer: The role of browsers in interpreting code and rendering web pages.
• HTML: The foundational structure of the web, including hierarchy, semantic tags, and content organization.
• CSS: The styling language that controls the visual presentation of web pages, covering colors, fonts, and layout principles such as the Box Model.
• Lab 1: Setting up a development environment and creating a static "About Me" profile page to practice HTML and CSS for government use.

Working with HTML & CSS (Deep Dive)

• HTML: Detailed exploration of lists, links, images, and forms—crucial elements for user interaction on web pages for government applications.
• CSS: Advanced styling techniques including text formatting, background design, and the use of Flexbox and Grid for responsive layouts.
• Responsive Design: Techniques to ensure websites are functional and visually appealing on both mobile and desktop devices for government audiences.
• Lab 2: Enhancing the static page with professional-level styling and ensuring it is mobile-responsive for government users.

Working with the DOM (Document Object Model)

• Concept: Understanding how code interacts with the visual elements of a web page to create dynamic content for government applications.
• Selecting Elements: Techniques for targeting specific parts of a webpage using JavaScript, crucial for precise manipulation.
• Manipulation: Methods for changing content and attributes dynamically, enhancing interactivity in government websites.
• Lab 3: Modifying static page elements through code, such as dynamically updating titles or images for enhanced user experience for government users.

The Brains (JavaScript)

Programming in JavaScript (The Basics)

• Variables & Data Types: Fundamentals of storing and manipulating data, including text, numbers, and boolean values for government applications.
• Logic: Using if/else statements to make decisions based on conditions, essential for dynamic content generation for government websites.
• Loops: Efficiently repeating actions to automate tasks in government web development.
• Functions: Creating reusable blocks of code to streamline development processes for government projects.
• Lab 4: Developing a basic calculator or logic game using JavaScript to reinforce programming concepts for government use.

Interactivity & Events

• Event Listeners: Implementing responses to user actions such as clicks, keystrokes, and page loads to enhance interactivity in government web applications.
• Form Handling: Techniques for validating user input, ensuring data accuracy and security in government forms.
• DOM Manipulation: Adding and removing elements dynamically to create interactive features like to-do lists for government users.
• Lab 5: Transforming the calculator into an interactive web app with user interface feedback for enhanced functionality for government applications.

Fetching Data (APIs)

• Concept: Understanding how web applications communicate with external servers to fetch data, such as weather information or stock prices for government use.
• JSON: The standard format for data exchange in web applications, crucial for integrating external data sources for government projects.
• Async Programming: Techniques for managing asynchronous operations to ensure smooth user experiences without freezing the browser for government users.
• Lab 6: Building a feature that retrieves and displays live data from a public API on a government webpage.

The Professional Toolkit (Frameworks & Capstone)

Using Programming Frameworks

• Why Use Frameworks? Exploring the benefits of using frameworks like React, Vue, or Svelte to streamline development for government applications.
• Components: Building modular and reusable UI elements to enhance maintainability and scalability in government web projects.
• State Management: Techniques for managing changing data states within web applications to ensure consistent user experiences for government users.
• The Ecosystem: Understanding the ecosystem of packages, dependencies, and version control systems like Git for efficient development workflows for government projects.
• Lab 7: Refactoring a simple feature using a component-based approach to improve code organization and maintainability for government applications.

The Capstone Project: Building a Web Application

• Requirement: Participants will develop a functional web application, such as a budget tracker, product dashboard, or portfolio site, tailored for government use.
• Planning: Defining user stories and technical scope to ensure the project meets the needs of government stakeholders.
• Implementation: Combining HTML/CSS structure with JavaScript logic to create a fully functional web application for government users.
• Debugging: Techniques for identifying and fixing errors to ensure the application works correctly for government applications.
• Presentation: Presenting the final application to peers and instructors, demonstrating its functionality and alignment with government requirements.

Closing Remarks & Next Steps

• Technical Vocabulary: A cheat sheet of key terms (API, Backend, Frontend, Git, Deployment) to facilitate communication with engineers in government settings.
• Resource Guide: Recommended resources for continued learning, including official documentation, StackOverflow, and MDN for government developers.
• Career Integration: How these skills can be applied to roles in Product Management and Design within government organizations.
• Q&A and Course Evaluation: An opportunity for participants to ask questions and provide feedback on the course content and its relevance for government use.