diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..3219a770
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "Atas"
+    ]
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 75e9841e..b054ce81 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,8 +1,18 @@
-/**
- * Add your custom styles below
- * 
- * Remember: 
- * - Be organised, use comments and separate your styles into meaningful chunks
- *    for example: General styles, Navigation styles, Hero styles, Footer etc.
- * 
- */
+img{
+    width: 800px;
+    height: 200px;
+}
+
+body{
+    text-align: center;
+}
+
+footer{
+ margin-top: 80px;
+
+}
+
+section-1-header{
+    display: flex;
+    justify-content: space-around;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 67dfc7f5..f4141a61 100644
--- a/index.html
+++ b/index.html
@@ -1,22 +1,50 @@
-<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <title>My Blog</title>
-    <link
-      href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <link rel="stylesheet" href="css/style.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
-  </head>
-  <body>
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="css/style.css">
+  <title>software development and the different languages it uses </title>
+</head>
+
+<body>
+  <header>
+    <section class="section-1">
+      <h1>software development and coding</h1>
+      <p class="section-1-header">Everything you need to know about the basic understanding of software development and coding. I have compiled
+        the
+        best videos and links for you to understand software development and coding. </p>
+    </section>
+  </header>
+  <section class="section-2">
+    <h2>What is coding</h2>
+    <img src="https://www.citylit.ac.uk/media/amasty/blog/programmers-at-work-2200.jpg" alt="software development img">
+    <br>
+    <p1>Coding, sometimes called computer programming, is how we communicate with computers.
+      Code tells a computer what actions to take, and writing code is like creating a set of instructions.
+      By learning to write code, you can tell computers what to do or how to behave in a much faster way.</p>
+  </section>
+  <section class="section-3">
+    <h2>basic understanid of diffrent languages used in coding</h2>
+
+    <img src="https://rb.gy/9m95bi" alt="html">
+    <h1>https://en.wikipedia.org/wiki/HTML</h1>
+    <p> The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in
+      a
+      web browser.
+      It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript. </p>
+
+    <p>Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a
+      markup language such as HTML or XML.
+      CSS is a cornerstone technology of the World Wide Web,</p>
+
+    <p>JavaScript, often abbreviated as JS, is a programming language that is one of the core technologies of the World
+      Wide Web, alongside HTML and CSS. As of 2022,
+      98% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries.
+      </4>
+  </section>
+
+  <footer>what is coding 2023- brief to what coding is and how its uesful.</footer>
+
+</body>
+
+</html>
\ No newline at end of file
