Coding for SEE Students

In this module students will learn to develop interfaces, wireframes, graphics using Figma. Figma being a popular tool for interface design and user experience design will provide a good insights in the area of designing to our SEE students. Students can also plan their interfaces which they will learn to develop using html and CSS in the next module. Students will learn the following things in Figma.

Figma

• Figma and its Characters
• Making a Figma account
• Navigating the Figma interface
• Figma's workspace understanding (panels, toolbar, properties)
• Drawing tools and shapes
• Grouping and ungrouping objects
• Aligning, distributing, and arranging elements
• Frames and artboards

Advanced Figma

• Introduction: Components and instances
• Creation of reusable components with variants
• Prototypes and types
• Creating interactive prototypes
• Interaction addition and management
• Animations and Transitions
• Prototyping flows and user journey
• Figma designing for different screen sizes
• Using auto-layout for responsive design

In this module students will learn to use html (Hyper Text Markup Language) to publish content on the web. This module will give idea about web interfaces and how web based applications use different html elements to create visual layouts in web. Additionally, students will learn about (CSS) Cascading Style Sheet which will help them to apply styles to those html elements. 
 

HTML for Web Designing

• HTML and Web
• HTML document settings
• HTML document structure: (, , , )

Text and Formatting

• Headings
• Line breaks 
• Paragraphs
• Horizontal Rules 

List and Links

• Ordered Lists 
• Unordered Lists 
• Description Lists 
• List Items 
• Nesting Lists
• Creating Hyperlinks
• Using attributes: href, target, title

Images and Figures

• Images addition 
• Image attributes: src, alt, title, width, height

Audio and Video

• Inserting Audio Files 
• Inserting Video Files 
• Audio and Video Features: controls, autoplay, loop, muted

Form Basics

• Creating Forms: form
• Form attributes: action, method
• Input elements: input, textarea, button, select, option
•  Input Types: text, password, email, number, date, file, checkbox, radio

Advanced Form Elements

• Inputs Grouping with fieldset and legend
• Inputs Labeling with label
• Form Validation Attributes: required, pattern, min, max, maxlength

Creating Tables

• Table structure: table, tr, td, th
• Adding Headers: thead, tfoot, tbody
• Cells Merge: colspan and rowspan

Semantics HTML

• Semantics and semantic tags: header, nav, section, article, aside, footer, main, figure, figcaption, time
• Benefits of semantic HTML for SEO and accessibility

HTML iframes

• Embedding a custom link Iframe
• Embedded Google map
• Embedded YouTube
• Embedded Facebook page plugin

Getting Started with CSS

• Role of CSS in Web Development
• Syntax and Structure of CSS
• Linking CSS to HTML: inline, internal, and external stylesheets

Selectors and Properties

• Basic selectors and their type, class, and ID selectors
• Attribute selectors
• Combining and Grouping selectors
• CSS properties and values
• Pseudo-class
• Pseudo-Element

Box Model

• Box model: content, padding, border, and margin
• Width and Height
• Using box-sizing property
• CSS reset and normalization

Background Properties

• Color
• Images
• Repeat
• Size
• Position
• Multiple backgrounds
• CSS gradients

Text Styling

• Styling text with CSS: Color, Font-size, Font-type
• Text properties: text-align, text-decoration, text-transform, letter-spacing, line-height
• Using web fonts: Google Font

Positioning and Display

• Positioning in CSS: Static, Relative, Absolute, Fixed, Sticky
• Display property: Block, inline, inline-block, none
•  Floating elements and clearing
• Overflow

Flexbox Layout

• Flexbox: Introduction
• Flex container properties: Display: flex, flex-direction, flex-wrap, justify-content, align-items, align-content
• Flex item properties: order, flex-grow, flex-shrink, flex-basis, align-self
•  Building responsive layouts

CSS Grid Layout

• CSS Grid: Introduction
• Grid container properties
• Grid item properties: grid-column, grid-row, grid-area
• Building complex layouts with CSS Grid

Responsive Design

• Using media queries
• Flexible grids and layouts
• Responsive Images and Videos

CSS Animations ,Transitions and Transform(2d, 3d)

• Creating transitions with transition property
• Keyframe animations with @keyframes
• Animation properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction
• Practical examples of CSS animations

CSS Variables and Custom Properties

• CSS variables: Introduction
• Defining and using custom properties
• Scope and inheritance of CSS variables
• Practical uses of CSS variables

Browser Support

• Supported by Internet Explorer with prefix -ms-
• Supported by Firefox with prefix -moz-
• Supported by Chrome with prefix -webkit-
• Supported by Safari with prefix -webkit-
• Supported by Opera with prefix -webkit-

Introduction

• Bootstrap, benefits and Project Setting
• Bootstrap’s grid system
• Responsive design principles

Bootstrap Components

• Bootstrap’s built-in components for navigation bars, buttons, forms, alerts, modals, etc.
• Customizing Bootstrap components
• Understanding Bootstrap’s utility classes

Advanced Bootstrap

• Working with Bootstrap’s JavaScript plugins
• Customizing Bootstrap with SCSS
• Creating a custom Bootstrap theme

Introduction

• JavaScript and Development Environment Setting up
• Syntax and basic constructs (variables, data types, operators)
• Control structures (if-else, switch, loops)

Functions and Scope

• Defining and raising functions
• Function expressions and arrow functions
• Scope and closures
• Higher-order functions
• Callback functions

Objects and Arrays

• Creating and manipulating objects and arrays
• Array methods (map, filter, reduce, etc.)

Asynchronous JavaScript

• Asynchronous programming
•  Working with promises
•  Async/await syntax
• Fetching API for making HTTP requests

DOM Manipulation

Introduction

• Accessing and traversing the DOM
• Selecting elements: getElementById, getElementsByClassName, querySelector, querySelectorAll
• Manipulating DOM elements: changing content, attributes, and styles

Events and Event Handling

• Events and its propagation
• Adding event listeners
• Event delegation
• Common events: click, submit, load, and others.

Advanced DOM Manipulation

• Creating and inserting elements
•  Removing and replacing elements
• Working with forms and form validation
• Using local storage and session storage

jQuery

Introduction

• JQuery and its advantages
• jQuery in a project
•  jQuery syntax and selectors
• Manipulating DOM elements with jQuery

jQuery Events and Effects

• jQuery: Event handling
•  jQuery effects: show, hide, toggle, fade, slide
• Creating custom animations with animate
• Using jQuery plugins

Introduction to Databases and MySQL

• Databases and MySQL: An introduction
• Understanding Relational Database Concepts
• Advantages and Disadvantages of MySQL

 MySQL Installation and Configuration

• MySQL Server: Installation and Configuration
• MySQL Architecture
• MySQL Server and Client: Configuration

 MySQL Data Types and Operators

• Understanding MySQL Data Types
• String Data Types
• Numeric Data Types
• Date and Time Data Types

MySQL Operators

• Arithmetic Operators
• Bitwise Operators
•  Comparison Operators
• Compound Operators
• Logical Operators

MySQL Expressions and Functions

• String Functions
• Numeric Functions
• Date Functions
• Advanced Functions
• SELECT, INSERT, UPDATE, DELETE, or CREATE VIEW statement

Module 4: MySQL Database Design and Creation

• Database Design Concepts
• Modeling Interface
•  Additional Modeling Tools
• Modeling Tutorials
• Forward and Reverse Engineering
• Schema Synchronization and Comparison
• Table Templates
• Customizing DBDoc Model Reporting Templates
• Creating a Database and Tables
     MySQL CREATE TABLE
     Create Table Using Another Table
• Working with Data Types and Table Options
  MySQL DROP TABLE
  MySQL ALTER TABLE
• MySQL Constraints
• MySQL NOT NULL Constraint
• MySQL UNIQUE Constraint
• MySQL PRIMARY KEY Constraint
• MySQL FOREIGN KEY Constraint
• MySQL CHECK Constraint
• MySQL DEFAULT Constraint

MySQL Data Manipulation

Data Manipulation Statement: ( CALL Statement)

• DELETE Statement
• DO Statement
•  EXCEPT Clause
• HANDLER Statement
• IMPORT TABLE Statement
• INSERT Statement
• INTERSECT Clause
• LOAD DATA Statement
• LOAD XML Statement
• Parenthesized Query Expressions
• REPLACE Statement
• SELECT Statement
• Set Operations with UNION, INTERSECT, and EXCEPT
• Subqueries
• TABLE Statement
•  UPDATE Statement
•  UNION Clause
• VALUES Statement
• WITH (Common Table Expressions)

Inserting Data into Tables

• INSERT INTO
• Insert a Complete Record
• Insert a Partial Record
• Insert Data Only in Specified Columns

Retrieving Data from Tables

• Selecting All Data
• Selecting Particular Rows
• Selecting Particular Columns
• Sorting Rows
• Date Calculations
• Working with NULL Values
• Pattern Matching
• Counting Rows
• Using More Than one Table

Updating and Deleting Data from Tables

• Using INSERT to add new records to tables
• Using INSERT to add multiple rows at once
• Using DELETE to remove rows from tables
• Using DELETE to remove multiple rows at once

MySQL Joins

• MySQL Outer Join
• MySQL Inner Join
• MySQL Left Join
• MySQL Right Join
• MySQL Self Join
• MySQL Full Join
• MySQL Cross Join
• MySQL UPDATE JOIN
• MySQL DELETE JOIN
• MySQL Recursive Join

• Introduction
•  Installing and setting up Git
• Basic Git commands (init, clone, add, commit, push, pull)
• Understanding merging and branches
•  Resolving merge conflicts

Introduction to Python

• History of Python: Origins, development by Guido van Rossum, and key milestones (Python 2 vs Python 3).
• Why Python?: Simplicity, readability, and strong community support.
• Python’s Role: Used in web development, AI, data science, and automation.

Key Features of Python

• High-level language with automatic memory management.
• Dynamically typed (no need to declare variable types explicitly).
• Interpreted language (executed line-by-line).

Python 2 vs Python 3

• Syntax Differences: print "Hello" (Python 2) vs. print("Hello") (Python 3).
• Library Changes: Differences in standard functions (e.g., range() function).

Applications of Python

• Web Development: Django, Flask.
• Data Science & Machine Learning: Pandas, NumPy, Scikit-learn.
• Automation & Scripting: File manipulation, web scraping.
• Game Development: Pygame for 2D games.

Environment Setup

• Installing Python on Windows, macOS, and Linux.
• Verifying installation via python --version.
• Setting up pip for package management.

Virtual Environments

• Creating virtual environments using venv, virtualenv, conda.
• Importance of isolating dependencies.

Development Tools & IDEs

• Google Colab & Jupyter Notebooks: Best for data analysis.
• IDEs: PyCharm, VS Code, Spyder – pros and cons.

Debugging & Code Execution

• Using breakpoints, debugging tools, and running scripts in different environments.

Markdown for Documentation

• Writing README.md files using markdown syntax.

Python Basics

Python Syntax & Structure

• Writing and running the first Python program (print("Hello, World!")).
• Importance of indentation in Python.

Variables and Data Types

• Built-in types: int, float, str, bool, complex, None.
• Type Conversion: int(), str(), float().

Operators in Python

• Arithmetic: +, -, *, /, //, %, **.
• Logical: and, or, not.

 Functions and Recursion

Defining Functions

• Using def to create functions.
• Arguments: positional, default, keyword, arbitrary (*args, **kwargs).
• Returning values with return.

Advanced Function Concepts

• Lambda Functions: Anonymous functions (lambda x: x + 1).
• Recursion: Base case, recursion tree, stack diagrams.

Error Handling

• Using try/except/finally for exception handling.

 Data Structures in Python

Strings and Slicing

• Indexing (my_string[0]), slicing (my_string[1:5]).
• String methods: .lower(), .upper(), .split(), .join().

Lists and Slicing

• List operations, comprehension, and common methods (.append(), .remove()).

Tuples vs Lists

• Immutable vs mutable properties.

Dictionaries and Sets

• Dictionaries: Key-value pairs.
• Sets: Union, intersection, difference operations.

 Object-Oriented Programming (OOP)

Classes and Objects

• Defining classes with class, attributes, and methods.
• __init__() constructor.

Advanced OOP Concepts

• Inheritance, polymorphism, encapsulation, and operator overloading.

File Handling and Modules

File Handling

• Reading and writing files with open().
• Working with CSV files using the csv module.

Modules & Packages

• Importing standard/custom modules.
• Installing packages using pip.