From 80b48a469b1adeff77973e83e9213886e76680e2 Mon Sep 17 00:00:00 2001
From: bryantson <5396174+bryantson@users.noreply.github.com>
Date: Mon, 7 Oct 2024 15:27:54 -0500
Subject: [PATCH 1/3] Adding some more contents for front end step
---
docs/3_GettingStarted/README.md | 45 +++++++++++++++--
docs/4_PrettifyingWithBootstrap/README.md | 3 ++
exercises/exercise1/sample-files/index.html | 29 +++++++++++
exercises/exercise1/sample-files/styles.css | 47 ++++++++++++++++++
.../{ => 3_GettingStarted}/0_FinalResult.jpg | Bin
.../1_AskCopilot4Outline.jpg | Bin
.../2_1_AskGenerateHTMLCSS.jpg | Bin
.../2_2_AskGenerateHTMLCSS.jpg | Bin
.../3_GettingStarted/3_OptionsCopilotChat.jpg | Bin 0 -> 222520 bytes
images/3_GettingStarted/4_SaveFile.jpg | Bin 0 -> 133872 bytes
images/3_GettingStarted/5_HTMLStructure.jpg | Bin 0 -> 35302 bytes
images/3_GettingStarted/6_OutputLocal.jpg | Bin 0 -> 234249 bytes
12 files changed, 120 insertions(+), 4 deletions(-)
create mode 100644 docs/4_PrettifyingWithBootstrap/README.md
create mode 100644 exercises/exercise1/sample-files/index.html
create mode 100644 exercises/exercise1/sample-files/styles.css
rename images/{ => 3_GettingStarted}/0_FinalResult.jpg (100%)
rename images/{ => 3_GettingStarted}/1_AskCopilot4Outline.jpg (100%)
rename images/{ => 3_GettingStarted}/2_1_AskGenerateHTMLCSS.jpg (100%)
rename images/{ => 3_GettingStarted}/2_2_AskGenerateHTMLCSS.jpg (100%)
create mode 100644 images/3_GettingStarted/3_OptionsCopilotChat.jpg
create mode 100644 images/3_GettingStarted/4_SaveFile.jpg
create mode 100644 images/3_GettingStarted/5_HTMLStructure.jpg
create mode 100644 images/3_GettingStarted/6_OutputLocal.jpg
diff --git a/docs/3_GettingStarted/README.md b/docs/3_GettingStarted/README.md
index eb07872..2327b9c 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,48 @@ 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.
+
+[Exercise 1 - Sample files](../../exercises/exercise1/sample-files/)
+
+[: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
+
+
+
+
+