Frontend developer: websites on HTML/CSS/JavaScript - course 18,000 rub. from Coddy School of Programming for Children, training 3 modules (months)

Miscellaneous / by admin / December 03, 2023

Age: 11-14 years

Level: for beginners.

Duration: from 3 modules (months), from 24 hours*.

Format: individual and group lessons, offline and online (real time).

Number of children: from 1 to 8.

Price:

from 750 rub./hour in an online group,
from 850 rub./hour in an offline group,
from 1050 rub./hour individually online,
from 1980 rub./hour individually offline.

In the modern world, any serious company strives to acquire its own website, because it is a kind of “business card” on the Internet, without which doing business already looks outdated, frivolous and hopeless.

In recent years, the profession of a webmaster has risen to the top of the ranking of the most attractive and sought-after professions in the IT field. In this regard, there are currently more and more people willing to undergo training in creating websites with scratch and master this prestigious specialty in order to have a stable and decent earnings. Our programming school CODDY suggests not to delay and enroll your child in the course “Frontend Developer: Websites on HTML/CSS/JavaScript” right now! The purpose of this course is to teach children how to create modern websites and introduce them to the basics of the profession of interface developer.

instagram viewer

What is webmastering and how to become a webmaster?

Webmastering is a set of activities for the development, creation, optimization and promotion of websites. Everything that is in one way or another connected with the production and maintenance of sites. This is a whole science that requires certain skills and knowledge in many areas, such as web programming, design, copywriting, SEO and others.

On the modern Internet, anyone can make their own website. But as a rule, the quality of web projects leaves much to be desired. For a website to be competitive, you need to approach the issue competently and involve professionals in the work. Using a programming language, the programmer creates website pages and combines them into a single object, after which he layouts them for correct display in browsers. Particular attention should be paid to the interface of the future site, ensuring its correct operation and security. So, a professional webmaster does all of the above himself! This is a programmer, web designer, layout designer, administrator and moderator, and sometimes an SEO copywriter rolled into one.

What knowledge and technologies do you need to master to become a webmaster?

Before becoming a webmaster, you need to familiarize yourself with and study many technologies, programs and systems. Here are the main steps that will lay the foundation for your future profession:
1. Learning HTML – hypertext markup language.
Once you start learning HTML, you will understand the structure of a web document and learn how to create simple websites.

2. Learning CSS – web page display style language. Thanks to the introduction of CSS styles into the document, the site acquires its own flavor and unique appearance. You can set the color, size, background and much more to the web page.

3. Introduction to CMS – content management system or “engine” of the site.

4. Mastering Adobe Photoshop – a graphic editor with an incredible number of possibilities. Many specialists use it to draw designs and create their own original and high-quality layouts.

5. Basic familiarity with programming languages. The vast majority of websites use PHP and JavaScript. The speed of the site, its security, possible scalability, and support from third-party developers depend on the quality of the written scripts. In other words, you need to be able to write quality code.

6. Working with databases.

And most importantly, the webmaster must create original sites. With the advent of ready-made solutions for all popular CMSs, a website with an original, non-template design is more in demand than ever. A professional webmaster can not only work with a set of ready-made programs, but also write these ready-made programs. To reach this level you will have to work hard. And our course “Frontend Developer: Websites on HTML/CSS/JavaScript” will help your child take the first confident steps in this difficult task. Under the guidance of experienced teaching practitioners, he will learn to create informative websites that feature original graphic design.

During the educational process the following topics will be studied:

1. Basics of Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS)

2. layout of modern websites

3. in-depth study of the features of web page styling

4. basics of working with Adobe Photoshop and working with website design layouts

At the initial stage, we will get acquainted with the basics of the profession of a web interface developer and study the rules building the structure and logic of websites, gaining practical programming skills web interfaces. Each student will learn the basics of writing HTML and CSS code.

Upon completion of this topic, your child will create their own modern website.

The second module includes an in-depth study of web interface programming tools. In this module we will continue our introduction to HTML and CSS. Students will become familiar with the algorithm and structure of creating modern websites in practice, independently create an interactive image gallery and publish their project on the Internet.

During the third module, we will continue our acquaintance with the profession of a web developer, gain practical skills in working with Adobe Photoshop and study modern web design tools. At the stage of creating a website design, the student will gain basic skills in working in a graphics editor. We will analyze various website design options, discuss the advantages and disadvantages of each, and find out how the design can be improved.

At the end of the course, my students and I will create a website using a ready-made design layout using the latest web programming tools and publish the result of our work on the Internet.

Ella T.

courses

Course teacher:
“Minecraft: Introduction to Artificial Intelligence”, “Unity 3D”, “Frontend Developer: HTML/CSS/JavaScript Websites”, “Drawing in Anime Style”, “Programming for the little ones”, “Minecraft programming”, “Design thinking”, “Bots in Python”, “Photoshop graphic design”, "Videobloggin"

Education:

Numerous courses to improve IT skills in international companies (Chatbot Hackathons, Prototyping in the field of artificial intelligence, IT architecture, etc.). University of Heilbronn, Heilbronn, Germany (Master of Business Administration). Belarusian State Economic University, Minsk, Belarus (Master of Business Administration).

Experience:

He is engaged in client consulting of legal systems, systems for audit solutions and process automation, works in the innovative field of IT and a start-up in Germany in an international company.

Interests:

Personal development, passion for sharing knowledge, networker, world opener, life designer, sports activist.

“Today the whole world is interconnected: people, countries, economies, technologies, etc. Programming is a key competency of the future. It helps you better understand the world of the future, actively shape it and be an innovative member of an exciting society without borders. The ability to code opens endless doors to the future for our children in this world and makes them ambassadors of new technologies.”

Sergey T.

courses

Education:

Numerous courses to improve IT skills in international companies (SAP, process automation, e-commerce). FOM University of Stuttgart, Stuttgart, Germany (Master of Business Administration) Karaganda State Technical University, Karaganda, Kazakhstan.

Experience:

Founder of a successful online electrical store in Germany, engaged in client consulting in field of automation of sales processes, works in the field of IT sales in Germany in the international companies.

Interests:

Traveling, fishing, sports, chess.

I. Goethe said: “You can only learn what you love”

1st module

The first day

Web Page Layout Basics

HTML document structure
First web page using HTML markup language
Introducing the Sublime Text 3 Editor

Result of the lesson: created the first web page, learned basic ways of marking up text using tags.
Practical task: create a web page using Html markup language.

Second day

Div element and tag attributes

Working with the web inspector
Creating a multi-page website
Learning new tag elements and attributes

Result of the lesson: learned how to add links and pictures to the site, added attributes to tags
Practical task: create your first multi-page website.

Day three

Cascading Style Sheets

Introduction to Cascading Style Sheets
Styling HTML Elements
Using selectors
Installing and working with the Emmet plugin and adding Lorem text

Result of the lesson: learned how to change the background color and text color of HTML elements, use two types of selectors, create Lorem text using the Emmet plugin
Practical task: change the appearance of the page using CSS properties.

Day four

Jaguar website creation

Creation of a multi-page Jaguar website
Creating a Project File Structure
Working with padding and padding of elements

Result of the lesson: learned to work with an external CSS file, became familiar with the external and internal padding of elements.
Practical task: create a multi-page Jaguar website.

2nd module

The first day

Box model in CSS

Box Model in CSS
Creating unusually shaped blocks
Working with the box-sizing property to change how an element's width and height are calculated

Result of the lesson: learned how to create blocks of unusual shapes, use the box-sizing property with the border-box value to correctly calculate the width of an element, and set the sizes of elements in different units of measurement
Practical task: create cards with text using different box-sizing property values.

Second day

Advanced text manipulation in CSS

Different types of fonts
Choosing fonts for websites
Creating new styles that allow you to customize text display at an advanced level

Result of the lesson: created a page using different types of fonts, improved the appearance and readability of the text using the passed properties.
Practical task: create a page using basic font types.

Day three

Positioning Elements in CSS

Working with the float property
Types of positioning of elements on the page
position property

Result of the lesson: learned to work with the float and position properties, create text wrapping around images
Practical task: create a web page and place elements on it using float and position properties

Day four

Creating a blog page

Creating a blog page
Element positioning properties for placing menus and posts on the page
Semantic tags

Result of the lesson: learned to work with semantic tags using positioning properties, placed the main components of the blog on the page
Practical task: create a blog page using semantic tags

3rd module

The first day

Pseudo-classes and working with images in CSS

Using background images on a web page
Pseudo-classes hover, active and visited
Changing the style of one element when activating a pseudo-class on another element
Creating background patterns

Result of the lesson: learned how to work with background images, studied properties for working with images
Practical task: add external changes to elements when you hover over them with the mouse cursor.

Second day

FlexBox in CSS

Working with CSS Flexible Box Layout
Properties for aligning elements in a Flex container
Flex-frog educational game

Result of the lesson: learned to work with Flex technology to create flexible layouts, completed the flex-frog game to consolidate the material covered
Practical task: complete the flex-frog game to consolidate the material covered

Day three

Development of the Sneakers shop website. Part 1

Creating a site structure with models
Connecting to a font site
Properties of the site header and its child elements
Functions for creating a gradient page background

Result of the lesson: created a site structure with models, connected the font to the site.
Practical task: select and download pictures with models, add a shadow to the site header

Day four

Development of the Sneakers shop website. Part 2

Completing work on the site
Creating a block with cards
Changing the behavior of elements when hovering over them
FlexBox technology for card positioning

Result of the lesson: created a website with model cards
Practical task: add a gallery using FlexBo technology

4th module

The first day

Grid Layout in CSS

Introduction to the Grid system
Creating a Page Using Grid
Properties for advanced work with Grid cells

Result of the lesson: studied the two-dimensional layout system (CSS Grid Layout), learned how to position Grid cells on the page.
Practical task: complete the grid garden game to consolidate the material covered.

Second day

Pseudo-elements after and before

Pseudo-elements before and after
Combining a picture with text inside
Elements with first-letter and first-line pseudo-elements

Result of the lesson: learned to work with pseudo-elements before, after, first letter and first-line, combine pseudo-elements with different properties to create beautiful blocks
Practical task: create an element using the after and befor pseudo-elements.

Day three

Animations and Transformations in CSS

CSS transformations
Applying transformations to HTML elements
Creating Animated Blocks in CSS
Applying timing functions to keyframes

Result of the lesson: learned how to work with transformations in CSS, create endless animations in CSS.
Practical task: create a button, add transformations to it when hovered.

Day four

Practice creating animations in CSS

Application of animation and transformation in practice
Creating an animated orbital system of planets in our solar system

Result of the lesson: created a page demonstrating the movement of planets in the solar system and an animated background.
Practical task: create an animated orbital system of planets in our solar system.

5th module

The first day

Creation of an online store

What is an online store?
Creating a Project Structure
Project setup

Result of the lesson: started creating an online store.
Practical task: select icons to be used on the site.

Second day

Creating an online store header

Variables in CSS and How to Use Them
Connecting fonts to an external stylesheet using the url function
Online store header, its styling
Adding additional menu functionality using the JavaScript programming language

Result of the lesson: configured global variables in the project, created a multifunctional header with a menu, connected a Javascript file to add additional menu functionality.
Practical task: add changing the background of the site header when scrolling the page

Day three

Creating the first screen with the main product

HTML structure of the presentation block
Grid system for correct display of elements
CSS property values using variables
Styling elements

Result of the lesson: created the presentation part of the online store
Practical task: create a presentation part of an online store

Day four

Creating a block with popular products

HTML markup for a block with products
Styling for product cards
Grid grid for card positioning
Stylization of a block with the history of the company

Result of the lesson: created a block with popular products and company history
Practical task: add external and internal padding to elements in the block with the company history

6th module

The first day

Creating a slider with customer reviews.

Review block
Ways to Create Scrollable Containers in CSS
scroll-behavior and scroll-snap-type properties
Slider anchor points

Result of the lesson: created a slider with customer reviews using HTML and CSS.

Practical task: add anchor points to the main sections of the site and create an automatic scroll to these blocks when you click on the button.

Second day

Working with forms and video content.

HTML5 tags for inserting video content into a website
Styling a section with a full-screen video clip
Input field tag -, and its attributes
Tag for creating forms in Html
Styling a text input element

Result of the lesson: created a section with a video and a block with a feedback form

Practical task: create a feedback form, style the elements

Day three

Creating a separate gallery page

Custom Grid grid for a gallery page
Adding blocks with images to the grid
Pseudo-elements and various animations of blocks with images
CSS filters to improve gallery visual design

Result of the lesson: created a separate page with a photo gallery

Practical task: using different types of positioning to create a translucent unusual background.

Day four

Adaptation of content for all types of devices.

Ways to adapt content for mobile devices
Media queries to apply different properties to the same element on devices with different widths
CSS rules for three types of devices

Result of the lesson: We adapted the website for tablets and phones.

Practical task: using media queries, change the property values of HTML elements to adapt the content to all types of devices

7th module

The first day

Introduction to the Tailwind SS framework.

What are frameworks and how do they speed up the project development process?
Installing the Tailwind CSS framework and plugins
Tailwind CSS Framework Concepts
Working with Typography and Colors in Tailwind CSS

Result of the lesson: created the first web page using the Tailwind CSS framework.
Practical task: create a block with text, style elements using tailwind classes.

Second day

Tailwind classes for creating a responsive website

Working with Tailwind classes to create a responsive website
Classes for adding hover and focus effects
Classes for adding shadows to elements
Classes for working with element sizes
Classes for working with external and internal padding of elements

Result of the lesson: We created an adaptive page for all types of devices.
Practical task: create buttons, add effects when clicking on them using Tailwind classes

Day three

Tailwind Flex Layout.

Working with Tailwind Flex Layout
Classes for aligning child elements in a Flex container
Creating a card with the price of a product
Creating Progress Indicators
Working with Pseudo Elements in Tailwind CSS

Result of the lesson: created a Flex container with product cards
Practical task: create a card with a description of the product.

Day four

Grid system in Tailwind CSS.

Row-span and col-span properties
Properties for automatically filling empty space in a Grid with elements
Project team page

Result of the lesson: created an adaptive project team page using the Tailwind Grid system.
Practical task: add effects to grid elements when hovering over them

8th module

The first day

Project setup

Setting up the “Manage” application site project
Creating a responsive website header
Creating a Hamburger Menu Using JavaScript
Creating a presentation section with a product

Result of the lesson: created the first screen of the “Manage” application website
Practical task: add a background image to the first screen.

Second day

Creating a section with a description of the application

Section with a description of the application and its advantages
Adapt the created block for all types of devices
Section with application operation
Apply Tailwind filters to an image

Result of the lesson: created two sections of the site “Manage”
Practical task: create an additional section with the history of the application creation

Day three

Creating a section about the project team

Section about the team
Slider using Tailwind CSS and Javascript
Employee cards

Result of the lesson: created a section about the project team
Practical task: create a section with a CTA button

Day four

Creating a section with prices

Create a section with prices
Create a responsive website footer
Finish the project

Result of the lesson: completed work on the project, created the website for the “Manage” application
Practical task: finalize the project, put the site on the Internet

9th module

The first day

Start working on your own project.

Select a project topic
Start developing your own website

Result of the lesson: a topic has been chosen and work on the project has begun
Practical task: Project work

Second day

Continuing work on the project

Continue working on the project
Fix errors in the project

Result of the lesson: creation of website pages
Practical task: Project work

Day three

Preparing a project presentation.

Describe your project
Create a presentation template to defend your project
Finish the project
Put the site on the Internet

Result of the lesson: prepared a presentation and rehearsed the speech.
Practical task: prepare a presentation of the project, put the website on the Internet.

Day four

Project protection.

Finalize the project presentation
Defend your project in front of an audience

Result of the lesson: We completed work on the course project and presented it to parents.
Practical task: finalize the project, prepare and conduct a presentation.

Tags cloud

Miscellaneous

Rating

Views

Comments