Algorithm of Creating a Web Page
Creating a website is a step-by-step process. Developers follow a clear algorithm to build pages correctly and avoid mistakes.
Tools needed for a project
To create a website, developers use different tools:
- GitHub — to store and manage the project
- Figma — to view the design (mockup)
- VS Code — to write code
These tools work together: you write code, follow the design, and save your progress online.
What is an algorithm?
An algorithm is a set of step-by-step instructions.
It helps developers work faster, avoid mistakes, and organize their work.
Basic algorithm for creating HTML markup
1. Create a project
- index.html — main file
- images/ — folder for images
Later you may add folders for CSS and fonts.
2. Add HTML structure
Start with the basic HTML skeleton before adding content.
3. Analyze the design
Study the layout from outside to inside:
- header, main, footer
- sections
- heading structure
Use <h1> only once, and <h2>–<h6> for other headings.
4. Build page structure
Add semantic elements like header, main, footer, and sections.
5. Build each section
- identify elements
- choose correct HTML tags
- group similar items into lists
6. Save progress
Make commits regularly and push changes to GitHub.
Working with images
Images are stored in a folder (usually images/).
You can export all images at once or section by section.
Absolute and relative paths
Absolute path
A full URL to a file, including protocol and domain.
https://example.com/images/photo.jpg
Relative path
A path relative to your project structure.
<img src="./images/logo.png" alt="Logo">
Folder navigation
- ./ → current folder
- ../ → one level up
- / → go into a folder
Validation
Validation checks your HTML code for errors.
Why validation is important
- finds mistakes
- helps fix code
- ensures correct display
What validator checks
- correct tag names
- valid HTML elements
- proper nesting
- correct attributes
Results
- Error — must be fixed
- Warning — recommended to review
Validation checks syntax, not semantics. Meaning depends on the developer.
Summary
- Prepare tools
- Create project structure
- Add HTML skeleton
- Analyze design
- Build structure
- Create sections
- Add content
- Use correct paths
- Validate code