├── .vscode
├── rigo-baby.jpeg
└── settings.json
├── README.cn.md
├── README.es.md
├── README.md
├── learn.json
└── server.py
/.vscode/rigo-baby.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/4GeeksAcademy/index.html/a3e550fcdb6bc40ccbfe7e811d4bafbc7d37050b/.vscode/rigo-baby.jpeg
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "editor.formatOnSave": true,
3 | "editor.defaultFormatter": "esbenp.prettier-vscode",
4 | "workbench.editorAssociations": {
5 | "*.md": "vscode.markdown.preview.editor"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/README.cn.md:
--------------------------------------------------------------------------------
1 | # HTML Hello
2 |
3 | [](https://gitpod.io#https://github.com/4GeeksAcademy/html-hello.git)
4 |
5 | 为使用 [gitpod.io](gitpod.io) 代码编辑器 4Geeks Academy 学生提供的最基础的样板。
6 |
7 | [](https://youtu.be/dfbDCMu_p-0)
8 |
9 | ## 接下来怎么做？
10 |
11 | 创建一个具有 [基本 HTML 页面结构](http://content.breatheco.de/lesson/what-is-html-learn-html#page-structure) 的 `index.html` 文件并通过使用以下命令，实时预览 Web 服务器提供的 HTML 页面：
12 |
13 | ```sh
14 | $ pip3 install flask && python3 server.py
15 | ```
16 |
17 | - 您可以根据需要创建任意数量的 HTML 文件
18 | - 您还可以使用放置在 `` 标签之间的 `` 标签创建 CSS 文件并将它们导入您的网站，如下所示：
19 |
20 | ```html
21 |
22 | ...
23 |
24 | ...
25 |
26 | ```
27 |
--------------------------------------------------------------------------------
/README.es.md:
--------------------------------------------------------------------------------
1 | # HTML Hello
2 |
3 | El boilerplate más básico para cualquier estudiante de 4Geeks Academy, empieza tu primer sitio web desde cero.
4 |
5 | > Tienes un video tutorial sobre [cómo usar esta plantilla para crear tu primer sitio web aquí](https://youtu.be/dfbDCMu_p-0).
6 |
7 | ## ¿Qué hacer a continuación?
8 |
9 | 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:
10 |
11 | ```bash
12 | $ pip3 install flask && python3 server.py
13 | ```
14 |
15 | - Puedes crear tantos archivos HTML cómo desees.
16 | - También puedes crear archivos CSS e importarlos en tu página web utilizando una etiqueta `` ubicándola entre las etiquetas ``, de la siguiente manera:
17 |
18 | ```html
19 |
20 | ...
21 |
22 | ...
23 |
24 | ```
25 |
26 |
27 | ## Agradecimientos
28 |
29 | 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).
30 |
31 | Realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes.
32 |
33 | 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).
34 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # HTML Hello
2 |
3 | The most basic boilerplate for any 4Geeks Academy student, start your very first website from scratch.
4 |
5 | > There is a video tutorial on [how to use this template to create your very first website here](https://youtu.be/dfbDCMu_p-0).
6 |
7 | ## What to do next?
8 |
9 | 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:
10 |
11 | ```bash
12 | $ pip3 install flask && python3 server.py
13 | ```
14 |
15 | - You can create as many HTML files as you want.
16 | - You can also create CSS files and import them into your website using a `` tag placed between the `` tags, like this:
17 |
18 | ```html
19 |
20 | ...
21 |
22 | ...
23 |
24 | ```
25 |
26 | ### Contributors
27 |
28 | 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).
29 |
30 | You can find other templates and resources like this at the [school's GitHub page](https://github.com/4geeksacademy/).
31 |
--------------------------------------------------------------------------------
/learn.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": {
3 | "en": "HTML/CSS Starter Template for beginners",
4 | "es": "Plantilla Inicial de HTML/CSS para principiantes"
5 | },
6 | "description": {
7 | "us": "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.",
8 | "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."
9 | },
10 | "repository": "https://github.com/yourusername/html-css-starter-template",
11 | "preview": "https://repository-images.githubusercontent.com/183094552/ef3d4980-78e0-11ea-8f81-31089e626628",
12 | "projectType": "template",
13 | "difficulty": "beginner",
14 | "technologies": ["HTML", "CSS", "javascript"]
15 | }
16 |
--------------------------------------------------------------------------------
/server.py:
--------------------------------------------------------------------------------
1 | try:
2 | # try to import flask, or return error if has not been installed
3 | from flask import Flask
4 | from flask import send_from_directory
5 | except ImportError:
6 | print("You don't have Flask installed, run `$ pip3 install flask` and try again")
7 | exit(1)
8 |
9 | import os, subprocess
10 |
11 | static_file_dir = os.path.join(os.path.dirname(os.path.realpath(__file__)), './')
12 | app = Flask(__name__)
13 | app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0 #disable cache
14 |
15 | # Serving the index file
16 | @app.route('/', methods=['GET'])
17 | def serve_dir_directory_index():
18 | if os.path.exists("app.py"):
19 | # if app.py exists we use the render function
20 | out = subprocess.Popen(['python3','app.py'], stdout=subprocess.PIPE, stderr=subprocess.STDOUT)
21 | stdout,stderr = out.communicate()
22 | return stdout if out.returncode == 0 else f"
