Programming Fundamentals

Course type: Information and digital technologies

Age: 12-18 years

This course is intended for teens from 12-18 years old and is designed for step-by-step learning of the concepts needed to become a web developer or web designer.

Course aims: to transmit key knowledge in the area of web development and layout and to instruct students in the use of these skills for creating a website.

COURSE CONTENT

  1. Introduction to course. Principles, tools, and concepts of web development.
    • “Domain” and “hosting”.
    • FTP and SSH protocols.

    HTML-design

  2. Understanding HTML.
    • What is HTML?
    • Key tags in the language of layout.
    • Block and string elements.
    • Links.
    • Attributes.
    • Classes and IDs.
    • How to quickly memorize key tags.
  3. Creating HTML-design sites
    • HTML document structure.
    • Semantic principles of design.
    • Markup validation, W3C
    • Code formatting.
    • Commenting.
    • Working with paths.
  4. HTML5, forms and tables
    • HTML5 tags.
    • The purpose and application of HTML5 tags.
    • Using video and audio.
    • Form structure in HTML.
    • Tags for designing forms.
    • Methods for sending forms.
    • Tables in HTML.
    • Formatting and styling tables.
    • Creating tables of varying levels of complexity.

    CSS Design

  5. Introduction to CSS.
    • Purpose of CSS.
    • CSS features.
    • How to link CSS to HTML.
    • CSS document structure
    • How to write code faster.
  6. Properties, rules, formatting (BEM).
    • Working with selectors.
    • Inheritance.
    • Pseudo-classes :before, :after, nth-child and others.
    • Working with colour models RGB, RGBA, HEX, and HSLA.
    • How to learn CSS properties quickly and effectively.
    • Analysing modern BEM methodologies.
  7. Practice
    • Preparing to begin programming.
    • Creating a real HTML/CSS page.
    • CSS3 features: animation, transition, rotate, and others.
    • Vendor prefixes.
    • Examples of all HTML5 and CSS3 advantages.

    Responsive & Adaptive

  8. Photoshop and modular grids.
    • Photoshop interface.
    • The structure of a modern layout.
    • Principles of minimalism and Flat-design
    • “Modular grids”
    • Types of modular grids and when to use them.
    • Exporting graphics for layout.
    • PSD, JPG, PNG, GIF, SVG, AI, EPS, and PDF formats.
    • Key principles for converting layout into code.
  9. CSS responsiveness
    • Why do we need media queries?
    • Examples of working with media queries.
    • Mobile-first and mobile-last approaches.
    • “Fluidity” and “breakpoints”.
    • Relative length units (%, em, rem, and others).
    • Preparing an image in Retina display.
    • A professional approach to structuring CSS with media queries.
  10. Bootstrap CSS in practice
    • Preparing project structure.
    • Exporting graphics from PSD.
    • Minifying files for faster downloading.
    • Creating HTML layout.
    • Organizing content in block structure.
    • Using all the functions of CSS3.
    • Working with fonts in CSS.
    • Importing fonts from Google Fonts.
    • Converting font format and importing to your site.
    • Testing adaptivity and responsiveness.
    • Testing tools: DevTools in browsers, and others.

    JavaScript and jQuery

  11. Basics of JavaScript
    • Introduction to the language.
    • Variables and types of data.
    • Control statements.
    • Loop and conditional statements.
    • Functions.
    • Objects and arrays.
    • Practice: problem solving.
  12. Introduction to jQuery
    • Library.
    • Principles of working with jQuery.
    • Animation
    • Adding/deleting classes.
    • Interactions with DOM elements.
  13. Diving into jQuery and Bootstrap
    • Process for installing plugins in jQuery.
    • Ready-made solutions: sliders, galleries, and modal windows.
    • Overview of Bootstrap for solving everyday problems.
    • Parallax effects of varying levels of complexity.
    • Frequent mistakes and problems when using jQuery.

    ADVANCED LEVEL

  14. Node.js, NPM, and Bower
    • Working with command prompt (terminal/console)
    • “Package Manager”
    • Installing Git shell.
    • Installing Node.js, NPM, Gulp, Bower.
    • Useful add-ons and functions of Gulp.
    • Automatic graphic minification, CSS, JS.
    • Adjusting your personal web development environment.
    • Tripling the speed of your work process.
  15. Working with GULP, SASS + Git
    • Installing the most popular front-end assembler – Gulp
    • Detailed instructions for using Gulp.
    • Preprocessors
    • Advantages of the preprocessor SASS (SCSS).
    • Variables.
    • Inheritance.
    • Mixins.
    • Conditions.
    • Speed up your work flow using SASS.
    • Working with Github servers.
  16. Installing a site and CMS on a hosting server
    • How to choose a hosting server and rate.
    • Buying and linking a domain to a hosting server.
    • Principles of installing any CMS, using the example of MODx.
    • Connecting to the hosting server through FTP and SSH.
    • Basics of working with Database.
    • Managing Database using phpMyAdmin.
    • The file structure of data storage.
  17. Integrating layout in CMS MODx
    • Key points for integrating.
    • Possibilities for integrating.
    • Creating a user-friendly back end using MODx.
    • Working with TV parameters, snippets, and chunks.
    • Installing extensions in MODx.
    • Integrating image galleries.
    • Integrating feedback forms.
    • Principles for working with any CMS: WordPress, Joomla, Drupal, and others.
  18. Working with CMS OpenCart
    • Why use OpenCart for stores?
    • Possibilities for integrating with CMS OpenCart.
    • Analysing the mechanics of OpenCart.
    • Scale of OpenCart usage

This course is taught by

  • Maya I.
    Professor in Information Technology, Design, and Programming
    2018 - School teacher in Israel. 2017 - 2018 Freelance work in web-design. 2007 - 2015 School teacher of Information Technology. 2004 -... Learn more...

Other courses in this category

  • Stay connected: