Initial commit

4GeeksAcademy · Jan 28, 2025 · 4b42a14 · 4b42a14
commit 4b42a14
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 0 deletions.
diff --git a/.vscode/rigo-baby.jpeg b/.vscode/rigo-baby.jpeg
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "workbench.editorAssociations": {   
+        "*.md": "vscode.markdown.preview.editor"
+    }
+}
diff --git a/README.cn.md b/README.cn.md
@@ -0,0 +1,26 @@
+# HTML Hello
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io#https://github.com/4GeeksAcademy/html-hello.git)
+
+为使用 [gitpod.io](gitpod.io) 代码编辑器 4Geeks Academy 学生提供的最基础的样板。
+
+[![How to open html/css preview of my project in gitpod](https://github.com/4GeeksAcademy/Templates-Boilerplates/blob/master/assets/hello-html-intro.png?raw=true)](https://youtu.be/dfbDCMu_p-0)
+
+## 接下来怎么做？
+
+创建一个具有 [基本 HTML 页面结构](http://content.breatheco.de/lesson/what-is-html-learn-html#page-structure) 的 `index.html` 文件并通过使用以下命令，实时预览 Web 服务器提供的 HTML 页面：
+
+```sh
+$ pip3 install flask && python3 server.py
+```
+
+- 您可以根据需要创建任意数量的 HTML 文件
+- 您还可以使用放置在 `<head></head>` 标签之间的 `<link>` 标签创建 CSS 文件并将它们导入您的网站，如下所示：
+
+```html
+<head>
+  ...
+  <link rel="stylesheet" type="text/css" href="styles.css">
+  ...
+</head>
+```
diff --git a/README.es.md b/README.es.md
@@ -0,0 +1,33 @@
+# HTML Hello
+
+El boilerplate más básico para cualquier estudiante de 4Geeks Academy, empieza tu primer sitio web desde cero.
+
+> Tienes un video tutorial sobre [cómo usar esta plantilla para crear tu primer sitio web aquí](https://youtu.be/dfbDCMu_p-0).
+
+## ¿Qué hacer a continuación?
+
+Crea un archivo `index.html` con [la estructura básica de HTML](https://4geeks.com/es/lesson/what-is-html-learn-html-es#estructura-de-pgina) y ve el resultado en vivo corriendo un servidor web utilizando el siguiente comando:
+
+```bash
+$ pip3 install flask && python3 server.py
+```
+
+- Puedes crear tantos archivos HTML cómo desees.
+- También puedes crear archivos CSS e importarlos en tu página web utilizando una etiqueta `<link>` ubicándola entre las etiquetas `<head></head>`, de la siguiente manera:
+
+```html
+<head>
+  ...
+  <link rel="stylesheet" type="text/css" href="styles.css">
+  ...
+</head>
+```
+
+
+## Agradecimientos
+
+Esta y otras plantillas son utilizadas para [aprender a programar](https://4geeksacademy.com/es/aprender-a-programar/aprender-a-programar-desde-cero) por parte de los alumnos de 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp). 
+
+Realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. 
+
+Conoce más sobre nuestros [Cursos de Programación](https://4geeksacademy.com/es/curso-de-programacion-desde-cero/?lang=es) para convertirte en [Full Stack Developer](https://4geeksacademy.com/es/desarrollador-full-stack/desarrollador-full-stack), o nuestro [Data Science Bootcamp](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning).
diff --git a/README.md b/README.md
@@ -0,0 +1,30 @@
+# HTML Hello
+
+The most basic boilerplate for any 4Geeks Academy student, start your very first website from scratch.
+
+> There is a video tutorial on [how to use this template to create your very first website here](https://youtu.be/dfbDCMu_p-0).
+
+## What to do next?
+
+Create an `index.html` file with the [basic HTML structure](http://4geeks.com/lesson/what-is-html-learn-html#page-structure) and see it live by running a web-server using the following command:
+
+```bash
+$ pip3 install flask && python3 server.py
+```
+
+- You can create as many HTML files as you want.
+- You can also create CSS files and import them into your website using a `<link>` tag placed between the `<head></head>` tags, like this:
+
+```html
+<head>
+  ...
+  <link rel="stylesheet" type="text/css" href="styles.css">
+  ...
+</head>
+```
+
+### Contributors
+
+This template was built as part of the [Full Stack Developer course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer) at [4Geeks Academy Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sanchez](https://twitter.com/alesanchezr) and [many other contributors](https://github.com/4GeeksAcademy/html-hello/graphs/contributors).
+
+You can find other templates and resources like this at the [school's GitHub page](https://github.com/4geeksacademy/).
diff --git a/learn.json b/learn.json
@@ -0,0 +1,15 @@
+{
+  "title": {
+    "en": "HTML/CSS Starter Template for beginners",
+    "es": "Plantilla Inicial de HTML/CSS para principiantes"
+  },
+  "description": {
+    "en": "This is a starter template for HTML/CSS projects. It includes a basic folder structure, a sample HTML file, and a CSS file to kickstart your project.",
+    "es": "Esta es una plantilla inicial para proyectos de HTML/CSS. Incluye una estructura básica de carpetas, un archivo HTML de ejemplo y un archivo CSS para iniciar tu proyecto."
+  },
+  "repository": "https://github.com/yourusername/html-css-starter-template",
+  "preview": "https://repository-images.githubusercontent.com/183094552/ef3d4980-78e0-11ea-8f81-31089e626628",
+  "projectType": "template",
+  "difficulty": "beginner",
+  "technologies": ["HTML", "CSS"]
+}
diff --git a/server.py b/server.py
@@ -0,0 +1,37 @@
+try:
+    # try to import flask, or return error if has not been installed
+    from flask import Flask
+    from flask import send_from_directory
+except ImportError:
+    print("You don't have Flask installed, run `$ pip3 install flask` and try again")
+    exit(1)
+
+import os, subprocess
+
+static_file_dir = os.path.join(os.path.dirname(os.path.realpath(__file__)), './')
+app = Flask(__name__)
+app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0 #disable cache
+
+# Serving the index file
+@app.route('/', methods=['GET'])
+def serve_dir_directory_index():
+    if os.path.exists("app.py"):
+        # if app.py exists we use the render function
+        out = subprocess.Popen(['python3','app.py'], stdout=subprocess.PIPE, stderr=subprocess.STDOUT)
+        stdout,stderr = out.communicate()
+        return stdout if out.returncode == 0 else f"<pre style='color: red;'>{stdout.decode('utf-8')}</pre>"
+    if os.path.exists("index.html"):
+        return send_from_directory(static_file_dir, 'index.html')
+    else:
+        return "<h1 align='center'>404</h1><h2 align='center'>Missing index.html file</h2><p align='center'><img src='https://github.com/4GeeksAcademy/html-hello/blob/main/.vscode/rigo-baby.jpeg?raw=true' /></p>"
+
+# Serving any other image
+@app.route('/<path:path>', methods=['GET'])
+def serve_any_other_file(path):
+    if not os.path.isfile(os.path.join(static_file_dir, path)):
+        path = os.path.join(path, 'index.html')
+    response = send_from_directory(static_file_dir, path)
+    response.cache_control.max_age = 0 # avoid cache memory
+    return response
+
+app.run(host='0.0.0.0',port=3000, debug=True, extra_files=['./',])