From ae3b27daf9400e6b65708f2b5f38e04c1664d8fc Mon Sep 17 00:00:00 2001 From: Vidhu Kant Sharma Date: Mon, 30 Jan 2023 20:14:24 +0530 Subject: changed programming resources path, added more pages --- .../web-development/frontend/_index.md | 18 ++++++++++++++++++ .../web-development/frontend/html-css/_index.md | 20 ++++++++++++++++++++ .../web-development/frontend/js-frameworks/_index.md | 8 ++++++++ .../web-development/frontend/js-frameworks/react.md | 10 ++++++++++ .../web-development/frontend/js-frameworks/svelte.md | 11 +++++++++++ .../frontend/static-site-generators/_index.md | 13 +++++++++++++ .../frontend/static-site-generators/hugo.md | 13 +++++++++++++ 7 files changed, 93 insertions(+) create mode 100644 content/docs/programming-resources/web-development/frontend/_index.md create mode 100644 content/docs/programming-resources/web-development/frontend/html-css/_index.md create mode 100644 content/docs/programming-resources/web-development/frontend/js-frameworks/_index.md create mode 100644 content/docs/programming-resources/web-development/frontend/js-frameworks/react.md create mode 100644 content/docs/programming-resources/web-development/frontend/js-frameworks/svelte.md create mode 100644 content/docs/programming-resources/web-development/frontend/static-site-generators/_index.md create mode 100644 content/docs/programming-resources/web-development/frontend/static-site-generators/hugo.md (limited to 'content/docs/programming-resources/web-development/frontend') diff --git a/content/docs/programming-resources/web-development/frontend/_index.md b/content/docs/programming-resources/web-development/frontend/_index.md new file mode 100644 index 0000000..aad43f1 --- /dev/null +++ b/content/docs/programming-resources/web-development/frontend/_index.md @@ -0,0 +1,18 @@ +--- +title: Frontend +description: Frontend Web Development +weight: 1 +--- + + +## General resources (have multiple tutorials) + +- [Web Dev Simplified](https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw): +Best YouTube channel to learn web development. +- [W3Schools](https://www.w3schools.com/): +Best website containing very useful HTML/CSS/JS tutorials. + + +## Resources based on web technology + +I recommend learning all these technologies in the same order as they are listed. diff --git a/content/docs/programming-resources/web-development/frontend/html-css/_index.md b/content/docs/programming-resources/web-development/frontend/html-css/_index.md new file mode 100644 index 0000000..dc67f53 --- /dev/null +++ b/content/docs/programming-resources/web-development/frontend/html-css/_index.md @@ -0,0 +1,20 @@ +--- +title: HTML/CSS +description: The very basics of web frontend +weight: 1 +--- + +HTML (HyperText Markup Language) and CSS (Cascading StyleSheets) are two of the core technologies +you must learn to make websites. These two are **very** easy to learn but without these web development is totally useless. + +- HTML in one video: [Video by Mike Dane](https://www.youtube.com/watch?v=pQN-pnXPaVg) +- Textual Tutorial: [W3Schools](https://www.w3schools.com/html/default.asp) +- CSS in one video: [Video by Web Dev Simplified](https://www.youtube.com/watch?v=1PnVor36_40) +- CSS Documentation: [W3Schools](https://www.w3schools.com/css/default.asp) +- Simple HTTP fileserver to host HTML files: [GoFileServer](https://github.com/MikunoNaka/GoFileServer/releases/latest) + +## Fun trick + +You can use GoFileServer [GoFileServer](https://github.com/MikunoNaka/GoFileServer/releases/latest) +to host the HTML files over the network, and then you can enter the URL of the server on another pc/phone on +the same WiFi network to open the website on that device. diff --git a/content/docs/programming-resources/web-development/frontend/js-frameworks/_index.md b/content/docs/programming-resources/web-development/frontend/js-frameworks/_index.md new file mode 100644 index 0000000..d7c9637 --- /dev/null +++ b/content/docs/programming-resources/web-development/frontend/js-frameworks/_index.md @@ -0,0 +1,8 @@ +--- +title: JavaScript Frameworks +description: Componentize your web applications +weight: 3 +--- + +JS frameworks make it easy to write websites which make heavy use of JavaScript for logic. +You can divide different parts of the website into "components" that can be imported and used/re-used multiple times in the website without the need to write extra code. diff --git a/content/docs/programming-resources/web-development/frontend/js-frameworks/react.md b/content/docs/programming-resources/web-development/frontend/js-frameworks/react.md new file mode 100644 index 0000000..c20844f --- /dev/null +++ b/content/docs/programming-resources/web-development/frontend/js-frameworks/react.md @@ -0,0 +1,10 @@ +--- +title: React +description: The most popular JavaScript UI library +weight: 1 +--- + +React is my favourite JS Framework (by definition it's a library but I'm grouping it with framework). +It's very easy to learn and is very popular so has great documentation. + +- React in one video: [Video by Mike Dane](https://www.youtube.com/watch?v=ABQLwlE8MUA) diff --git a/content/docs/programming-resources/web-development/frontend/js-frameworks/svelte.md b/content/docs/programming-resources/web-development/frontend/js-frameworks/svelte.md new file mode 100644 index 0000000..3dd4e61 --- /dev/null +++ b/content/docs/programming-resources/web-development/frontend/js-frameworks/svelte.md @@ -0,0 +1,11 @@ +--- +title: Svelte +description: The fastest JS framework +weight: 2 +--- + +Svelte is unique because it's very lightweight and fast. +It's easier than react to code in but honestly not very fun. But something being fun is +subjective so I recommend trying it out! + +- Svelte crash course: [Video by Traversy Media](https://www.youtube.com/watch?v=3TVy6GdtNuQ) diff --git a/content/docs/programming-resources/web-development/frontend/static-site-generators/_index.md b/content/docs/programming-resources/web-development/frontend/static-site-generators/_index.md new file mode 100644 index 0000000..6a59df6 --- /dev/null +++ b/content/docs/programming-resources/web-development/frontend/static-site-generators/_index.md @@ -0,0 +1,13 @@ +--- +title: Static Site Generators +description: My favourite way of building a website +weight: 2 +--- + +Static site generators let you write a template for the website in HTML and let you write the content of the website in another format (markdown, for example) +and turn it into a HTML page with the given template. +I love static site generators because they are easy to use and are very fast since all the HTML files are pre-compiled before you can host them on your server. +It's better than writing the whole website in HTML because if you want to change the layout of the website, editing all the pages one-by-one would take a long time. +Whereas in a static site generator, you can just edit the template file and it'll do the job automatically. + +For small websites/websites without much/any logic, I recommend using a static site generator. This website is written in Hugo, which is awesome. diff --git a/content/docs/programming-resources/web-development/frontend/static-site-generators/hugo.md b/content/docs/programming-resources/web-development/frontend/static-site-generators/hugo.md new file mode 100644 index 0000000..9664b30 --- /dev/null +++ b/content/docs/programming-resources/web-development/frontend/static-site-generators/hugo.md @@ -0,0 +1,13 @@ +--- +title: Hugo +description: The Hugo static site generator +weight: 1 +--- + +The website you're reading is built with Hugo. It's very customizable and fast. Unfortunately, learning Hugo can be tricky at first, but you'll come to +love hugo after you understand it! + +- Hugo Tutorial: [Video by Luke Smith](https://www.youtube.com/watch?v=ZFL09qhKi5I) +- Hugo Shortcodes: [Video by Luke Smith](https://www.youtube.com/watch?v=QTolhoxMyXg) + +You need a theme to create a Hugo website. If you don't want to create one yourself you can check out mine! -- cgit v1.2.3