Web-coding.
HTML+CSS & JavaScript
Web-coding is creating and designing sites using the HTML markup language, CSS styles, and the JavaScript programming language.
HTML is a skeleton of a site, CSS is its appearance, and JavaScript is its abilities. Even to make a beautiful animated button press, one needs to write a small script
Before the trial class it's important to install the Sublime or Notepad ++.
HTML is a skeleton of a site, CSS is its appearance, and JavaScript is its abilities. Even to make a beautiful animated button press, one needs to write a small script
Before the trial class it's important to install the Sublime or Notepad ++.
#from 10 years old
HTML & CSS
Learning the basics of HTML markup language and CSS style language.
Ideal for students aged 10+
Ideal for students aged 10+
Learning the basics of the HTML language
1-20
lessons
Basics of the CSS language
21-70
lessons
Advanced ways to work with HTML and CSS
71-120
lessons
1
Introduction to HTML
Students will learn the basics of creating websites using the HTML language. They will learn how to work with a text editor, get acquainted with special language constructs (tags) necessary for editing text and creating lists.
• Text editors • Creation of the first HTML document • Text formatting • The syntax of the HTML language • An overview of the most common mistakes • Creating a project based on the acquired knowledge
• Text editors • Creation of the first HTML document • Text formatting • The syntax of the HTML language • An overview of the most common mistakes • Creating a project based on the acquired knowledge
• Final Task
2
Links and images
Students will learn how to add content to their web pages, get acquainted with additional features when working with links and images.
• Links • Images
• Creation of site navigation
• Creation of primitive photo galleries
• Additional image editing options for Windows and macOS
• Links • Images
• Creation of site navigation
• Creation of primitive photo galleries
• Additional image editing options for Windows and macOS
• Electronic newspaper
• Social network profile
• Final task
• Social network profile
• Final task
3
Tables
Students will learn how to add and edit tables on web pages, consolidate their knowledge on practical tasks, and get acquainted with the method of website layout using tables.
• Tables basics
• Grouping table cells
• Alignment of table contents
• Tables basics
• Grouping table cells
• Alignment of table contents
• Final task
4
Introduction to CSS
Students will master the skills of creating styles for HTML pages and consolidate their knowledge on simple practical tasks and on large projects to build ready-made sites.
• Ways to include CSS
• Basic CSS properties
• Selectors in CSS
• Working with fonts
• Basics of block layout
• Ways to include CSS
• Basic CSS properties
• Selectors in CSS
• Working with fonts
• Basics of block layout
• Coffee shop website • Website for computer games • Final Tasks
5
Forms
Students will be introduced to the concept of Forms in HTML, how to add them to pages, and how to style them using CSS.
• Text fields
• Dropdown lists
• Other types of forms
• Form Styling
• Text fields
• Dropdown lists
• Other types of forms
• Form Styling
• Registration form
• Form stylization
• Form stylization
6
Advanced CSS
Students will learn more advanced techniques for working with the CSS language, as well as get acquainted with modern and advanced ways of styling web pages.
• Positioning of elements
• Rubber background
• Block layout of the page layout
• Complex selectors
• Pseudo elements
• Proper use of colors in website design
• Positioning of elements
• Rubber background
• Block layout of the page layout
• Complex selectors
• Pseudo elements
• Proper use of colors in website design
• CSS gallery • Rubber background • Horizontal menu
7
Animation
Students will learn the ins and outs of creating animations on web pages using CSS.
• Text animation
• Image animation
• CSS Variables
• Text animation
• Image animation
• CSS Variables
• Glowing text • Spinner Pacman
8
HTML5
Students will explore the new features of HTML 5 and learn how to apply new tags to web pages through hands-on activities and related projects.
• New HTML5 tags
• Embedding video and audio on
• New HTML5 tags
• Embedding video and audio on
• Portfolio project • Video on page project
9
Flexbox
Students will learn the technology of building web pages - Flexbox and consolidate their knowledge on a large number of layouts and practical tasks.
• How Flexbox works
• The position of the elements on the page • Responsive websites
• Media queries
• How Flexbox works
• The position of the elements on the page • Responsive websites
• Media queries
• Animated photo gallery • Project “To the piggy bank of a web programmer” • Project “Adaptive website”
10
Grid System
Students will learn how to work with the Grid System technology, which allows you to build site layouts. This technology is one of the most popular. Also, students will consolidate their knowledge on a large number of practical tasks aimed at improving their skills in working with the Grid.
• Introduction to the Grid System • Creation of adaptive sites based on the Grid System
• Introduction to the Grid System • Creation of adaptive sites based on the Grid System
• Responsive website about space
11
Bootstrap
Students will master the skills of working with the Bootstrap style library.
• Introduction to Bootstrap
• Grid System and Bootstrap
• Finished styles
• Introduction to Bootstrap
• Grid System and Bootstrap
• Finished styles
1
Introduction to HTML
Students will learn the basics of creating websites using the HTML language. They will learn how to work with a text editor, get acquainted with special language constructs (tags) necessary for editing text and creating lists.
• Text editors • Creation of the first HTML document • Text formatting • The syntax of the HTML language • An overview of the most common mistakes • Creating a project based on the acquired knowledge
• Text editors • Creation of the first HTML document • Text formatting • The syntax of the HTML language • An overview of the most common mistakes • Creating a project based on the acquired knowledge
• Final Task
2
Links and images
Students will learn how to add content to their web pages, get acquainted with additional features when working with links and images.
• Links • Images
• Creation of site navigation
• Creation of primitive photo galleries
• Additional image editing options for Windows and macOS
• Links • Images
• Creation of site navigation
• Creation of primitive photo galleries
• Additional image editing options for Windows and macOS
• Electronic newspaper • Social network profile • Final task
3
Tables
Students will learn how to add and edit tables on web pages, consolidate their knowledge on practical tasks, and get acquainted with the method of website layout using tables.
• Tables basics
• Grouping table cells
• Alignment of table contents
• Tables basics
• Grouping table cells
• Alignment of table contents
• Final task
4
Introduction to CSS
Students will master the skills of creating styles for HTML pages and consolidate their knowledge on simple practical tasks and on large projects to build ready-made sites.
• Ways to include CSS
• Basic CSS properties
• Selectors in CSS
• Working with fonts
• Basics of block layout
• Ways to include CSS
• Basic CSS properties
• Selectors in CSS
• Working with fonts
• Basics of block layout
• Coffee shop website • Website for computer games • Final Tasks
5
Forms
Students will be introduced to the concept of Forms in HTML, how to add them to pages, and how to style them using CSS.
• Text fields
• Dropdown lists
• Other types of forms
• Form Styling
• Text fields
• Dropdown lists
• Other types of forms
• Form Styling
• Registration form • Form stylization
6
Advanced CSS
Students will learn more advanced techniques for working with the CSS language, as well as get acquainted with modern and advanced ways of styling web pages.
• Positioning of elements • Rubber background • Block layout of the page layout • Complex selectors • Pseudo elements • Proper use of colors in website design
• Positioning of elements • Rubber background • Block layout of the page layout • Complex selectors • Pseudo elements • Proper use of colors in website design
• CSS gallery • Rubber background • Horizontal menu
7
Animation
Students will learn the ins and outs of creating animations on web pages using CSS.
• Text animation
• Image animation
• CSS Variables
• Text animation
• Image animation
• CSS Variables
• Glowing text • Spinner Pacman
8
HTML5
Students will explore the new features of HTML 5 and learn how to apply new tags to web pages through hands-on activities and related projects.
• New HTML5 tags
• Embedding video and audio on
• New HTML5 tags
• Embedding video and audio on
• Portfolio project • Video on page project
9
Flexbox
Students will learn the technology of building web pages - Flexbox and
consolidate their knowledge on a large number of layouts and practical tasks.
• How Flexbox works
• The position of the elements on the page • Responsive websites
• Media queries
consolidate their knowledge on a large number of layouts and practical tasks.
• How Flexbox works
• The position of the elements on the page • Responsive websites
• Media queries
• Animated photo gallery • Project “To the piggy bank of a web programmer” • Project “Adaptive website”
10
Grid System
Students will learn how to work with the Grid System technology, which allows you to build site layouts. This technology is one of the most popular. Also, students will consolidate their knowledge on a large number of practical tasks aimed at improving their skills in working with the Grid.
• Introduction to the Grid System
• Creation of adaptive sites based on the Grid System
• Introduction to the Grid System
• Creation of adaptive sites based on the Grid System
• Glowing text • Spinner Pacman
11
Bootstrap
Students will master the skills of working with the Bootstrap style library.
• Introduction to Bootstrap
• Grid System and Bootstrap
• Finished styles
• Introduction to Bootstrap
• Grid System and Bootstrap
• Finished styles
Examples of our students projects
• Operating System: Windows 8/8.1/10 x64, Mac OS 10.12 or later;
• Installed browser Google Chrome;
• RAM: 4 GB (recommended 8 GB);
• Processor 2-core with a clock frequency of 2.2 GHz (preferably 4-core if possible);
• Hard disk space: at least 4-6 GB of free hard disk space;
• Screen resolution: preferably 1280x800 pixels;
• Microphone or headset;
• Speakers;
• Internet connection from 1 Mbps.
• Installed browser Google Chrome;
• RAM: 4 GB (recommended 8 GB);
• Processor 2-core with a clock frequency of 2.2 GHz (preferably 4-core if possible);
• Hard disk space: at least 4-6 GB of free hard disk space;
• Screen resolution: preferably 1280x800 pixels;
• Microphone or headset;
• Speakers;
• Internet connection from 1 Mbps.
System requirements