Roadmap
We offer a guide to interactive tasks, following which you will become a real professional.
Introduction to HTML and CSS0/12Introduction to web development
In this chapter, your instructor Muffin will introduce you to the basics of web layout through the example of a small landing page.
Introduction to JavaScript0/16Introduction to web development
We’ll learn a little about JavaScript, use it to change the page layout, write a theme switcher, create an interactive subscription form, and learn how to use the console.
Introduction to PHP0/15Introduction to web development
Let's get to know the basics of PHP. We will learn how to embed PHP in our page layout, work with web scripts and the address bar, and program an online store.
HTML document structure0/17HTML and CSS basics
Let's start by preparing the markup for the blog page, and we will start to understand what tags are used in the markup and what these tags are used for.
Text markup0/20HTML and CSS basics
Let's continue laying out the blog page, and let's learn how to correctly lay out the test content: paragraphs, headings, subheadings, lists and much more.
Links and images0/16HTML and CSS basics
Let's finish marking up the blog pages, adding navigation links as well as figuring out the image formats.
CSS essentials0/16HTML and CSS basics
Let's start with the design of the blog pages and at the same time analyze the basic concepts within CSS, including rules, selectors, properties, values, inheritance, and cascading.
Typography0/19HTML and CSS basics
Finish the design of the blog pages, and learn how to design texts with CSS, including setting fonts, colors, indents, and sizes.
Conditions and creating elements0/15JavaScript basics
Let's learn more about what conditions are, how to create and add new elements to a page, and write a like counter and a commenting system.
Element collections and properties0/16JavaScript basics
Learn more about element collections and the for of loop. Learn how to use properties to get data and manage elements. Create pop-up tooltips and validate forms.
Scrolling and operators0/14JavaScript basics
We will learn how to control scrolling in the browser, and we will also find out more about equality operators and the logical operator AND. We will program a button that will return the use to the top of the page and create filtering for the news site.
Dynamic element styles0/16JavaScript basics
Let’s learn how to change element styles by using the style property and data from the input fields. Let’s program the font color and size on the page and add a complexity scale for the password and the ability to view the password.
Conditions in PHP0/14PHP basics
Learn how to use conditions in scripts and templates. We will learn about comparison operations and logical operators. Let's finish the pages for our online store.
Arrays and loops in PHP0/15PHP basics
We will explore what arrays and loops are and find out why they work great together. You will work with different arrays and loops in the context of the pages of an online store. And you will also add product filtering functionality and solve a couple of additional problems.
Arrays and functions in PHP0/16PHP basics
Learn how to create your own functions and use the built-in ones. We will explore how to use functions to sort, filter, copy, and shuffle arrays. We will finish the shipping status page and display random product listings on the main page of our store.
Numbers and strings in PHP0/14PHP basics
Let's learn how to work with numbers and strings in PHP, and we will introduce you to the for loop and the ternary operator. We will figure out how to create pagination and display the date on the page in a complex format.
Flexbox, part 10/31Creating a layout
We will consider the basics of flexboxes, which provide a new way of creating “flexible” layouts. First, we will learn how to establish the direction of flow of flex container axes and to align and overflow flex items with the kitties, and then we will learn how to apply a flexbox simply and easily within real interfaces.
Flexbox, part 2 [Beta]0/28Creating a layout
We will learn how to control the sizes and margins of flex items and how growth and shrinkage factors work, and we will gain practical experience creating "flexible" layouts and interface elements.
Introduction to Grid Layout [Beta]0/30Creating a layout
In this chapter we will begin to learn about the technology for creating grids: we will figure out how we can create grid layouts using different methods and how to control the location of grid items in a grid container. Then we will put our acquired knowledge into practice and use a grid to create a couple of small interfaces.
Introduction to programming0/14JavaScript programming
Let’s learn the basics of JavaScript by looking at variables, operations and data types. We will also write our first program.
Conditions0/16JavaScript programming
We will learn to use the conditions to the fullest of our ability. We will deal with logical operations and comparisons. We will try to combine operators. And in the end, we will write our second program.
Loops0/26JavaScript programming
Let’s create a driver for printing pages with variety of modes. With help of loops that we’ll explore in this course.
Arrays0/28JavaScript programming
We will learn to work with really massive data and carry out a real analytical investigation. And for this we will look into working with arrays.
Functions0/22JavaScript programming
We'll send Muffin off on a trip, calculate salaries and income and learn how to separate the code into separate semantic blocks. And in the end, we will learn how to work with functions.
Objects0/28JavaScript programming
We’ll read from objects, use built-in and custom methods, find out what dictionaries and call context are, send cats to play dice, write a computer configurator. And that’s not it!
Introduction to JavaScript in the browser [Beta]0/21Deep dive in JavaScript for browsers
Let’s see how JavaScript works with HTML. We will learn how to change the markup and create it from scratch using scripts.
Getting to know events [Beta]0/23Deep dive in JavaScript for browsers
We will learn how to update an old interface and process user events. We will find out what asynchrony, scope, and closure are and how they work. We will figure out a problem involving the organization of school lunches and program a pop-up window and gallery.
Working with DOM [Beta]0/22Deep dive in JavaScript for browsers
We will find out what the DOM API is, work with templates, receive an overview of new events and methods for managing DOM, and figure out how to clone elements and program a to-do list app.
An Introduction to SVG [Beta]0/15SVG basics
We are going to learn about SVG, the vector graphics format. We will analyze the basic primitives: lines, rectangles, and circles. We will learn how to position them, manage colors and sizes, and to create different kinds of drawings from them.
Designing SVG Shapes [Beta]0/20SVG basics
Basic concepts about how to design SVG shapes. Overview of fills and strokes.
Dimensions in SVG [Beta]0/15SVG basics
We will delve into how SVG graphics are scaled and learn how to work with the viewBox and preserveAspectRatio attributes.
2D Transforms [Beta]0/32Dynamic effects
We will rotate, skew, move, reduce, and enlarge objects as well as blow them up with fireballs, teleport them, and use telekinesis. And, of course, we will take a look at some cool techniques for using transforms to create decorative effects.
Smooth transitions [Beta]0/29Dynamic effects
Let's learn how to smoothly change CSS properties. We will create beautiful and functional shape elements that are inspired by Material Design and create a mini-quiz about HTML and CSS.
Animations [Beta]0/31Dynamic effects
Let’s take a look at the ABC of creating animations with CSS. We will walk the evolution path of a civilization and conquer deep space. We will move, rotate and transform objects while learning the basics of object animation in CSS.
Introduction to Backgrounds [Beta]0/16Advanced styling
Let's learn how to use background images and set background colors. Let's take a look at some popular image formats and explore certain techniques for creating decorative effects.
Shadow Play [Beta]0/17Advanced styling
Let's take a look at the process of creating shadows using CSS. We will cover the box-shadow property bit by bit, learn how to use multiple shadows, and explore some advanced shadowing techniques.
Linear Gradients [Beta]0/23Advanced styling
We will learn what linear gradients are and how you can use them to create interesting decorative effects. We will explore the syntax of the linear-gradient function, pick up some cool tricks, and practice creating complex ornaments using gradients.
CSS filters [Beta]0/14Advanced styling
Let's master CSS filters together: we will learn how to apply filters to different elements as well as how to combine and animate them.
Text Formatting [Beta]0/26Advanced styling
We will literally play with fonts, decorative text effects and shadows, and also learn how to make texts more legible using new CSS properties.
Frames and Backgrounds [Beta]0/33Advanced styling
We will learn how to expertly deploy frames and backgrounds of any shape and size, and we will explore the secret uses of long-familiar properties and apply them in practice.