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 under development and may differ from the one below.

(click on an item for details)

First level / short course

1. How to study effectively
2. How web works
3. HTML beginnings
4. Code editors
5. First html elements (p, h1-h6, a, img)
1. Nesting
2. Text markup (em, strong, q, blockquote)
3. Data markup (lists, tables)
4. CSS Basics (first properties, browsers default styles)
1. Selectors
2. Cascade, specificity, inheritance
3. Style sources, redefining styles
4. Devtools, DOM
5. Sending data: forms and buttons
1. Lecture: How to search info about frontend
1. Layouts basics, display, flow
2. Box Model, margins
3. Positioning
1. Lecture: Figma for Frontend Developers
1. Flexbox
2. Planing your work, working with figma
3. Starting to work on training template
4. Semantic elements (header, main и footer)
1. Fonts
2. Multiple pages and links
3. Navigation (nav, lists for menus)
4. SVG
1. Types of responsive frontend
2. @media rule
3. Cross browser testing
1. Lecture "Evolution of CSS Layouts"
1. Critical rendering path
2. Adding JavaScript
3. Writing our first js code for menu button
1. Ways to built a site
2. Servers
3. CMS
4. Github Pages as frontend hosting
5. Online services for testing (errors, speed)
1. Video and maps (video, iframe)
2. About SEO
3. favicons, formats, online generators
4. Qna
5. Continue studying
6. Finding job
1. Course preparation (what do you need to learn)
2. Web Color (digital color, color models)
3. Code editors
4. Can I include one html element into another
5. Popular Mistakes and How to Avoid Them
6. Devtools
7. Image formats
8. Web fonts (families, adding, properties)
9. Introduction to BEM Methodology
10. Introduction to Git

Second level / additional webinars

1. Lecture "Git Version Control"
1. Working with the layout in the Figma
2. Accessibility
3. Responsive layout
4. Common challenges
5. Cart and collecting data on JS
1. Lecture "Introduction to BEM methodology"
1. Introduction to Color Theory
2. Color models in CSS
1. Introduction to Typography and Web Fonts
2. Font Families
3. Ways to add fonts
4. Properties
1. Introduction to graphic files
2. Raster
3. Vector
4. New formats of the web
1. Lecture "Developer tools in browsers"
1. Overview of the VS Code interface
2. Extensions
3. How to customize code editors
1. Lecture "CSS Animations"
1. The beginning of the web
2. Static sites
3. Dynamics via JS
4. Dynamic sites via CMS
5. Static builders using the example of Jekyll
6. Types of SSR and CSR, Headless CMS
1. Console
2. DOM manipulations (search, changes)
3. Variables
4. Event handlers
5. Functions
6. Conditional operators
1. Data Types
2. Comparison operators
3. Cycles
4. Working with HTML forms
5. Asynchronous requests
6. Storing the state on the client
1. Analysis of all criteria
1. Continuing education
2. Job search
3. QnA

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