diff --git a/docs/3_GettingStarted/README.md b/docs/3_GettingStarted/README.md
index eb07872..a1f7617 100644
--- a/docs/3_GettingStarted/README.md
+++ b/docs/3_GettingStarted/README.md
@@ -8,7 +8,7 @@ In this section, we will start by setting up the face of our OctoFit application
- Start getting the feel for OctoFit app by generating HTML and CSS resources
- See a front-end page with a greeting message
-
+
Let’s start with the basic front end development with the help of GitHub Copilot. Although we can start using the built-in in-file Copilot suggestion, we will initiate this by using GitHub Copilot Chat.
@@ -16,7 +16,7 @@ After you open the GitHub Copilot Chat panel, please type the following prompt.
`I have this great idea called the OctoFit app. Can you show me the outline for how to get started? Please ignore technology stacks for now.`
-
+
The reason why I asked to ignore technology stack is because I want to keep it super simple. If we did not add that, what you will likely see is that some users will get code examples, while some others don’t, etc.
@@ -29,11 +29,50 @@ Now, let’s move onto the next prompt through GitHub Copilot Chat. This time, w
`Now, how can I add HTML and CSS on these?`
-
+
-
+
As you can see, this prompt will generate some examples of HTML and CSS lines that you can use. Again, your result might look different from mine, and that is perfectly okay!
+Now, let’s move onto the next prompt through GitHub Copilot Chat. This time, we want to generate some assets to create our web pages. **HTML**, which stands for **Hyper Text Markup Language**, is the language of the web, though it is not exactly a programming language, and CSS, which stands for Cascading Style Sheet, is the web language for the design. Thus, we will ask to generate these two. Let’s proceed with the following prompts.
+
+`Now, how can I add HTML and CSS on these?`
+
+How can we leverage these files? We can, of course, create new files and copy-and-paste those contents. But instead of doing that, GitHub Copilot Chat has built-in user interface buttons that can make those steps easier.
+
+If you hover over the code, for example this HTML code block, you will see a popup menu shows up giving you different option like this.
+
+
+
+We want to select the `Insert into New File` that will appear when you click `...` icon for more options.
+
+That will create a new file tab with copied code block. Save the file with a name `index.html`.
+
+You probably want to create a new directory or open a directory that is dedicated for this project. For me, I named it `OctoFit`.
+
+
+
+Do the same for your CSS file. You can create a CSS file within the `css` folder like this.
+
+
+
+Now, let’s test out what we have built. Because any web browser can render the website in HTML format, we can simply navigate to the directory where our files are and open the HTML file through a web browser.
+
+If you open up our `index.html` file, it might look something like this. Yours might not look exactly the same because GitHub Copilot is generative, but that is alright.
+
+
+
+We are ready to proceed with our next step. If you want to keep your files as close as possible or have missed some steps, we have provided the sample files where you can download our files.
+
+[:open_file_folder: Exercise 1 - Sample files](../../exercises/exercise1/sample-files/)
+
+Please download the files there if you want to keep your project structure as close as possible.
+
+[:back: Previous: Prerequisites](../2_Prerequisites/) | [Next: Getting started -Prettifying with Bootstrap :soon:](../4_PrettifyingWithBootstrap/)
+
+
+
+
diff --git a/docs/4_PrettifyingWithBootstrap/README.md b/docs/4_PrettifyingWithBootstrap/README.md
new file mode 100644
index 0000000..0df4d5a
--- /dev/null
+++ b/docs/4_PrettifyingWithBootstrap/README.md
@@ -0,0 +1,3 @@
+# Prettifying with Bootstrap
+
+TO DO
\ No newline at end of file
diff --git a/exercises/exercise1/sample-files/index.html b/exercises/exercise1/sample-files/index.html
new file mode 100644
index 0000000..4d02c4b
--- /dev/null
+++ b/exercises/exercise1/sample-files/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ OctoFit App
+
+
+
+
+
Welcome to OctoFit
+
+
+
+
+
Get Fit with OctoFit
+
Your personalized fitness journey starts here.
+
+
+
+
+
\ No newline at end of file
diff --git a/exercises/exercise1/sample-files/styles.css b/exercises/exercise1/sample-files/styles.css
new file mode 100644
index 0000000..d929971
--- /dev/null
+++ b/exercises/exercise1/sample-files/styles.css
@@ -0,0 +1,47 @@
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f4f4f4;
+}
+
+header {
+ background-color: #333;
+ color: #fff;
+ padding: 1rem;
+ text-align: center;
+}
+
+header h1 {
+ margin: 0;
+}
+
+nav ul {
+ list-style: none;
+ padding: 0;
+}
+
+nav ul li {
+ display: inline;
+ margin: 0 1rem;
+}
+
+nav ul li a {
+ color: #fff;
+ text-decoration: none;
+}
+
+main {
+ padding: 2rem;
+ text-align: center;
+}
+
+footer {
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ padding: 1rem;
+ position: fixed;
+ width: 100%;
+ bottom: 0;
+}
\ No newline at end of file
diff --git a/images/0_FinalResult.jpg b/images/3_GettingStarted/0_FinalResult.jpg
similarity index 100%
rename from images/0_FinalResult.jpg
rename to images/3_GettingStarted/0_FinalResult.jpg
diff --git a/images/1_AskCopilot4Outline.jpg b/images/3_GettingStarted/1_AskCopilot4Outline.jpg
similarity index 100%
rename from images/1_AskCopilot4Outline.jpg
rename to images/3_GettingStarted/1_AskCopilot4Outline.jpg
diff --git a/images/2_1_AskGenerateHTMLCSS.jpg b/images/3_GettingStarted/2_1_AskGenerateHTMLCSS.jpg
similarity index 100%
rename from images/2_1_AskGenerateHTMLCSS.jpg
rename to images/3_GettingStarted/2_1_AskGenerateHTMLCSS.jpg
diff --git a/images/2_2_AskGenerateHTMLCSS.jpg b/images/3_GettingStarted/2_2_AskGenerateHTMLCSS.jpg
similarity index 100%
rename from images/2_2_AskGenerateHTMLCSS.jpg
rename to images/3_GettingStarted/2_2_AskGenerateHTMLCSS.jpg
diff --git a/images/3_GettingStarted/3_OptionsCopilotChat.jpg b/images/3_GettingStarted/3_OptionsCopilotChat.jpg
new file mode 100644
index 0000000..182abf9
Binary files /dev/null and b/images/3_GettingStarted/3_OptionsCopilotChat.jpg differ
diff --git a/images/3_GettingStarted/4_SaveFile.jpg b/images/3_GettingStarted/4_SaveFile.jpg
new file mode 100644
index 0000000..527462d
Binary files /dev/null and b/images/3_GettingStarted/4_SaveFile.jpg differ
diff --git a/images/3_GettingStarted/5_HTMLStructure.jpg b/images/3_GettingStarted/5_HTMLStructure.jpg
new file mode 100644
index 0000000..86124d6
Binary files /dev/null and b/images/3_GettingStarted/5_HTMLStructure.jpg differ
diff --git a/images/3_GettingStarted/6_OutputLocal.jpg b/images/3_GettingStarted/6_OutputLocal.jpg
new file mode 100644
index 0000000..75f9eec
Binary files /dev/null and b/images/3_GettingStarted/6_OutputLocal.jpg differ