Yehia Tech يحيى تك Watch on YouTube

كورس شرح اساسيات بناء صفحات الويب - ابدأ من الصفر - HTML & CSS in 90 Mins From Scratch (Arabic)

3 min read 3 months ago
Published on Aug 27, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial is designed to help you understand the basics of web development using HTML and CSS. It is based on a comprehensive 90-minute course that takes you from zero knowledge to building your first web page. Whether you're looking to start a career in web development or just want to create your own website, this guide will provide you with a solid foundation.

Step 1: Environment Setup

Before you start coding, you need to set up your development environment. Follow these instructions:

  1. Install Visual Studio Code:

  2. Set Up Your Folder Structure:

    • Create a new folder for your project on your computer.
    • Inside this folder, create two subfolders: css for your styles and images for any images you may want to use.

  3. Open Your Project in VS Code:

    • Launch Visual Studio Code.
    • Open your project folder by going to File > Open Folder.

Step 2: HTML Basics

Now that your environment is set up, it's time to learn some HTML basics.

  1. Create Your First HTML File:

    • In your project folder, create a new file named index.html.
    • Add the basic structure to your HTML file:
    <!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>مرحبا بالعالم</h1>
    <p>هذا هو نص صفحة الويب الأولى الخاصة بي.</p>
</body>
</html>

  2. Add Content:

    • Insert headings, paragraphs, and other content as needed using HTML tags like <h2>, <p>, <a>, etc.

  3. Save Your File:

    • Make sure to save your index.html file after each change.

Step 3: Start Project

Now it's time to start building your web page.

  1. Link Your CSS File:

    • Create a new file in the css folder named styles.css.
    • Link this CSS file in your HTML file within the <head> section:
    <link rel="stylesheet" href="css/styles.css">

  2. Style Your Page:

    • Open styles.css and add some styles. For example:
    body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
}

p {
    color: #555;
}

  3. Preview Your Page:

    • Open index.html in your web browser to see your work.

Step 4: Downloading the Code

You can access example code from the following GitHub repositories:

Step 5: Next Steps

Once you've completed your first web page, consider the following next steps:

  • Explore more HTML tags and CSS properties.
  • Check out additional resources like W3Schools for comprehensive tutorials.
  • Experiment with JavaScript to add interactivity to your web pages. You can find a JavaScript playlist here.

Conclusion

You have now laid the groundwork for creating web pages using HTML and CSS. By setting up your environment, learning the basics, and starting your first project, you are well on your way to becoming a web developer. Keep practicing and exploring more advanced concepts to enhance your skills. Good luck!

Table of Contents

Recent