Take our course and master all the essential skills to become a seasoned Front-End Developer. Over 50 sections of hands-on training are waiting for you!
The demand for interface developers is predicted to grow by
8%
Prepare for growing demand
The demand for frontend developers is steadily growing and will increase by 8% by 2029. Don't miss the chance to find your niche in this promising field. Our course will give you all the skills and tools you need to get a successful start in frontend development.
Master the structure of web pages and learn how to style them.
JavaScript
Understand how to add interactivity to your website.
GIT and GITHUB
Learn version control and collaboration.
How much does a Front-end developer earn
Salary per month. Data for 2023.
Middle
$4000
Senior
$8000
Junior
$2000
Compete in your knowledge with students
Show off your skills and knowledge by competing against other participants in a course. A leaderboard will help you track your progress and motivate you to keep moving forward.
What will you get at the end of the course?
Practice and experience
Pass the practice on real projects and gain valuable experience which will increase your value as a professional.
Tools
Knowing relevant technologies and tools for Front-End Development.
Certification
You will receive a certificate confirming your skills and knowledge that It will be an additional plus when looking for a job.
And these skills will be listed on your resume:
Working with HTML and CSS
Creating adaptive sites of any complexity.
JavaScript development
Implementation of interactive elements on the site.
Proficiency in Git and GitHub
Version control and collaborative project work.
Technologies learned in the process of training
HTML
The backbone of any website.
Java Script
For interactivity and dynamics.
BootStrap
Fast and efficient styling.
CSS
For creative and unique design.
Sass
Advanced work with styles.
Pug
Templanizer to simplify your work with HTML.
Course content
Welcome
View lessons on your computer
View lessons on your phone
Read the public offer
Join a closed group
Guidelines for asking questions
Course Presentation
About the author
Technologies covered in the course
Projects to be developed during the course
What kind of result can I expect at the end of the course?
Advantages and important points of learning Frontend and programming in general
Introduction to areas of web programming
Sequence of stages of website creation
Methods of creating a website and when to use each each?
Preparing technical requirements for online course, brainstorming
Creating a design layout of an online course in Balsamiq
Install Google Chrome and enable synchronization therein
Installing and configuring Visual Studio Code. Placing important programs in the taskbar
Installing and using the screenshot program Lightshot
Proper organization of project files and folders, installing the Live Server extension
Rules for writing elements. Elements related to text
Structural elements. html, head, body, DevTools
Working with links
Linking to other HTML files by link
Code Validation in HTML Validator
Sending the project in an archive (zip)
The best and worst aspects of the layout area
Getting to know Figma. layout. Description 1st big task
Layout link
Analysis of sent works on the creation of the site
Solving the challenge of building a website . Tips for increasing productivity when code writing
Elements hr and br
Applying what we've learned about the list to the layout
Div element and grouping
Applying the div element to the layout
New sectional elements in HTML5 - header, nav, main, section, footer and a small task
Applying HTML5 sectional elements to a layout
Adding images to a page. The difference image formats
How adding an image from a folder works
Exporting images with rounded corners and the importance of specifying width and height for an image
Optimize image size. Tool TinyPNG
When images are not added as img, but as SVG code? Optimizing SVG size.
Adapting bitmap images for Retina screen
Squoosh tool. Optimizing the size image size optimization with Squoosh and creating 2x Retina images with Picsum Photos
Retrieving arbitrary images from Placeholder.com
Generation of temporary text from an arbitrary number of words word count
Image-based job description for the layout
Applying what we learned in the images section to layout
List, images and grouping
What is GitHub
Registering on GitHub
Deleting Git and associated logins and passwords from your computer computer
Install Git on your computer and configure global Settings for the new profile
Git Basics
Using Git basics on a demo project example
Posting the project on GitHub
Getting to know Netlify. Putting your project on Netlify
Git, GitHub, and Netlify
CSS Basics. Opening a file for CSS and its connecting it to HTML, small examples with colors
Specifying colors in CSS in RGB format
Working with transparent RGBA color
Specifying colors in HEX format
The most commonly used styles for text
The importance of code order in CSS
Applying styles to elements through a class, rules class naming
The power of selectors in CSS. Class selector vs. element selector
Commonly used class names
Applying multiple classes to elements. Left, center and right text alignment
Changing the width and height of elements
Object-fit property for images
Job description for applying what you've learned from CSS to a layout
Adding what you've learned from CSS to a layout . Part 1
Adding what you've learned from CSS to a layout . Part 2
Changing list styles and applying styles to to another element depending on the parent element element
Adding what you've learned from CSS to a layout . Part 3
Submitting new code for the layout to GitHub and hosting on Netlify
CSS basics
Working with fonts. The font-family property and font sets fonts
Using secure web fonts
Using fonts from Google Fonts
Connecting multiple fonts from Google Fonts to a project project
Applying global styles for text to the tag body
Property inheritance in CSS
Job description for adding CSS for fonts to the layout
Solving the problem of adding CSS for fonts to the layout
Solving the problem of adding CSS for fonts to the layout
Fonts and inherited properties in CSS
Preparation for the study of Flexbox.Usage DRY principle in CSS on a small example
Properties Display Flex and Justify-Content
ALIGN-ITEMS property in FLEX
Application Flex, Justify-Content and Align-Aitems to Makut
Flex-wrap property
Dry and Flexbox principle in CSS
CSS transition
Outline property
Opage property.The difference between opacity and transparent color
Adding styles for Hover and Active states in layout.Change color SVG icons
BORDER property
Changing Outline styles in the layout
Padding property
Property Border-Radius
Differences between Display Inline and Block.Acquaintance With Display Inline-Block
Application Padding, Border and Border-Radius to Makut
Review Code Review and Issue in the Github repository
About Normalizecss
Acquaintance with margin property
Application of Normalizecess and Margin to the layout
Removing the retreat under the images and making changes to the layout
On the phenomenon of "collapsing"
What is the indentation and from which side to use
About Box Model and the Box-Sizing property
Default default defects and their correction
When to use Padding, and when margin
Padding and Margin in abbreviated form
Auto value for Margin
What is a container and when to use it
Box-Shadow and Text-Shadow properties
The use of all the topics studied to the layout .Final improvement
Project repository and page on Netlify
Link to the MedSanor layout
MedSanor project.Preparation of the initial state, accommodation on Github and Netlify
MedSanor project.Connection of project fonts and Global styles for ordinary text
MedSanor project.Virgin layout (Html)
MedSanor project.Styles for the top of the site
MedSanor project.Full layout of the lower site
MedSanor project.Hero block layout
MedSanor project.Layout of the service unit
MedSanor project.Adding a CTA unit.Final project
Project repository and page on Netlify
Installation of Todo Tree Extension
Simplification of the placement of the images gallery using negative retreat in CSS, using the principle Dry
Flex-Direction property
Flex-Grow property
FLEX-SHRINK property
Creation of a fixed basement (Sticky Footer)
ORDER property
Practice of working with the site N24 and form elements
Link to the layout N24
Creation of the site N24.Global settings.Upper Part of the site headline.The basics of working with Form, Input, Label and Button
Adding a search form and focus styles for interactive elements.Sitenav and SITE-HEADER-BANNER
News-Grid news cards in html
New-city news cards.Chapter Notifications
Creating a global news section on the N24 website
Full version of the N24 site with a global section news and side panel
Placement of the image of Retina in the background
When to use IMG and when Background-Image. Placement of icons as background images
Placement of decorative icons using an element IMG.Questions about the buttons and Flex
Pseudo -elements - Before and After
Link to Articles layout
Creation of a repository of templates.Demo
Creating the starting template CSS
Using the repository of templates.Creation heroic part of the Articles layout.Connection fonts.Adding retreat to the hero
Full version of the section of the latest video layout Articles
Using the Counter properties in CSS
Connection of fonts using @font-line.Introduction
Google Fonts connection connection using @font-line.Using the Google Webfonts service Helper
Elements of the form.Re -use of Input and Select.Checkbox Input, Fieldset and Legend
Radio input
Datalist element
Textarea element
N24 layout.HTML part of Site-Footer
N24 layout.Site-Footer styles
N24 layout.News-List page
N24 layout.Contact form
N24 layout.Contact information
N24 layout.Field search and placement field Images in Notifications-CTA
Minification in CSS
PROPRECTION AND MINICHING PROPERTIONS and MedSanor
User properties in CSS.Part 2
Application of user properties in the project .Application of user properties in project N24
IPhone layout
IPhone project.SITE-HEADER
IPhone project.Hero
IPhone project.Features
IPhone project.Promo and Runners
Link to Intro Form layout
Intro Form project.General work and heroic chapter.Registration form in the Intro Form project
Link to Tea Brewers layout
TeaBrewers project.Site title and Heroic section
TeaBrewers project.Index-collection
TeaBrewers project.Index-Features
TeaBrewers project.How does this work
TeaBrewers project.The basement of the site
Placement of the gradient background in CSS
The use of styles with gradient colors for text
Creating a site with a variant of a dark topic
JavaScript.Introduction
JavaScript.Search for an element on the page, it Name and change in text
JavaScript.Acquaintance with events
JavaScript.Adding and removing classes for elements
Property Transform
The importance of a sequence of values in the property Transform and Transform-Origin
Perspective value in Transform
Creating the effect of the opening window using CSS Transform
Link to the model "Forests"
Forests project.Global styles, preparation fonts and images
Forests project.Site title and SVG code in Section Intro
Placement of images in the form of SVG code.Change SVG properties in CSS
Forests project.Changing the color of the SVG frame in Site heading in accordance with the theme of the site
Forests project.Turning on and off the dark Site mode
Forests project.Filter
Forests project.Index-Forests
Forests project.Styles of the Index-Forests section
Forests project.The page of the country
Assigning an individual style of Checkbox and Radio
Valid Input selector
Input and Placeholder-Shown selectors
Disabled attribute and js task
Solving the problem on the attribute Disabled and JS
How selectors + and ~
Selector: Checked
Creating user Checkbox
Additional videos to create individual style for Checkbox and Radio (be sure to View!)
Assigning an individual style of Checkbox and Radio
Valid Input selector
Input and Placeholder-Shown selectors
Disabled attribute and js task
Solving the problem on the attribute Disabled and JS
How selectors + and ~
Selector: Checked
Creating user Checkbox
Additional videos to create individual style for Checkbox and Radio (be sure to View!)
Position property.Static and Relative Position
position absolute
What is the Position Absolute
Adjustment of the order of elements when applying and Z-index
Description of exercises on the topic Position
Solution of the interface of the washing machine
Resolution of the page of the profile settings page
Link to the Picking Component with Toggle layout
Solution of the Pricing Component exercise.Part of prices
Solution of the Pricing Component exercise.Creation switch
Solution of the Pricing Component exercise.Change prices in js depending on the value of the switch
Adding innovations on Position to layouts , TeaBrewers and Forests
z-index stacking
The basics of the drop -down menu
Creating a menu on the website mover.uz
position fixed
position sticky
Creating a modal element
Overflow and Position Absolution Property
Creating a triangle in CSS
Additional video tutorials on Transform, Transition and Position in CSS (be sure to view!)
Job Listing Link
Creation of the main page of the Job Listings McCet
Creation of modal modes N24
Closing the moded N24 mock -up when you press the button
Why are the elements activating JS assigned Class with prefix js-
Event Listener Protection in JS
Activation JS action later using settimeout
Introduction
As you can call classes
Rules for writing html code on BEM and useful resources
Some CSS styles in BEM
General cases of using styles are not to the block, but to its internal element
The correct prediction of the time that will go to project.Example of the table in Google Sheets
Creation of snippet
Link to the model "Shortly"
Global settings, fonts and variables
Site title and button
Comparison with Perfectpixel.Example of the "Shortly" layout
Heroic section
Form and results of the section for URL reduction
Code to change the color of entry validation and aggregates
Stop sending the uniform to reduce the URL and display of results at this time
Changing styles for completed values in CSS. Autofill change in the "Shortly" layout
Changing the condition when pressing the copy button abbreviated link.Simple acquaintance with delegation of events in JS.Copying abbreviated Links to the clipboard
The section of the features
Section CTA
Brief code analysis.Thoughts on BEM
The site of the site
Thoughts about the time spent on the project.Examination project code in Validator and Bem Tree Checkker
Correction of a small error in the site of the site
Link to the model "Bookmark"
Analysis of the type of layout and the prediction of time for project
Adding news to CSS-STARTER Repo
Correction of fonts, global styles, User properties and styles of the container
Site title
Heroic section
Creation of common styles for sections
The section of the features.Creating liner links
The section of the features.Creation of tabs panels
Where the JavaScript code is written
How are the numbers and text records
Data display in the console
Connection of variables and text
Counting characters in the text
Working with template literals
Choosing the element - doCumb.Queryselector
Why a variable tied to an HTML element, you should give a name starting with EL
The choice of several elements - Document.QuerySelectorall
Determination of the number of elements found with using QuerySelectorall
Receiving and changing the text of the element.Appeal to element named $ 0 in Devtools
Work with classes, adding, deletion, Switching, content
Adding the listener of events
Why classes of elements that are added Listor of events in JS, you should give prefix js-
Types of events and an example of the event of change Select
Exercise.Performing the action when entering data in Input
Ensuring the performance of the action in response to the event (if)
Performing the action after some time with using Settimeout
Event preventDefault
Binding the listener of events to several elements
Is it necessary to ensure security during binding Listener of events to several elements
Work with Data Autritus
Delegation of events
Copying the text - navigator.clipboard.writetext ()
Moving by DOM
localStorage
Description of working with tabs.Getting value href when clicking on the liner link and use SPLIT text method
Tabs__ite activity management when clicking on Link of tabs
Fundamentals of understanding functions in JavaScript
Creating and starting the function DeactivateTabitems
The full use of tabs
Finding the panel of the tab using Dataset
Cleaning the cache in Netlify if the changes are not visible
BEM errors corrected in tabs panels
Correction of images indent in tabs panels
Creating the section Extensions
NTH-Child selector in the form XN + Y
Section FAQ.Elements to the accordion
Creation of HTML and CSS part of the accordion
JavaScript part of the accordion
Comparison of the FAQ section with the layout in Perfectpixel
Subscription section
The section of the site of the site
Correction of error in the FAQ accordion and advice
Fundamentals of objects in js
Grouping of modifier classes in one object
Introduction and first task
Assessment of project time and preparation of the initial code
Global styles, variables, container and styles fonts
Site hat
Hero
Peculiarities
Get of articles and articles index
Footer.Logo and social networks
Footer, links and parts of CTA-Copy
Acquaintance with the project.Time assessment
Adding user properties, fonts, container and styles for Body
Site hat, logo and navigation
Link to the basket in the website of the site
Link to the profile in the website of the site
Basket, purchasing basket and styles for the amount of goods in the basket
Styles for empty contents, constantly Assigned class EMPTY
The contents of the consumer basket HTML
Styles for the list of goods in the basket
Basket button
Pop -up element of the basket, part JS
The initial state of the product page
Showing images HTML
Styles for showing images
Changing the style of scrolling strip
Creation of snippet to change the style of the strip Scrolling and editing the trigger of the previous Snippet
Description of independent work.Description the possibilities of the images of JS and the stages of their creation
When clicking on a miniature, activate its active state.Why the images were attached to button
When clicking on a miniature, change active image
Is it possible to assign a listener for click events for Images
Part HTML for Lightbox
Styles for Lightbox
Open and close Lightbox
Correction of error when binding Lightbox with Image show
Image change in Lightbox
The possibility of moving to the next image in Lightbox
The possibility of moving to the previous image in Lightbox
Solving the conflict between the images gallery and Lightbox
Part of the information about the HTML product
Product information styles
Changing the amount of goods when pressing a button
Table element.Part 1. Fundamentals
Table element.Part 2. Rowspan, Colspan
Table element.Part 3. Common styles
iframe.YouTube video inserting, maps from Yandex Maps and Google Maps
Audio and video elements
CSS filters and Mix-Blend-Mode
Converting GitHub profile into useful And beautiful view
Filling the GitHub profile page with information. Part 1
Filling the GitHub profile page with information. Part 2
Creating a portfolio.What is it, what information take some thoughts
Creating a portfolio.Creating the first version of the main Pages Portfolio
Creating a portfolio.Placing information about Project on the Teletype website
Buying a domain and binding a portfolio with a new domain
Types of interfaces - CLI against GUI
Writing Git commands in the terminal
Working with Sublime Merge
Joint work and introduction to SDLC themes
Acquaintance with Scrum
Information about the Waterfall method.Introduction to the topic work with branches in Git
Working with branches in git
Working with branches in GIT (terminal)
If the work in the branch is not completed, sending it to Repository
Rules for protecting branches in Git
Actions before opening a branch in GIT.Obtaining project from a computer with branches and some Additional rules
An example of a conflict of confluence in Git and resolution conflict of confluence
The ability to create an fork on github
Sending changes from fork to the main Repository.Brief acquaintance with some Concepts of joint work on GitHub
Technical methods of working together on github
Fundamentals of joint work based on fork on github
Introduction to the practice of joint work
Fulfillment of global tasks of the Myteam project (container, font, customizable properties)
Placement of the Myteam layout on Netlify
Separation of the Myteam layout into components.Add team members in the repository
Introduction to the creation of an adaptive site
Working with Device Toolbar tools and some Useful tools
Meta-tag Viewport
Acquaintance with media checks
Differences between adaptive and responsive sites
DESKTOP-FIRST against MOBILE-FIRST
Illustration of the creation of an adaptive site
Common errors
Installing the width of the elements as a percentage and its advantages
Acquaintance with the Picture element
Using media checks in the Picture element
Changes in the GITHUB profile
Tasks to create an adaptive site
Creating an adaptive layout. Information about the sequence of lessons
Bringing social networks in the basement In accordance with Bem
Creating an adaptive basement of the site
Creating an adaptive section of functions
Creating an adaptive heroic section
Creation of an adaptive promotion
Creating an adaptive site title
Introduction and HTML
Menu styles
JavaScript part
Adaptation to extreme cases
Hero-section
Index-services
CTA
Preparation for adaptation of part of Site-Footer MedSanor
Adaptive MedSanor.Part 1 Site-Footer
Adaptive MedSanor.Part 2 SITE-HEADER
Analysis of the time to create a layout
Minimalistic portfolio.Global styles, container and user properties
Minimalistic portfolio.Connection of fonts
Minimalistic portfolio.Part Site-Header
Minimalistic portfolio.Part Site-Footer
Minimalistic portfolio.CTA button
Minimalistic portfolio.Button
Minimalistic portfolio.Part Hero
Minimalistic portfolio.IMG-Text-Info component
Minimalistic portfolio.Part about me
Minimalistic portfolio.Contact information CTA
Minimalistic portfolio.Portfolio page
Minimalistic portfolio.The hero of the project
Minimalistic portfolio.Part of the information about project
Minimalistic portfolio.Alignment correction In terms of information about the project
Minimalistic portfolio.Part Project Meta
Minimalistic portfolio.Part Project Details
Minimalistic portfolio.Page management
Minimalistic portfolio.Filling out information about Pages of projects
Minimalistic portfolio.HTML Contact Pages
Minimalistic portfolio.Contact styles Pages
February 12
March 3
July 21, 1 part
July 21, 2 part
August 29
October 10
October 30
November 25
January 8, 1 part
January 8, 2 part
January 8, 3 part
March 26, 1 part
March 26, 2 part
April 3, 1 part, SASS Introduction
April 3, 2 part, SASS Introduction
May 12, own hooks and question-answer
July 9, JavaScript - prototypical inheritance
Introduction to the Reactjs module
1-lesson.What is Reactjs
2-lesson.Necessary programs
3-lesson.Details about NPM
Bonus.Webstorm coupon
4-lesson.Creating a Reactjs program.React App
5-lesson.Soft Reactjs
6-lesson.Mini-project
7-lesson.JSX
8-lesson.Practice
9-lesson.Features of JSX
10 lesson.Separation of the application into modules
11-lesson.Conditional display
12-lesson.Loader example
13-lesson.Practice
14-lesson.About class components
15-lesser.Class state and management components
16-lesson.Creation of methods in class components
17-lesson.Practice
18-lesson.The concept of a life cycle and component React
19-lesson.Practice
20 lesson.Working with arrays and key attribute
21-lesson.Props
22-lesson.Practice
23-lesson.Work with forms and validation
24-lesson.Work with Checkbox, Radio and Textarea
25-lesson.Practice
26-lesson.Details about Createref
27-lesson.Uncontrolled form
28-lesson.Acquaintance with the Movie App project
28-lesson.Acquaintance with the project
29-lesson.Header and Footer
30 lesson.Acquaintance with the API
31-lesson.Creating a general list of films
32-lesson.Creating a search button
33-lesson.Adding filtering by category
34-lesson.Management and accommodation management on the host
2-project.Analogue Twitter
35 lesson.Introduction to the project
36-lesson.JSX processor
37-lesson.Properties of components
38 lesson.The states of the components
39-lesson.Database Data deletion
40-less.Work with the form
41-lesson.Adding data to Data
42 lesson.Search system and filter
2-Module.Functional components
43-lesson.Functional components
44-lesson.The concept of a life cycle using functional component
45 lesson.The use of refer in functional component
46-lesson.Practice.Components
47-lesson.Practice.1-part
48 lesson.Practice.2-part
49-lesson.Hooks.UseState, UseEffect, Useref and usememo
50 lesson.HOOK USECALLLBACK and USECONTEXT
51 lesson.Hook Uslyouteffect
52-lesson.HOOK USEIMPERATIVEHANDLE
53-lesson.Hook Usereducer
54-lesson.Special hooks
55 lesson.Conditions for using Khukov
56-lesson.Practice.Hook Usereducer
3-project.Basket of purchases
57-lesson.Introduction to the project
58 lesson.Acquaintance with the API
59-lesson.Header & amp;Footer
60-less.Display of the list of products
61-lesson.Order condition and basket
62-lesson.Order placement function
63-lesson.Removing the product
64-lesson.Changing products in the basket
65 lesson.Adding and removing products
66-lesson.TOAST and GITHUB Library
3-Module.Complex state of the program.Work with CONTEXT
67-lesson.Creating a complex state of management Programs: Creation of CONTEXT & AMP;Provider
68-lesson.Creating a Reducer function
69-lesson.Transfer of all components instead of properties In context
70-less.Comment
4-project.SPA program (one -page application)
71-lesson.Routing and SPA.Acquaintance
72-lesson.Fundamentals of routing and Link component
73-lesson.Hooks usehistory, useparams, uselocation and useroutematch
74-lesson.API
75-lesson.Creating API methods
76-lesson.Category and main page
77-lesson.Method of obtaining products using filter
78-lesson.Recipe
79-lesson.Search panel
Module survey
In what format is the training?
1
Closed group
You can ask questions in closed telegram groups with other students.
2
Online meetings
Regular online calls with teachers through Zoom.
3
Video lessons
Constant access to video tutorials in the learning process.