generated from nighthawkcoders/teacher_portfolio
-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
121 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| --- | ||
| toc: true | ||
| comments: true | ||
| layout: post | ||
| title: Tools and Equipment Overview | ||
| description: Tools and equipment have changed lives, look at the mobile phone. Tools, and equipment, with the addition of coding, can make you immensely more successful in any field. | ||
| --- | ||
|
|
||
| ## Make Development Easy | ||
| Learning Development tools, and working with Projects, is the key to a <mark>rapid entry into Code/Code/Coding</mark>. A Computer, Git, and a Code Editor are the starting points for coding. Add Jupyter Notebooks (computational documents) and you bridge a Computer with Data Science. The beauty of a Jupyter Notebook is that it creates a computational narrative, a document that allows code and data with visual analysis, hypothesis, and conjecture. | ||
|
|
||
| - `A laptop`, <mark>bring a laptop to class every day with the Development Tools installed</mark> on it. Preferred laptops are MacOS or Windows. Computers using either MacOS, Windows, or Linux are requirements for the course. Computers issued by the School, ie Chromebook, are not as effective because of the restrictions placed on adding software by PUSD. <mark>If you only have access to a school-issued Chromebook, we will provide an option to access a Linux machine on AWS.</mark> | ||
| - Sharing Code. `GitHub` is the de facto hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere in the world. Git enables tracking changes, collaborating with others, and reverting to previous versions if needed. Think of it as the Google Docs for Coders. We will clone/push/pull changes to and from GitHub, this is the server where we store and share code in the cloud. Set up GitHub with a personal ID, not a school ID. [GitHub Account](https://docs.github.com/en/get-started/onboarding/getting-started-with-your-github-account). It is best if you can incorporate your first name or initials into your account, for recognition by those who know you. | ||
| - `Visual Studio Code` (abbreviations VS Code, VSCode or VSC) is a powerful Code Editor. VSCode performs a lot of magic and automation behind the scenes to make your Code/Code/Coding life easier, ie it tells you about errors in syntax while coding. VS Code supports many programming languages and has a marketplace of plugins and extensions that enhance the coding experience. | ||
| - [VSCode Setup](https://code.visualstudio.com/learn/get-started/basics.) | ||
| - `GitHub Pages` will be used to host a personal website, notes, and experiences. GitHub Pages allows students to showcase their projects and create personal websites. Students can publish their coding projects, technical notes, and experiences on GitHub Pages for others to see. | ||
| - <mark>Review GitHub concepts 2-min</mark> [https://www.youtube.com/watch?v=phGdqJB6ep0](https://www.youtube.com/watch?v=phGdqJB6ep0) | ||
| - `Jupyter Notebooks` will be used to build running JavaScript, Python, or Java Code into Technical documentation. Jupyter Notebooks is a valuable tool in data science and coding. It provides an interactive environment for running code, analyzing data, documenting code, and writing explanations. Review Jupyter Basics 6-min [https://www.youtube.com/watch?v=3jZYC9rGrNg](https://www.youtube.com/watch?v=3jZYC9rGrNg)(https://www.youtube.com/watch?v=3jZYC9rGrNg) | ||
| - `Slack Account and App`, install App on Laptop, get used to reading announcements. Slack is a messaging tool similar to Discord. There will be important announcements and daily messages will be shared through Slack. | ||
| - [Slack for Windows](https://slack.com/downloads/windows) | ||
| - [Slack for MacOS](https://slack.com/intl/en-in/downloads/mac) | ||
| - [Slack for Linux](https://slack.com/intl/en-gb/downloads/linux) | ||
| - [Windows Desktops install WSL](https://learn.microsoft.com/en-us/windows/wsl/install). WSL enables students to work with Linux tools and environments on Windows machines. WSL supports a Linux-like terminal experience within the Windows operating system. WSL users will install WSL 2 and Ubuntu distributions. Everyone in this class will be working on a form of Linux when in Terminal. | ||
| - [Install WSL](https://learn.microsoft.com/en-us/windows/wsl/install) | ||
| - `Docker` is an open platform for developing, shipping, and running applications. Docker allows students to create isolated environments for testing and deploying their applications, ensuring consistency across different systems. Docker Desktop allows users to test deployment scripts on their local machines, enabling them to debug and troubleshoot their applications before deploying them on AWS. | ||
| - [Docker Desktop for macOS](https://docs.docker.com/desktop/install/mac-install/) | ||
| - [Docker Desktop for WSL2 Backend on Windows](https://docs.docker.com/desktop/wsl/#:~:text=With%20Docker%20Desktop%20running%20on,to%20improve%20the%20resource%20consumption.) | ||
| - Tools and Terminal Installs | ||
| - ~~<mark>Deprecated/Do not Install</mark>`Anaconda` (Conda) is the environment manager. Conda is an open-source package and environment management system that runs on Windows, MacOS, and Linux desktops. Conda is an environment manager that is very popular for data science projects. It helps you manage your tools in a controlled manner, this is called a virtual environment. <mark>Likely we will move away from Anaconda.</mark> The purpose of Conda is to avoid dependencies, but many people had problems with managing Python and Pid in VSCode related to the Conda shell.~~ | ||
| - [~~Download Anaconda~~](https://www.anaconda.com/download) | ||
| - Install a package manager. A package manager helps you install tools and manage updates. Homebrew is a package manager specifically for MacOS, while Ubuntu and AWS EC2 machines require the apt package manager for installing additional tools. | ||
| - Homebrew (`brew install`) for MacOS will be used to install tools. Homebrew is a package manager for MacOS. Apple's MacOS does not have a development package manager by default. [Install Homebrew](https://brew.sh/) | ||
| - On Windows, Windows Subsystem for Linux (WSL Ubuntu), uses (`sudo apt install`) installs for packages. Things like Java, Python, and more will require installation with apt, as they are not included in Ubuntu by default. | ||
| - On AWS Linux EC2 machines we will use (`sudo apt install`), similar to WSL, but is temporary to session. An AWS/Kasm Account for cloud computing will be required., account access will be provided by the Teacher. AWS Cloud Computing and Electric Cloud Computing (EC2's) will be used to run the Development Environment from the Internet. | ||
|
|
||
| ## Hacks | ||
| > Review all the items mentioned above and get started with setup. Try to understand the concepts behind these tools and seek clarification when needed. Each student needs to take the setup process seriously and should highlight that consistent access to the necessary tools is essential for active participation in the class. | ||
| - Bring your computer daily. <mark>If you don't have computer and tools access, you are effectually absent!!!</mark> | ||
| - Review material on tools, and draw a picture. Installing tools can be a bit of a process. Read, review, and get started. After you do it a little, it starts to become easy. | ||
| - Blog why you love your tools. Do not fear your tools, <mark>love your tools</mark>. Then you become familiar and proficient in using your tools, they become extensions of your abilities and empower you to accomplish Code/Code/Coding tasks more efficiently. | ||
| - <mark>Add yourself to the Users Database. </mark> We need you registered so we know how to support you best. This registration will be used for automation now and throughout the year. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| --- | ||
| toc: true | ||
| layout: post | ||
| title: Build a Student Page | ||
| description: JavaScript, HTML, CSS and Markdown are coding languages used by bloggers when developing in the GitHub Pages system. By using these languages, student developers can add functionality to their GitHub pages site. | ||
| --- | ||
|
|
||
| ## HTML Fragments and Markdown | ||
| <mark>Building an entire frontend web application requires HTML, CSS, and JavaScript</mark>. HTML is responsible for the content, CSS adds styling to the web page, and JavaScript adds functionality and interactivity. <mark>Markdown is a shorthand way of writing HTML</mark>, the GitHub pages system transforms Markdown to HTML. | ||
|
|
||
| In GitHub Pages, Jekyll serves as the build framework. It takes our choice of theme specified in the `_config.yml` file, along with our Markdown, HTML, and notebook files, to construct a completely static website. A significant portion of the frontend design work has already been done for users through the selection and use of a theme; this greatly reduces the need to code in CSS. | ||
|
|
||
| Jekyll converts Markdown (.md) files into HTML. Behind the scenes of GitHub Pages, Jekyll and Liquid programming language build and programmatically construct each Markdown file into a specific web page. Markdown provides a straightforward way to start with GitHub Pages development. <mark>In a Markdown file, you can exclusively use Markdown syntax or incorporate HTML, CSS, and JavaScript</mark> based on your expertise and experience. | ||
|
|
||
| ### Review these Fragments | ||
| > The remainder of this document will describe and show code fragments to get the student developer ready for coding and commiting changes to GitHub. | ||
| #### GitHub Pages index.md | ||
| In GitHub Pages you can define code in Markdown. The <mark>index.md uses markdown</mark> to define a page about CompSci courses at Del Norte High School. | ||
|
|
||
| - Markdown fragment. The markdown fragment is written by the developer and is an example of how to start a home page using Markdown. | ||
|
|
||
| ```markdown | ||
| ## Build your Home Page here | ||
| # Investing in your Technical Future | ||
| > Explore the Computer Science Pathway at Del Norte High School and invest in your technical skills. All Del Norte CompSci classes are designed to provide a real-world development experience. Class time includes tech talks (lectures), peer collaboration, communication with teachers, critical thinking while coding, and creativity in projects. Grading is focused on time invested, participation with peers, and engagement in learning. | ||
| - Introduction to concepts and requirements by the teacher | ||
| - Project-based learning with teacher support | ||
| - Peer communication and collaboration | ||
| - Coding, developer operations, and critical thinking | ||
| - Creativity, research, and utilizing ChatGPT | ||
| - Class work with approximately 2-3 hours of homework per week | ||
|
|
||
|  | ||
| ``` | ||
| - HTML conversion. The HTML <mark>conversion of the Markdown fragment produced by GitHub Pages using Jekyll</mark>. This is programmatically converted from Markdown to HTML. | ||
|
|
||
| ```html | ||
| <div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code> | ||
| ## Build your Home Page here | ||
| # Investing in your Technical Future | ||
| <span class="gt"> > Explore the Computer Science Pathway at Del Norte High School and invest in your technical skills. All Del Norte CompSci classes are designed to provide a real-world development experience. Class time includes tech talks (lectures), peer collaboration, communication with teachers, critical thinking while coding, and creativity in projects. Grading is focused on time invested, participation with peers, and engagement in learning.</span> | ||
| <span class="p"> -</span> Introduction to concepts and requirements by the teacher | ||
| <span class="p"> -</span> Project-based learning with teacher support | ||
| <span class="p"> -</span> Peer communication and collaboration | ||
| <span class="p"> -</span> Coding, developer operations, and critical thinking | ||
| <span class="p"> -</span> Creativity, research, and utilizing ChatGPT | ||
| <span class="p"> -</span> Class work with approximately 2-3 hours of homework per week | ||
|
|
||
| !<span class="p">[</span><span class="nv">csse</span><span class="p">](</span><span class="sx">/teacher/images/ccr.png</span><span class="p">)</span> | ||
| </code></pre></div> | ||
| </div> | ||
| ``` | ||
|
|
||
| #### Images | ||
| In GitHub Pages, you can <mark>insert images</mark> in HTML or Markdown. The Teacher finds \<img\> easier to work with for embedding links when trying to control size. This example shows Markdown syntax for embedding images, but students can also use HTML syntax with the <img> tag. | ||
| - See index.md for !\[\]\(\) syntax for images, or reference [Markdown images](https://www.markdownguide.org/basic-syntax/#images-1) | ||
| - Or use "img" tage referencing [HTML images](https://www.w3schools.com/html/html_images.asp) | ||
|
|
||
|
|
||
| #### Links | ||
| HTML contains an ```<href>``` tag to <mark>create links</mark>. Students can use either HTML or Markdown syntax for links. | ||
| - Look up [HTML links](https://www.w3schools.com/html/html_links.asp) \<href\> or [Markdown links](https://www.markdownguide.org/basic-syntax/#links) syntax. These should become easy and familiar. | ||
|
|
||
|
|
||
| ### Web Page Layout | ||
| A complete HTML Web Application is typically made off of a Layout and a series of Fragments (sometimes called templates). | ||
| - The design of GitHub pages allows us to <mark> change themes</mark> with the _config.yml file key/value, and change the value to a [supported theme](https://pages.github.com/themes/). Here is a portion of the _config.yml, the ```#``` is a comment symbol. Add a comment to midnight line, uncomment dinky line to try a new theme. Repeat the process until you find something you like. | ||
|
|
||
| ```yml | ||
| # theme requirements | ||
| remote_theme: pages-themes/[email protected] | ||
| # remote_theme: pages-themes/[email protected] | ||
| # remote_theme: pages-themes/[email protected] | ||
| # remote_theme: pages-themes/[email protected] | ||
| # remote_theme: pages-themes/[email protected] | ||
| # remote_theme: pages-themes/[email protected] | ||
| plugins: | ||
| - jekyll-remote-theme | ||
| ``` | ||
| - Extensive customization of CSS may require advanced knowledge and can be time-consuming for beginners. I have observed many Students spending to much of their time writing custom CSS. It is better, for now, to <mark>learn to extend or change a GitHub theme</mark> and work with fragments of Markdown or HTML. |