Frontend developer - course 70,000 rub. from GeekBrains, training 5 months, Date: June 10, 2023.
Miscellaneous / / December 05, 2023
Frontend developer - the most in-demand IT profession, according to HeadHunter. To master a specialty, school knowledge will be enough for you. You will learn how to layout websites using HTML and CSS, master JavaScript and advanced layout using ReactJS.
Web development. Fast start
Basics of HTML/CSS and PHP
PHP (Hypertext PreProcessor, hypertext preprocessor) is a programming language executed on the web server side. The creator of PHP, Rasmus Lerdorf, designed it as a tool for creating dynamic and interactive websites. The language has gained great popularity and is used in projects of various sizes: from a simple blog to the largest web applications on the Internet. The largest PHP projects are Zend, Yahoo, Facebook, Google, NASA, W3C. The course is intended for those who want to acquire basic web development skills in PHP, learn the logic of working with this language and terminology, as well as understand the principles of operation of systems and web applications. During the training process, students go through the main stages of creating a simple online store website and work on its functionality. The knowledge and skills acquired during the course are a reliable basis for further development as a PHP developer.
Lesson 1. What is PHP for?
What features does PHP provide? advantages over other languages and why you should choose it; what will happen on the course: we consider the course plan, what result we will get, what we will learn.
Lesson 2. Installing and deploying a server on your computer
How the web server, PHP interpreter and database interact with each other; download the ready-made Open Server assembly; select the PHP version; select the apache version; setting up access to the local site; how to understand that everything is configured correctly and is working; We use the Sublime Text code editor built into the Open Server assembly.
Lesson 3. How to create web pages
Briefly consider what html is needed for; We consider the main tags: doctype, html, head, title, body, header, h1, footer, div, a, img and their place in the web page; We demonstrate how these tags work; display the created tags in the “Developer Tools” panel in Google Chrome; We create links to the main page and the store page so that you can go to the store and back.
Lesson 4. Creating a layout for our store
Let's look at CSS: what it is, how to connect styles to the page; We write a header and consider how to design it using CSS.
Lesson 5. Finishing the template design
We finish writing the header; add the remaining parts of the layout from the finished template; We transfer the necessary parts of the layout from the finished template (HTML, CSS, JavaScript).
Lesson 6. PHP Basics
How to use PHP in our template; what variables are needed for and how to work with them; what data types are there in PHP, what are they for.
Lesson 7. How to store lots of related data
What are arrays for and how to use them; We put information about the product into an array.
Lesson 8. Storage and processing of related data
Nested arrays; We place data for our store in nested arrays; How to get information about a product from a nested array.
Lesson 9. Working with cycles
What to do if you need to display a lot of data from an array on the page.
Lesson 10. How to make a website live
How to make the program change behavior depending on different conditions; how to understand which page to open; use the address bar parameters to open the desired page.
Lesson 11. How to navigate between pages
We make links to other pages; We organize a convenient template structure; we transfer individual parts of the template to other files; We connect other pages depending on the parameters in the address bar.
Lesson 12. Creating a product catalog
Displaying all products on the page; working with the product page; how to create the correct links for each product in the product catalog; We display product information on a separate page.
Lesson 13. We place the website on the Internet
Registering a name for our website; upload files to the hosting and check the functionality of the site.
Git. Basic course
Git Basics
13 videos will teach you the basics of working with the Git version control system. You'll learn why it's important in modern development. Learn the basic concepts: repository, commits, branches and tags. Master key operations: creating and cloning a repository, merging branches, querying change history, and much more. After training, you'll be ready to use Git to prepare homework assignments for programming courses in any language. Plus, you'll get closer to the interview, where several questions usually focus on version control.
Lesson 1. Introduction to Git
Lesson 2. Installing and Configuring Git
Lesson 3. Basic terminal commands
Lesson 4. Working with repositories in Git
Lesson 5. Repository File Management
Lesson 6. History of changes
Lesson 7. Working with repository branches
Lesson 8. Publishing a repository
Lesson 9. Branch merges
Lesson 10. Version management
Lesson 11. Creating a pull request
Lesson 12. Complex operations
Lesson 13. Working with Fork repositories
HTML/CSS. Interactive course. 1 month.
HTML/CSS is a hypertext markup language, the basis for studying server-side languages. By learning HTML, you can create a responsive web page or website. CSS - cascading style sheets - will allow you to design your website the way you want. You will be able to watch the video course at a convenient time and if you have any questions, contact a mentor who will monitor your progress. The format encourages communication and self-discipline in learning. In a month you will learn: * layout of responsive websites, * valid cross-browser layout, * flexbox layout, * performing basic operations in Figma, * using SASS and Bootstrap preprocessors. Your homework must be graded before you can move on to the next lesson in the course. This will show that you understood the previous lesson and will easily learn new knowledge. The task can be checked by both the mentor and classmates whose knowledge you trust, and receive an achievement for it. With each check, the number of achievements grows, and the skill of working with other people's code increases. The level of the final certificate depends on the number of achievements: the more there are, the higher the status. This somewhat game mechanic makes classes even more interesting.
Lesson 1. Basic concepts in web development
Introduction, introductory information, setting up visual studio code, hotkeys, installing extensions. Creating an html document Structure of an html document. Types and attributes of tags Browser debugger
Lesson 2. HTML Document Markup Language Basics
Lists in html Special characters and comments Hyperlinks (local, absolute, anchors) Types of images for the web; Forms and their elements. View, edit, search for errors through the browser debugger
Lesson 3. Basics of the CSS document styling language
Introduction to styles Methods for connecting styles Selectors Basic properties of styles (px, %, background, color, border) part 1 Basic style properties (width, height, font, list-style, text) Nesting, inheritance and grouping properties
Lesson 4. Basic tags for layout, Pseudo-classes and pseudo-elements
Basic tags div, span, creating a block structure Element indents Flow elements Pseudo-classes Pseudo-elements Tables
Lesson 5. Positioning basics, working with Flexbox
Display property What is flexbox (horizontal and vertical layout) Display order, multi-line, offset of a separate block Setting flexible sizes for blocks Position: relative and absolute
Lesson 6. Working with a design mockup in Figma format
What is a layout and what types of layouts are there? Getting to know the Figma program, cutting the layout Determining the sizes of blocks, creating a block structure Adding styles from the layout Creating a website based on the layout. Part 1 Creating a website based on the layout. Part 2
Lesson 7. Basics of creating a responsive website
Flexible block sizes, responsive website Mobile device emulation Media queries Footer squeezing to the bottom of the screen Practice of creating a responsive website Practice of creating a responsive website part 2
Lesson 8. Web standards and supporting tools
Developer Tools. Part 1 Uploading projects to the server Cross-browser Introducing Boostrap Introducing the Sass preprocessor Practical use of the Sass preprocessor
Basics of programming
The course is aimed at people with no programming experience. To start learning, it is enough to have computer skills at the level of the most ordinary user. All training will take place in the browser and you will not need to install additional software. You will learn what a program is, how it is executed, and get acquainted with the basic operations in programming. We will talk about basic data types, arrays, branching, loops and functions in accessible language. You will gain experience in solving simple but interesting problems, which will give you the basis for learning to solve much more serious problems.
Lesson 1. Program, variables and data types
After the lesson, you will have an idea of what a program is, that it consists of instructions and data, you will learn scalar data types in JS, you can write a program that multiplies two numbers entered by the user and prints result.
Lesson 2. Flowcharts and branches
After the lesson, you will have an idea of how to visualize algorithms using flowcharts, understand the work of comparison operators, understand how to use branching and what problems it solves
Lesson 3. Cycles
After this lesson, you will have an understanding of how to visualize cyclic algorithms using flowcharts, how to use loops, and what problems they solve.
Lesson 4. Functions
After the lesson, you will have an idea of what problems are solved by putting code into functions, and be able to create functions, including those that take arguments.
Lesson 5. Arrays
After the lesson, you will have an idea of what problem arrays solve, be able to create arrays, add and receive its elements.
HTML5 and CSS3. 1 month.
Modern Web Development Tools
The basis of web technology is HTML/CSS. This is the basic foundation that serves as the basis for creating modern websites and is the first stage for learning other programming technologies for the global Internet. Any significant organization has its own representation on the global network. This is a requirement of the time and a requirement of the market. Without taking into account the modern realities of the world, it is impossible to achieve competitiveness and therefore success. It is the HTML/CSS combination that makes it possible to create layouts, create and edit static sites. The programming technology studied in this course allows you to lay a long-term foundation and gain a foothold in this area in the labor market.
Lesson 1. HTML5: Semantic elements.
Review of HTML5, New semantic elements of HTML5, New way of structuring pages. Text-level semantics. Setting up the editor, practical examples of using semantic tags to create a site structure. Introduction to plugins that speed up website layout.
Lesson 2. Positioning of elements, Practical layout.
Positioning of elements, arrangement of elements on the page (positioning of elements vertically, horizontally). Let's look at the most popular CSS generators, what they are, and what each of them is used for.
Lesson 3. HTML5 forms. Adding Audio and Video to the page.
Let us consider and analyze in detail these features using practical examples. Improvements on traditional forms (adding hints, focusing on an element, etc.). Checking forms for filling errors. New element types (email addresses, URLs, etc.). Let's add video and audio information to our project, let's see how all this is implemented in practice. Let's look at how tags work. Assignment of classes, analysis of BEM technology
Lesson 4. Background CSS options. Using SVG.
Creating multiple backgrounds for the site. Setting background images for responsive sites. Creating a gradient background for a website. Introduction to sprites and icon fonts. Let's modernize our project in accordance with the new features of CSS3. Let's add the necessary elements and effects. Introduction to the svg format.
Lesson 5. Work with text. Borders in CSS3
Working with fonts. GOOGLE Web Fonts. Placing text in several columns. Let's consider the mechanisms for presenting text information: design, alignment, indentation. Switchable tabs to create menus. Let's look at the basics of Canvas. Let's look at working with borders in CSS and ways to create frames for elements. Creating transparent frames, shadows, rounded corners, gradients.
Lesson 6. CSS3 transition and transformation effects.
Transition effects. Applying transformation. Rotate elements when hovering over it. Creating animation using CSS3. Let's find out why this technology is needed and where it should be used. Let's add animation to some elements of our site.
Lesson 7. Adaptive layout (Part 1).
Let's look at the concept of responsive design. For what and in what cases is it used. Basic syntax and examples. Let's give the design a modern look.
Lesson 8. CSS3 Deep dive. SASS. Flexbox.
Let's consider the new flex property to create a flexible structure of internal website blocks. We will make the final project with all the improvements and innovations introduced by CSS3, using one of the most popular SASS preprocessors.
JavaScript. Level 1. 1 month.
Interactive Web Applications
This course is intended for those who are already familiar with the principles of HTML layout and creating static pages. The practical knowledge and skills acquired at this level provide the ability to work and create dynamic web pages and applications. The course systematizes the knowledge of students who have already encountered JavaScript, but do not have extensive experience with the language. Students learn the basics of creating interactive web pages using JavaScript. The knowledge gained in the lessons is reinforced through the practical part - the implementation of games in JavaScript. Before starting training, it is recommended to take the “Programming Fundamentals” and “HTML / CSS” courses.
Lesson 1. JavaScript Language Basics
Syntax; code structure; external scripts and the order of their execution; variables and data types; Hello world; modern standards.
Lesson 2. Basic JavaScript Operators
Operators and operands; priority of operations; conditional statements; functions; recursion; workshop; game "Guess the number".
Lesson 3. Loops, arrays, data structures
Loops in JavaScript; arrays in JavaScript; data structures; workshop; game "Bulls and Cows".
Lesson 4. Objects in JavaScript
Introduction to the concept of objects; objects in JavaScript; working with objects; enumeration of values; workshop; game "Quest".
Lesson 5. Introduction to DOM
Concept of DOM; DOM in JavaScript; DOM manipulation in JavaScript; workshop; game "Quest 2.0".
Lesson 6. Handling Events in JavaScript
The concept of an event; click processing; browser events; workshop; game "Tic Tac Toe".
Lesson 7. Workshop lesson
Implementation of the game "Snake".
Lesson 8. Anonymous functions, closures
In-depth study of how functions work; functions and functional expressions; anonymous functions; short circuits; default browser actions.
JavaScript. Level 2. 1 month.
Advanced course
The course is intended for those who have already mastered the basic capabilities of the JavaScript language and now want to learn how to do really cool things. Each lesson includes both useful theory and effective practice. Packed with the latest knowledge and skills, the advanced course from GeekBrains is the way to quickly and reliably become a professional JavaScript developer.
Lesson 1. Modern JavaScript
Introduction to the ES2015 standard and some of its capabilities.
Lesson 2. OOP in JavaScript
Basic principles of object-oriented programming and its implementation in JavaScript.
Lesson 3. Asynchronous requests
Asynchronous JavaScript Basics. AJAX, JSON and Promises.
Lesson 4. Regular Expressions
Regular expressions in JavaScript. Basic operations with regular expressions and strings.
Lesson 5. Vue.js framework
Basics of developing single page applications using the Vue.js framework.
Lesson 6. Vue.js Components
Implementation of the component approach in the Vue.js framework.
Lesson 7. JavaScript on the server
Creating a simple server using the Node.js platform.
Lesson 8. Testing and assembly
Testing individual parts of the application. Building modules using Webpack.
Database Basics. 20 lessons.
Database Design and SQL Queries
Databases (DBs) are data storage and processing systems that are accessed using the SQL (Structured Query Language) language. Any modern website, game or desktop application needs data storage. At the moment, there are many different database management systems (DBMS), the most popular being MySQL. “Database Basics” is 20 intensive video lessons (10 minutes each), where we will go through all the stages of database design using the example of an online store using the SQL query language. After this course, you will be able to use various databases, such as MS SQL and Postgre Sql, since the SQL syntax for them is practically the same.
Lesson 1. Relational Databases
What is the difference between a database and a DBMS; what databases are called relational; overview of modern DBMS.
Lesson 2. Installing the DBMS
Installation of the MySql DBMS and the Mysql Workbench graphical application.
Lesson 3. Database design, normal forms
Data design in Excel; normal forms; primary key.
Lesson 4. SQL command CREATE
Creating tables in the MySql Workbench GUI; CREATE command; data types; work in the console.
Lesson 5. SQL INSERT command
Filling tables with data using a graphical interface; INSERT command; AUTO INCREMENT.
Lesson 6. SQL SELECT and WHERE Commands
Receiving and filtering data using SQL SELECT and WHERE commands; checking for NULL; filtering data by several conditions.
Lesson 7. SQL commands DISTINCT, ORDER BY, LIMIT
Receiving and filtering data using SQL commands DISTINCT and LIMIT; sorting using the ORDER BY command.
Lesson 8. SQL commands DELETE and UPDATE
Updating and deleting data using SQL commands DELETE and UPDATE; filtering data using WHERE IN.
Lesson 9. Data Consistency
The concept of consistency or consistency of data.
Lesson 10. External key
The concept of a foreign key and restrictions on column values; FOREIGN KEY CONSTRAINTS.
Lesson 11. Creating tables with a many-to-many relationship
Adding a cart to the online store database.
Lesson 12. Composite primary key
Using a composite primary key when designing a table with a many-to-many relationship.
Lesson 13. Merging data from multiple tables
Retrieving data from several interrelated tables; inconsistency of the approach using several SELECTs.
Lesson 14. INNER JOIN operator
Joining data from multiple tables using the INNER JOIN operator.
Lesson 15. Operators LEFT JOIN, RIGHT JOIN
Joining data from multiple tables using LEFT JOIN and RIGHT JOIN operators.
Lesson 16. UNION operator
Combining the results of multiple SQL queries using the UNION operator.
Lesson 17. Aggregation functions
Aggregating functions COUNT, SUM, MIN, MAX.
Lesson 18. GROUP BY operator
Group a selected set of rows using the GROUP BY clause.
Lesson 19. Indexes
Filtering in GROUP BY using HAVING; increasing the speed of query execution using indexes.
Lesson 20. Transactions
Transaction concept; TRANSACTION statement; ACID requirements for the transaction system.
ReactJS. 1 month.
Professional frontend development
ReactJS is a JavaScript library for building user interfaces. It was introduced by Facebook in 2013 and quickly gained popularity. Today it is used by many famous companies, including Instagram, Airbnb, Ebay, Netflix, Yahoo and others. This course is designed for beginner front-end developers who have mastered the JavaScript language. During the course, we will learn one of the most popular libraries for professional front-end development - ReactJS. In combination with the Redux library, which we will also study in the course, ReactJS is a worthy competitor to the popular AngularJS framework. By the end of the course we will have developed a small social network.
Lesson 1. Introduction to ReactJS: Modern Javascript
Introduction to ReactJS; comparison with other technologies; modern JS; what's new in ES6 and how to use it; classes, inheritance, rest/spread modules, parameters, promises, modules.
Lesson 2. Life cycle of a React component
ReactComponent, state, componentWillMount and componentDidMount, componentDidUpdate, componentWillUnmount. Nesting of components and props and propTypes. Start of messenger development.
Lesson 3. Let's continue our dive into React and connect the UI library
What is Virtual DOM. Styling React components. Event processing. Connecting and using Material UI.
Lesson 4. Routing in React: breaking the messenger into chats
prevState and prevProps. BrowserRouter connection. Switch, Route and Link. How is routing carried out? Storing chats and messages. Ways to Debug a React Application
Lesson 5. Redux. Application State Management
Why do we need Redux? How Redux works. Reducers and actions. Redux DevTools Extension. Components and containers. Transferring messages to Redux.
Lesson 6. Redux middlewares, connecting a router to Redux and storing data using Redux-persist
When to use Redux middlewares. Implementation of a response from a robot using middlewares. ConnectedRouter. Storing message history using redux-persist.
Lesson 7. Working with the API
What is an API? How asynchronous requests work. Briefly about promises. fetch(). redux-api-middleware. normalizr and schemas. Receiving chats and messages via API.
Lesson 8. Progressive Web App
What is PWA. Why is this relevant? How PWA works. Lighthouse. Service worker Web App Manifest. Restrictions. Chips and tricks.
Internship at GeekBrains (Web). 2 months.
Team Development Practice
During the internship, students will have to work remotely on an Open Source project or startup. Students will be asked to choose from a set of projects available for development. They will learn to work in a team, communicate with other developers, product and project managers, designers, will study flexible methodologies, the SCRUM framework, and master the principles remote work. The result of the internship: the ability to work in a team, the addition of a portfolio, the ability to indicate work on a project as core work experience in your resume. The internship will be in the format of part-time remote work, weekly status meetings with the teacher in webinar format.
Lesson 1. Start of the project
The first lesson of the internship is introductory. We get to know each other, understand the scope of skills the students have, and most importantly, what they want to develop. We explain the difference between an internship and regular courses. We tell you what will happen during and between webinars.
Lesson 2. Agile development methodologies
The second lesson is devoted to development methodologies. This is simply necessary, since other courses do not teach this and students do not know how to work in a team. Starting with this lesson, students work in teams. Homework is specifically about team development.
Lesson 3. Problems and their solutions. Meeting
The third lesson is devoted to an analysis of the problems that students will certainly encounter while working on the project. This is necessary because students, when faced with problems within the team for the first time, may give up and stop developing the project. We ask what problems have arisen, give advice, and talk about MVP (minimum viable product).
Lesson 4. First interim results
The fourth lesson is devoted to an overview of the intermediate successes that students achieved during the 3 weeks of project development. We give advice, make comments, help solve problems and help choose the right direction for the project.
Lesson 5. Meeting. Quality. Testing
Let's look at an important topic: how to write autotests for code. We explain the different types of tests and why they are needed. At the end of the lesson, we advise students to write autotests for the project in order to better understand this topic.
Lesson 6. Meeting. Preparing a resume
We ask students how they are doing with their projects. If there are serious problems, we will help you solve them. We are interested in how things are going with autotests. We analyze the autotest for any of the projects (at the request of students). We remind you that there is very little time left (two weeks). We help speed up project development by prioritizing the tasks students want to do.
Lesson 7. Meeting. Developer career
As the course comes to an end, it's time to teach students how to write something important to them - a resume. We talk about important points that HR pays attention to, give advice and warnings. We indicate the task for the next lesson: write your resume and indicate in your work experience a student internship at GeekBrains.
Lesson 8. Summarizing
This is the last webinar where we summarize the results. If students allow their resumes to be checked at the webinar, we check and provide feedback. Next, we demonstrate student projects, show who managed to achieve what, and praise the students. We tell students that they don’t have to stop there and continue developing the project.
Freelance developer: training course
Freelance developer: training course
A free course for beginner developers who want to try their hand at freelancing. The course will help you dispel myths about freelancing, understand how it differs from remote work, and decide how suitable this format is for you. During the course, students will go from registering on a freelance exchange and filling out a profile to submitting their first order and receiving their first review. You will learn how to stand out from other candidates, how to correctly determine the cost of your work, and how to competently build relationship with the customer so that they come back to you with repeat orders, and experienced freelancers will share bright cases from their practices.
Lesson 1. Freelancing - how it works
In the first lesson we will learn how freelance work can be arranged, how it differs from remote work, and how much money it can bring in. Let's figure out what areas are in demand now and how to get started. Let’s get all the introductory information to try on the role of a freelancer and understand how comfortable and interesting it is.
Lesson 2. First steps on the freelance exchange
Lesson 3. How to increase your chances of freelancing
Lesson 4. How to achieve your financial goals as a freelancer and not drown in work
Lesson 5. Cases and tutorials from experienced freelancers