Creating an HTML/CSS Project: Guide
You can use online tools like CodeSandbox for creating projects. However, a more professional approach is to store all project files locally on your disk.
- Building HTML HTML, or HyperText Markup Language, is a markup language used to define the structure of a web page. It enables organizing and formatting text, images, and other elements on a page.
Example HTML document structure:
1<!DOCTYPE html>
2<html>
3<head>
4 <title>My Page</title>
5</head>
6<body>
7 <header>
8 <h1>Page Heading</h1>
9 </header>
10 <main>
11 <p>Page content...</p>
12 </main>
13 <footer>
14 <p>Page footer</p>
15 </footer>
16</body>
17</html>- CSS Styling CSS (Cascading Style Sheets) is a language that allows styling web page elements. With it, we can control the appearance of texts, colors, backgrounds, layouts, and other aspects of the page.
Example CSS styles:
1body {
2 background-color: lightblue;
3}
4
5h1 {
6 color: navy;
7}
8
9p {
10 font-size: 16px;
11}
12
13main {
14 padding: 20px;
15}- Integrating HTML and CSS There are different methods of connecting HTML and CSS code:
a) Internal CSS Styles CSS styles can be placed directly in the HTML document, inside the <head> section, using the <style> tag.
1<head>
2 <style>
3 h1 {
4 color: navy;
5 }
6 </style>
7</head>b) External CSS Files The recommended method, which involves storing CSS styles in a separate file (e.g., style.css). This file is then included in the HTML document using the <link> tag.
1<head>
2 <link rel="stylesheet" href="style.css">
3</head>c) Style Attribute The style attribute can also be used directly in HTML tags, allowing styles to be applied directly to selected elements. However, it's better to avoid this method as it makes style management and code maintenance difficult.
1<h1 style="color: navy;">Page Heading</h1>VIDEO - codesandbox
- explanations
VIDEO - from scratch VSC
- program usage
Installing Visual Studio Code Download and install Visual Studio Code from the official website link.
Creating a New Project Open VSCode. Choose File > New Window (or use the shortcut Ctrl+Shift+N) to open a new VSCode window. Choose File > Open Folder and select the folder where you want to store your project.
Creating an HTML File In the left toolbar, right-click on the project folder and choose New File. Name the file with a .html extension, e.g., index.html.
Creating a CSS File Right-click on the project folder and choose New File. Name the file with a .css extension, e.g., styles.css.
Linking HTML and CSS Files Open the index.html file. In the <head> section, add a link to the CSS file as shown below:
1<head>
2 <title>Your page</title>
3 <link rel="stylesheet" href="styles.css">
4</head>Previewing the Page To see what your page looks like, open the index.html file in a web browser. You can also install an extension like "Live Server" in VSCode, which will automatically refresh your page after each change.
Saving and Testing Save all changes (File > Save All or Ctrl+K S). Test your page by making various modifications and observing the results.