Fullstack Web Development

Hypertext markup language

• Set Up Your HTML Workspace

  Create a project folder and open it in Visual Studio Code with a web browser ready for previewing pages.

• Build Your First HTML Document

  Create an HTML file with the standard document structure and open it in a browser.

• Add Headings and Paragraphs

  Organize sample page content using headings and paragraphs.

• Connect Pages with Links

  Add links that navigate between two HTML pages and to an external website.

• Add Images with Descriptions

  Display an image on a page with alternative text that describes it.

• Organize Information with Lists

  Present related information using ordered and unordered lists.

• Structure Pages with Semantic Elements

  Organize a page into header, navigation, main, and footer sections using semantic HTML elements.

• Collect Information with a Form

  Create a contact form with labeled text, email, and message fields and a submit button.

• Project: Build a Community Event Website

  Create a multi-section event website that uses semantic structure, headings, links, images, lists, and a contact form.

Cascading Style Sheet

• Set Up Your CSS Workspace

  Create an HTML and CSS project in Visual Studio Code and open it in a web browser.

• Connect a Stylesheet to a Web Page

  Link an external CSS file to an HTML page and apply one working style rule.

• Select HTML Elements to Style

  Style page elements using type and class selectors.

• Understand the Cascade and Specificity

  Predict which CSS rule applies when multiple rules target the same element.

• Apply Colors and Backgrounds

  Set accessible text, background, and border colors using CSS.

• Style Text with CSS

  Format headings and paragraph text using font, size, weight, and line-height properties.

• Control Element Size and Spacing

  Adjust an element’s width, padding, border, and margin using the box model.

• Arrange Content with Flexbox

  Align and space a group of page elements using Flexbox.

• Adapt Layouts for Different Screen Sizes

  Use a media query to adjust a Flexbox layout for narrow screens.

• Capstone Project: Build a Responsive Landing Page

  Build a styled landing page that uses selectors, typography, the box model, Flexbox, and a media query.

Introduction to Frontend programming with Javascript

• Set Up Your JavaScript Workspace

  Create a project folder and run a starter web page in a browser using Visual Studio Code.

• Show Messages and Store Values

  Declare variables and display their values in the browser console.

• Use JavaScript Values and Operators

  Write a short script that combines text and calculates with numbers.

• Make Decisions with Conditionals

  Write an if/else statement that chooses an outcome based on a value.

• Create Reusable Functions

  Write and call a function that accepts input and returns a result.

• Store and Access Lists with Arrays

  Create an array and read or update specific items in it.

• Repeat Actions with Loops

  Use a loop to process every item in an array.

• Find and Update Page Elements

  Use JavaScript to select an HTML element and change its content.

• Respond to Clicks and Form Input

  Handle a user event to read form input and update the page.

• Debug JavaScript in the Browser

  Use browser developer tools to find and fix an error in a JavaScript page.

• Build an Interactive Task List

  Build a task list that lets users add, complete, and remove tasks.

Introduction to computer programming with Python

• Install Python and Set Up VS Code

  Configure Python 3 and VS Code to create and run Python files.

• Write and Run Your First Python Program

  Create and run a Python script that displays text in the terminal.

• Store Information in Variables

  Use variables to store and display text, numbers, and Boolean values.

• Collect User Input and Convert Values

  Build a script that collects user input and converts it into the required data type.

• Calculate with Numbers and Operators

  Write a Python script that uses arithmetic operators to calculate a result.

• Make Decisions with If Statements

  Use conditional statements to choose an action based on user input.

• Repeat Actions with Loops

  Use a loop to repeat a program action until a chosen condition is met.

• Organize Multiple Values in Lists

  Create and update a list of values in a Python program.

• Reuse Code with Functions

  Create and call functions that perform named tasks in a Python program.

• Build a Command-Line To-Do List

  Build a terminal-based to-do list that lets a user add, view, and remove tasks.

Introduction to Backend programming

• Set Up Python, Flask, and a Development Environment

  Set up a Python virtual environment with Flask installed and ready to run.

• Create and Run Your First Flask App

  Build and run a Flask app that displays a welcome message in a browser.

• Connect URLs to Flask Routes

  Create Flask routes that return different responses for different URLs.

• Display Pages with HTML Templates

  Render an HTML template from a Flask route using Jinja.

• Add CSS and Static Files

  Style a Flask page by serving a CSS file from the static folder.

• Receive Form Data with GET and POST

  Process a submitted HTML form using a Flask POST route.

• Validate Form Input and Show Feedback

  Validate submitted form data and display a helpful message when input is invalid.

• Save and Retrieve Data with SQLite

  Store form submissions in a SQLite database and display saved records.

• Edit and Delete Database Records

  Add Flask routes that update and delete SQLite records.

• Capstone Project: Build a Task Tracker

  Build a Flask task tracker that lets users create, view, edit, and delete tasks stored in SQLite.