Introduction to Web Development

Your path from complete beginner to professional web developer

  • The amount of practice:

    70 hours

  • Entrance level:

    Newbie

  • Level to achieve:

    Beginner / Amateur

After completing the course, you will make your first website

Start Course

The course is built of interactive exercises

This is the most effective way to learn since from the very beginning we teach you with live coding to independently solve tasks similar to real ones.

  • Learning with interactive courses means constant practice

    20% of the time you study theory and 80% of the time you write code. Only this approach allows you to gain knowledge and sharpen your skills to the maximum. A perfect start.

  • Interactive courses allow you to study at a comfortable pace

    You can study at your own pace and visually track your progress.

  • Is the course right for you?

    This course is suitable for complete newbies who are not familiar with the world of web development nor the technologies of HTML, CSS and JavaScript. You will learn the basics of web technologies and try yourself as a front-end developer.

  • Your level after the course

    After completing the course, you will be able to create simple web pages at the amateur level and bring small components to life on the website. You will also be ready to study more complex topics and start leveling up to become a freelance web developer or an intern in a small web studio.

  • What you will learn:

    • Learn the basic constructions of HTML, CSS, and JavaScript.
    • Understand tags and their parameters, CSS properties, selectors, and cascading.
    • Learn JavaScript commands, condition variables, and loops.
    • Try yourself as a front-end developer:
      • Make changes to the layout and scripts of the webpage.
      • Create a website from scratch using a graphic layout.
      • Write interactive components in accordance with technical requirements.

Syllabus

  1. Section 1. Introduction to Frontend
    • What is HTML? Basic concepts: tags, single and paired tags, tag attributes.
    • What is CSS? Basic concepts: CSS properties and their values, CSS rules, selectors.
    • Trying ourselves as layout makers, making changes to the content and design of an existing web page.
    • Practicing styling techniques by class and mixing classes.
    • What is JavaScript? Basic concepts: script, program, command, variable, console, methods, events and their handlers.
    • Techniques for working with page elements: searching for elements by a selector, managing the classList, responding to an event, getting and changing attribute values.
    • Trying ourselves as front-end developers, making theme switcher an interactive component and programming a form submission message.
  2. Section 2. Introduction to HTML and CSS
    • The HTML doctype. Basic page tags: html, head, body. Tags for providing metadata information about the page.
    • Tags for describing semantic sections, navigation.
    • Headers, paragraphs, lists. Nested lists.
    • Quotes, code snippets, date and time.
    • sub and sup tags, attracting user’s attention, highlighting text.
    • Generic container div and span.
    • Links, link addresses. Relative and absolute addresses. In-page link.
    • The img tag, images. Overview of the main image formats. Image dimensions management.
    • The figure and figcaption tags, demonstrative material.
    • Syntax of CSS rules, selectors, properties and values. Normal and shorthand properties.
    • Types of values: absolute and relative.
    • Default styles, cascade and property conflict.
    • Embedded styles and the style attribute. Embedding and connecting external style sheets.
    • CSS properties to manage text parameters: font family, font size and weight, line height, color, italics.
    • Absolute and relative font sizes and line heights.
    • Horizontal and vertical text alignment, margins.
    • Space and character case management, underlining, crossing out and other text effects.
  3. Section 3. Introduction to Backgrounds
    • Managing background color and background images.
    • Background position, repeating and background scrolling mode.
    • Multiple backgrounds. Effects with a repeating background.
    • Using bitmap sprites.
  4. Section 4. Basic Mechanics of Animating Interfaces
    • Conditions. Boolean values. Comparison operators: greater than, less than, equality, strict equality, inequality, strict inequality.
    • Combining conditions using the «logical AND» and «logical OR» operators.
    • Checking for the existence of the class using the classList.contains method.
    • Creating elements using createElement and adding them to the page using append.
    • Searching for elements using querySelectorAll, collections, addressing the collection element by index.
    • for of loop. Iterating through collections using loops.
    • Adding event handlers in a loop.
    • Working with data attributes.
    • Form submit event handler.
    • The oninput event handler, getting values from text fields, processing text during input.
    • The onchange event handler, getting values from dropdown lists.
    • Differences between onchange and oninput.
    • The checkedproperty. Getting the value of the checkbox.
    • Handling page scroll events. Working with scroll coordinates.
    • Managing scrolling using the scrollTo method, smooth scrolling.
    • Managing element styles using style.

Start learning

Buy full access for the course. And start learning front-end development from scratch right now.

Course

Introduction to Web Development

$99
Buy now

By pressing the «Buy now» button, you agree to our «License Agreement» and «Privacy Policy».