Retour aux articles
Wednesday, December 11, 202453 vues9

HTML and CSS: Where to Start? Complete Beginner's Guide

Mike Codeur

Html
CSS

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:

HTML
<!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:

CSS
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:

2. Create your first files

  1. Create a file named index.html.
  2. Create a file named style.css.

In your HTML file, link your CSS file like this:

HTML
<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.
  • 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

  1. MDN Web Docs: The ultimate reference for HTML and CSS.
  2. W3Schools: Great for simple and quick examples.
  3. 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 :

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 :

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!

Abonnes-toi à la NewsLetter

Apprends les meilleures pratiques pour devenir un développeur web moderne (JavaScript / React / Next).

Gagner sa vie grâce au code
Devenir développeur Freelance
+35 000 développeurs déjà inscrits.

Accès instantané. Aucune carte de crédit requise.

Rejoins +35 000 développeurs déjà inscrits.