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
- Introduction to course. Principles, tools, and concepts of web development.
- “Domain” and “hosting”.
- FTP and SSH protocols.
- 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.
- Creating HTML-design sites
- HTML document structure.
- Semantic principles of design.
- Markup validation, W3C
- Code formatting.
- Commenting.
- Working with paths.
- 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.
- Introduction to CSS.
- Purpose of CSS.
- CSS features.
- How to link CSS to HTML.
- CSS document structure
- How to write code faster.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Introduction to jQuery
- Library.
- Principles of working with jQuery.
- Animation
- Adding/deleting classes.
- Interactions with DOM elements.
- 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.
- 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.
- 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.
- 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.
- 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.
- Working with CMS OpenCart
- Why use OpenCart for stores?
- Possibilities for integrating with CMS OpenCart.
- Analysing the mechanics of OpenCart.
- Scale of OpenCart usage
