HTML and CSS: Where to Start? Complete Beginner's Guide
Mike Codeur
Learning web development often begins with two fundamental pillars: HTML and CSS. These technologies are the foundation of every website, whether simple or complex. But where should you start as a beginner? This practical guide will give you the keys to begin your journey into the world of web development.
What is HTML and CSS?
HTML: The structure of content
HTML (HyperText Markup Language) is a language that allows you to structure the content of a web page. Imagine it as the skeleton of a website. With HTML, you can add elements such as:
- Titles
- Text
- Images
- Links
- Tables
Example of HTML code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is my first paragraph!</p>
<a href="https://example.com">Visit this link</a>
</body>
</html>
CSS: The style and appearance
CSS (Cascading Style Sheets) is used to make your site visually appealing. It’s the makeup for your HTML. With CSS, you can:
- Add colors
- Modify fonts
- Position elements
- Create animations
Example of CSS code:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
}
h1 {
color: #333;
text-align: center;
}
a {
color: #0066cc;
text-decoration: none;
}
How to get started with HTML and CSS?
1. Install a code editor
To write HTML and CSS, you need a code editor. Here are some free and popular options:
- Visual Studio Code: An excellent choice for beginners and experts alike.
- Sublime Text: Lightweight and fast.
- Notepad++: Simple and efficient for Windows.
2. Create your first files
- Create a file named
index.html
. - Create a file named
style.css
.
In your HTML file, link your CSS file like this:
<link rel="stylesheet" href="style.css">
3. Follow a basic structure
Your HTML file should always include these essential elements:
<!DOCTYPE html>
: Indicates that it is an HTML document.<html>
: The root of your page.<head>
: Contains metadata (titles, links to CSS, etc.).<body>
: Contains everything visible on the page.
4. Use a browser to test
Once your files are created, open your HTML file in a browser (Chrome, Firefox, etc.) to see your work.
Key concepts to master
HTML: Basic tags
<h1>
to<h6>
: Headings<p>
: Paragraph<img>
: Image<a>
: Link<ul>
/<li>
: Bullet list<table>
: Table
CSS: Selectors and Properties
- Selectors: They allow you to target HTML elements.
- Example:
h1 { color: red; }
applies the color red to all<h1>
elements.
- Example:
- Popular CSS Properties:
color
: Text color.background-color
: Background color.font-size
: Font size.margin
/padding
: Outer / inner spacing.border
: Border around an element.
Useful resources for learning
- MDN Web Docs: The ultimate reference for HTML and CSS.
- W3Schools: Great for simple and quick examples.
- FreeCodeCamp: Interactive courses to learn by practicing.
Practical Example: A basic page with style
Here’s a simple example combining HTML and CSS to create an attractive page.
HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>My First Styled Page </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome!</h1>
<p>Learning HTML and CSS is simple and fun. </p>
<a href="https://developer.mozilla.org">Discover more resources </a>
</body>
</html>
CSS :
body {
font-family: 'Roboto', sans-serif;
background-color: #eaeaea;
color: #333;
margin: 20px;
}
h1 {
color: #00509e;
text-align: center;
}
a {
color: #ff5722;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
Tips for Starting Effectively
- Practice regularly: Create small pages to practice.
- Explore simple projects: For example, a portfolio page or a blog.
- Learn step by step: Don’t try to master everything at once.
Conclusion
HTML and CSS are the foundations of web development. By following this guide, you’ll have your first tools to create simple and attractive web pages. Take your time, practice regularly, and have fun with your creations. The web opens up an infinite world of possibilities for you! 🚀
Did you enjoy this guide? Share it and start your web development journey today!