Frontend Basics Course

About this course

The course includes the beginnings of frontend, the basics of HTML/CSS and modern CSS layouts, working with the design templates, a beginnings of JavaScript, using Github Pages as hosting.

What you will learn

You will learn how websites work, how to create them from scratch, make them according to a design template, using hosting to put them online and use a variety of development tools.

Target audience

The course is for anyone who wants to start a career in the Frontend, fullstack web developer or build their own project. For students and those who want to change their profession. As well as for related professionals: web designers, backend programmers, marketers and managers who want to expand their skill set and better understand web development.

The course is designed for absolute beginners. You don't need to know anything about web development and the Internet. But you need to be a confident PC user.

Why this course

Relevant knowledge
The course focuses on native technologies that are always relevant. You will learn modern versions of languages and best practices. At the same time, I also show outdated practices that you may encounter in the wild.
Balanced education
The course starts from the very basics and gradually becomes more complicated. Theory and practice are given together. I show in class how to write live code, not static slides (as it is often the case).
Not just hard skills
In addition to HTML, CSS, JS and other technical tools, you will also learn things that are important for any student: how and where to look for information, how to learn more effectively, how web development has evolved.
Experience
I worked at many educational organizations for developers and I'm using this valuable experience to create a better education. I adopt the best and learn from the mistakes of others:)
Author's motivation
I started working in education because I myself faced problems and not the best education quality. I want to help newcomers and give them the best possible education.
Continuing education
At the end of the course, students are given a link to regularly updated list of frontend links to continue education on your own. Part of these links students will get during the course.

Skills, languages and tools

HTML
Markup language for creating content, structure, and meaning
CSS
Styling language for creating layouts
JavaScript
Programming language to add interactivity
Figma
Graphic editor for creating UI and layouts
VS Code code editor
Main tool of any developer
Browsers dev tools
You write code for browsers and also test the result there
How Internet works
Basics of the Internet and the Web for beginners
Information search
One of the key skills for any developer
Best and worst practices
What you should and shouldn't do.

Practice

The practice consists of creating web page UI based on Figma design templates. In the short version of the course, students create one page. In the extended version there are two: training one and your typical commercial landing.

I am currently working with three designs: training one by me, Agency landing - easier one and E-comm - more complicated one. It is possible to use any other project chosen by me or by an institution (this will increase the duration of the course development)

Depending on the desired difficulty, students can make the same site as the teacher or different one.

For educational organizations with code reviewers/tutors

The practice is evaluated according to the criteria prepared for each site. Mentors will also have access to the finished product.

For educational institutions without a review/for groups of students

An option without manual code review is possible. Instead, I will conduct master classes with gradual implementation. One section of the layout on each masterclass. We will also analyze popular mistakes that and answer student's questions.

Plan

The course is constantly being updated and may differ from the one below.

(click on an item for details)

Basics course

1. How to study effectively
2. How web works
3. HTML beginnings
4. Browsers
5. First html elements (p, h1-h6, a, img)
1. Nesting
2. Transferring content from Figma
3. Using lists
4. Semantics
5. Data markup
1. Browsers default styles
2. Devtools
3. SS Basics (syntax)
4. first properties, browsers default styles
5. Selectors
6. Cascade, specificity, inheritance
7. Style sources, redefining styles
1. Box Model
2. Flow
3. CSS Layouts (display)
1. Lecture: How to search info about frontend
1. Lecture: Figma for Frontend Developers
1. Flexbox layout
2. Working with figma
1. Lecture "Popular Mistakes and How to Avoid Them"
1. Fonts
2. Multiple pages and links
3. Navigation (nav, lists for menus)
4. SVG
1. Lecture "Evolution of CSS Layouts"
1. Why do we need responsive web
2. Types of responsive frontend
3. @media rule
4. Cross browser testing
1. Critical rendering path
2. Adding JavaScript
3. Writing our first js code for menu button
1. Servers and backend
2. Local server for testing
3. Github Pages as frontend hosting
1. Ways to build a web site
2. Static site generator Jekyll
1. Video and maps iframes
2. Favicons
1. Lecture "Git Version Control"
1. Lecture "Introduction to BEM methodology"
1. Platforms, console
2. DOM manipulations
3. Variables
4. Functions
5. Event listeners
6. Operators
1. Data types
2. Cycles
3. Saving states on client
4. Working with HTML forms
1. Lecture "CSS Animations"
1. About SEO
2. Continue studying
3. Finding job
4. Qna

Additional webinars

1. Working with Figma
2. Semantic markup
3. Responsive css
4. Analysis of difficult parts
5. Popup menu / cart JS
1. Browser Devtools
1. VS Code overview
2. Extensions
3. Customizing VS Code
1. In this webinar, I teach the pseudo-classes :nth-child() and :nth-of-type(), how they work, what are their differences, where they are used and also about how formulas work.
1. In this webinar, I teach all the values of the position property, how they work, where they are applied. I show examples first on the abstract code, then on training and real sites. In addition, I teach how the z-index and the positioning context work.
1. Decoration with pseudo-elements ::before and ::after and more
1. Color theory introduction
2. Color models in CSS
1. Introduction to graphic files
2. Raster
3. Vector
4. New formats of the web
1. Introduction to Typography and Web Fonts
2. Font Families
3. Ways to add fonts
4. Properties
5. Variable fonts
1. All criteria overview
1. Webinar about CSS Custom Properties aka CSS variables, how they work, how they can be used, features and examples.
1. Webinar about CSS functions min(), max(), clamp() и calc() with examples.

You can find list of all webinars on a separate page.