Web Design and Web Communication Techniques I. | Web Programming Basics | 2025

Course Overview

Module I: Foundation and the anatomy of the static website

1st occasion: The ‘big picture’ and the first steps

1. Theoretical part:1.1. What is the Internet? The Network of Networks.
2. 1.2. Actors of the Internet: client, server, router.
3. Practical part:1.1. Configure the development environment: installation of the code editor.
4. 1.2. Preparation of the project: create the project folder.
5. 1.3. The first building block: the structure of the index.html file.
6. 1.4. Display the first website in your browser.
7. A summary of the clock.

2nd occasion: From Request to Appearance

1. Theoretical part:2.1. The process of accessing websites.
2. 2.2. The Directory: the operation of the domain name system (DNS).
3. 2.3. Language of communication: HTTP and HTTPS protocols.
4. Practical part: Website vase2.1. Preparations: Create the new HTML file.
5. 2.2. The structure of the semantic frame (header, main, footer).
6. 2.3. Filling the frame with content (section, article, h2, p).
7. A summary of the clock.

3rd occasion: Invisible layers and visible style

1. Theoretical part:3.1. Process of data transmission.
2. 3.2. Data packets and their role.
3. 3.3. Reliable transport: the TCP/IP protocol pair.
4. Practical part: First brush strokes with CSS3.1. Create and connect the style sheet (style.css).
5. 3.2. The first rules of style: selectors, properties and values.
6. 3.3. Use a custom font with Google Fonts.
7. A summary of the clock.

4th occasion: The basics of the design system

1. Theoretical part:4.1. The problem: lack of consistency and difficulties in maintenance.
2. 4.2. The solution: design tokens and centralized style management.
3. 4.3. The technology: use of CSS variables (custom properties).
4. Practical part: Refactoring the code4.1. Creates the tokens.css file and defines the variables.
5. 4.2. Connecting the new style sheet in the right order.
6. 4.3. Convert existing CSS code to use variables.
7. 4.4. Demonstration of the power of variables: global design change with a single line rewrite.
8. A summary of the clock.

II. Module 1: Layout and responsiveness

5th occasion: The CSS Box Model

1. Theoretical part:5.1. Basic concept: Each item is a box.
2. 5.2. Four layers of the box model: content, inner space (padding), border, outer space (margin).
3. 5.3. Box-sizing: The border-box problem and its solution.
4. Practical part: Space and form5.1. Set up global box-sizing.
5. 5.2. Format the sections: Set spacing and borders.
6. 5.3. Fine-tuning with the help of classes.
7. A summary of the clock.

Session 6: Modern layout with Flexbox

1. Theoretical part:6.1. A modern approach to the arrangement of boxes.
2. 6.2. The two main characters of Flexbox are: flex container and flex elements.
3. 6.3. Axles: the role of the main axis and the cross axis.
4. Practical part: The first flexible component6.1. Preparation of the HTML frame of the header.
5. 6.2. Turning the header element into a flex container.
6. 6.3. Layout of the interior elements (logo, menu) along the main and cross axis.
7. A summary of the clock.

7th occasion: Introduction to Bootstrap Framework

1. Theoretical part:7.1. Acceleration of development: Why use a framework?
2. 7.2. What is Bootstrap? Components and auxiliary classes.
3. 7.3. Bootstrap's 12 column grid system.
4. Practical part: The first grid system7.1. Integration of Bootstrap into the project via CDN.
5. 7.2. The structure of the first grid (container, row, col).
6. 7.3. Keeping the project clean after the exercise.
7. A summary of the clock.

Occasion 8: Project work I – Responsive layouts

1. Theoretical part:8.1. The principle of responsive design: A website with a wide variety of screens.
2. 8.2. Bootstrap breakpoints and the mobile-first view.
3. Practical part: The Responsive Card Grid8.1. Preparation of the a-planets.html page vase.
4. 8.2. Creation of the first responsive column (col-12, col-md-6, col-lg-4).
5. 8.3. Use and duplicate the Bootstrap card component.
6. 8.4. Test responsive behavior in a browser.
7. A summary of the clock.

III. Module 1: Project building and advanced techniques

9th occasion: Project work II. – Structure of the main page

1. Theoretical part:9.1. Leaving the ‘bootstrapes’ look, creating a unique design.
2. 9.2. CSS override strategy and specificity.
3. Practical part: The Hero and Feature Sections9.1. Preparation of the main page (index.html).
4. 9.2. Structure of the "hero" section with video background and CSS positioning.
5. 9.3. Create the Feature section and the unique button style.
6. A summary of the clock.

10th occasion: Project work III. Visual depth and components

1. Theoretical part:10.1. From static background to dynamic depth.
2. 10.2. The illusion of the parallax effect with the help of CSS (background-attachment: fixed).
3. Practical part: Parallax and Quotes10.1. Structure and style of the parallax-effect section.
4. 10.2. Create quote section with custom storage and responsive fine-tuning.
5. A summary of the clock.

Session 11: Project work IV. Card component and override

1. Theoretical part:11.1. Benefits of component-based thinking.
2. 11.2. The strategy for customizing the Bootstrap card component.
3. Practical part: Building custom cards11.1. Create the HTML frame of the card section on the main page.
4. 11.2. Write the card's unique style (hover effect, object-fit).
5. 11.3. Reproduction and control of the finished component.
6. A summary of the clock.

IV. Module 1: Finalisation and publication

Session 12: Project work V – Structure of side pages

1. Theoretical part:12.1. Efficient recycling: How does the component-based structure accelerate the work?
2. Practical part: Gallery and contact page12.1. Create the gallery page (galeria.html) from existing elements and a new grid.
3. 12.2. The structure of the connection page (link.html).
4. 12.3. Integration of the contact form and an embedded map.
5. A summary of the clock.

Session 13: DRY Principle and Dynamic Content Charging

1. Theoretical part:13.1. The dangers of code repetition.
2. 13.2. The solution: the DRY principle (‘Don’t Repeat Yourself’).
3. Practical part: Refactoring the project13.1. Creating component files (navbar.html, footer.html).
4. 13.2. Placeholder elements in HTML files.
5. 13.3. Inserts the dynamic content loader JavaScript code.
6. 13.4. Necessity and configuration of the use of the local server.
7. A summary of the clock.

14th occasion: Version management and publishing Gittel

1. Theoretical part:14.1. The developer’s ‘safety net’: Why do we need version control?
2. 14.2. What is Git? (Local version control).
3. 14.3. What is GitHub? (Remote, cloud-based repository).
4. 14.4. The basic workflow (add, commit, push).
5. Practical part: From the project to the public website14.1. Initialize the local Git repository.
6. 14.2. Creation of the first ‘commit’.
7. 14.3. Create and link the GitHub repository to your local project.
8. 14.4. Publication of the website via GitHub Pages.
9. A summary of the clock.