https://github.com/marcosdlcs/static-catalog-101
static-catalog-101
https://github.com/marcosdlcs/static-catalog-101
beginner-friendly css html javascript web
Last synced: about 1 month ago
JSON representation
static-catalog-101
- Host: GitHub
- URL: https://github.com/marcosdlcs/static-catalog-101
- Owner: marcosDLCS
- Created: 2023-07-10T16:28:57.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-22T18:41:15.000Z (almost 3 years ago)
- Last Synced: 2024-04-29T22:37:19.815Z (about 2 years ago)
- Topics: beginner-friendly, css, html, javascript, web
- Language: JavaScript
- Homepage:
- Size: 2.68 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.adoc
Awesome Lists containing this project
README
= static-catalog-101
:toc: auto
== TeachTech
This simple project has been created as an example during **TeachTech 2023** to illustrate concepts in mentoring assignments.
https://www.teacht3ch.com/[TeachTech] is a non-profit initiative, composed solely of volunteer IT professionals, whose goal is to teach the basics of programming to people with no previous knowledge, free of charge.
== Introduction
The goal of this repository is to show how to start and evolve a simple static catalog site using the most common web technologies such as HTML, CSS and Javascript.
The purpose is not no create a complex excercise but to explain the basic usage of the mentioned technologies and provide guidance to people with low experience with their first steps.
== The best way to run the examples
Download Git and Visual Studio Code.
* https://git-scm.com/
* https://code.visualstudio.com/#alt-downloads
Install Live Server extension in Visual Studio Code.
* https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Clone the project in your computer.
[source, console]
----
git clone https://github.com/marcosDLCS/static-catalog-101.git
----
With **VSCode**, go to the desired folder and open the file **static-catalog.html**. Find the "Go Live" button in the right bottom part of the editor interface and press it.
== The journey, step by step
On our way to programming a static catalog, we will start with a version with a **very basic structure** and, step by step, we will add styles and functionality to **make the page look better and better** using just plain HTML, CSS and JS.