generated from nighthawkcoders/student
-
Notifications
You must be signed in to change notification settings - Fork 0
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
9 changed files
with
2,007 additions
and
9 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,10 @@ | ||
| <table> | ||
| <tr> | ||
| <td><img src="{{site.baseurl}}//images/logo.png" height="60" title="Frontend" alt=""></td> | ||
| <td><a href="{{site.baseurl}}/index">Course</a></td> | ||
| <td><a href="{{site.baseurl}}/techtalk/home_style">CalcStyle</a></td> | ||
| <td><a href="{{site.baseurl}}/frontend/home_table">MusicAPI</a></td> | ||
| <td><a href="{{site.baseurl}}/frontend/home_motion">Animation</a></td> | ||
| <td><a href="{{site.baseurl}}/devops/cloud_database">Users</a></td> | ||
| </tr> | ||
| </table> |
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,65 @@ | ||
| { | ||
| "cells": [ | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "---\n", | ||
| "layout: post\n", | ||
| "title: Web Programming Basics\n", | ||
| "description: An introduction to key topics in Web Programming\n", | ||
| "courses: { csse: {week: 6}, csp: {week: 6} }\n", | ||
| "type: ccc\n", | ||
| "permalink: /basics/home\n", | ||
| "---" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "raw", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "{% include nav_basics.html %}\n" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "\n", | ||
| "# A guide to basic concepts in Web Notebook\n", | ||
| "- Making a menu\n", | ||
| "- Use menu to Guide topics\n", | ||
| "- Make your own custom page and menu\n", | ||
| "- Making a page dynamic through JavaScript\n", | ||
| "- Review usage of Styles in GitHub Pages\n", | ||
| "\n", | ||
| "# How to import this setup into your student repository\n", | ||
| "- NOTE: To copy files between repostories, open two vscode windows and you can drag and drop\n", | ||
| "- Copy the file _includes/nav_basics.html into the _includes folder of your student repository\n", | ||
| " - This creates the navigation between the different pages in the Web Dev Basics\n", | ||
| "- Copy the following files from _notebooks into your _notebooks folder\n", | ||
| " - 2023-03-28-basics-home.ipynb, 2023-03-28-basics-html.ipynb, 2023-03-29-basics-of-js.ipynb, 2023-08-30-basics-of-js-data-types.ipynb, 2023-08-30-basics-js-with-html.ipynb, 2023-09-20-1_4-js-errors.ipynb\n", | ||
| "- In the basics homepage (2023-03-28-basics-home.ipynb), you need to make an edit\n", | ||
| " - In the top cell, modify the courses to say `{ compsci: { week: 5 } }` (this will move this into your schedule page)\n", | ||
| "\n", | ||
| "# Seeing javascript console output in visual studio\n", | ||
| "- When printing outputs from javascript to the console you will need to open the developer console\n", | ||
| " - Go to Help->Toggle Developer Tools and click console on the top bar of the developer window" | ||
| ] | ||
| } | ||
| ], | ||
| "metadata": { | ||
| "kernelspec": { | ||
| "display_name": "Python 3", | ||
| "language": "python", | ||
| "name": "python3" | ||
| }, | ||
| "language_info": { | ||
| "name": "python", | ||
| "version": "3.9.12" | ||
| }, | ||
| "orig_nbformat": 4 | ||
| }, | ||
| "nbformat": 4, | ||
| "nbformat_minor": 2 | ||
| } |
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,288 @@ | ||
| { | ||
| "cells": [ | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "---\n", | ||
| "layout: post\n", | ||
| "hide: True\n", | ||
| "title: Basics of HTML Guide\n", | ||
| "description: An introduction to basic HTML, and resources to learn more.\n", | ||
| "type: ccc\n", | ||
| "permalink: /basics/html\n", | ||
| "author: Rohan Juneja\n", | ||
| "---" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "raw", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "{% include nav_basics.html %}\n" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "\n", | ||
| "# How does HTML work?\n", | ||
| "Similar function to Markdown, syntax defines how stuff should be displayed\n", | ||
| "- HTML is based on beginning and closing tags `<tagname>content</tagname>`\n", | ||
| " - Note the \"/\" on the ending or closing tag of the pair" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "## Compare markdown to html below\n", | ||
| "This below example shows comparison of a [heading](https://www.w3schools.com/html/html_headings.asp) and [paragraph](https://www.w3schools.com/html/html_paragraphs.asp). Click on links to see many more HTML examples." | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "code", | ||
| "execution_count": 8, | ||
| "metadata": {}, | ||
| "outputs": [ | ||
| { | ||
| "data": { | ||
| "text/markdown": [ | ||
| "\n", | ||
| "### Markdown: This is a Heading\n", | ||
| "\n", | ||
| "This is a paragraph\n" | ||
| ], | ||
| "text/plain": [ | ||
| "<IPython.core.display.Markdown object>" | ||
| ] | ||
| }, | ||
| "metadata": {}, | ||
| "output_type": "display_data" | ||
| } | ||
| ], | ||
| "source": [ | ||
| "%%markdown\n", | ||
| "\n", | ||
| "### Markdown: This is a Heading\n", | ||
| "\n", | ||
| "This is a paragraph\n" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "code", | ||
| "execution_count": 9, | ||
| "metadata": { | ||
| "vscode": { | ||
| "languageId": "html" | ||
| } | ||
| }, | ||
| "outputs": [ | ||
| { | ||
| "data": { | ||
| "text/html": [ | ||
| "\n", | ||
| "<h3>HTML: This is a Heading</h3>\n", | ||
| "<p>This is a paragraph.</p>\n" | ||
| ], | ||
| "text/plain": [ | ||
| "<IPython.core.display.HTML object>" | ||
| ] | ||
| }, | ||
| "metadata": {}, | ||
| "output_type": "display_data" | ||
| } | ||
| ], | ||
| "source": [ | ||
| "%%html\n", | ||
| "\n", | ||
| "<h3>HTML: This is a Heading</h3>\n", | ||
| "<p>This is a paragraph.</p>" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "# Attributes\n", | ||
| "- Learn about [attributes](https://www.w3schools.com/html/html_attributes.asp) \n", | ||
| "- Tags can have additional info in the form of attributes\n", | ||
| "- Attributes usually come in name/value pairs like: name=\"value\"\n", | ||
| "\n", | ||
| "```html\n", | ||
| "<tagname attribute_name=\"attribute_value\" another_attribute=\"another_value\">inner html text</tagname>\n", | ||
| "```\n", | ||
| "\n", | ||
| "- href example with attribute for web link and inner html to describe link\n", | ||
| "\n", | ||
| "```html\n", | ||
| "<a href=\"https://www.w3schools.com/html/default.asp\">Visit W3Schools HTML Page</a>\n", | ||
| "```" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "## Sample Markdown vs HTML Tags\n", | ||
| "Image Tag - Markdown\n", | ||
| "\n", | ||
| "```md\n", | ||
| "\n", | ||
| "```\n", | ||
| "\n", | ||
| "Image Tag - HTML\n", | ||
| "\n", | ||
| "```html\n", | ||
| "<!-- no content so no end tag, width/height is optional (in pixels) -->\n", | ||
| "<img alt=\"describe image\" src=\"link to image\" width=\"100\" height=\"200\">\n", | ||
| "```\n", | ||
| "\n", | ||
| "Link Tag - Markdown\n", | ||
| "\n", | ||
| "```md\n", | ||
| "[link text](link)\n", | ||
| "```\n", | ||
| "\n", | ||
| "Link Tag - HTML\n", | ||
| "\n", | ||
| "```html\n", | ||
| "<a href=\"link\">link text</a>\n", | ||
| "```\n", | ||
| "\n", | ||
| "Bolded Text - Markdown\n", | ||
| "\n", | ||
| "```md\n", | ||
| "**Bolded Text**\n", | ||
| "```\n", | ||
| "\n", | ||
| "Bolded Text - HTML\n", | ||
| "\n", | ||
| "```md\n", | ||
| "<strong>Bolded Text</strong>\n", | ||
| "```\n", | ||
| "\n", | ||
| "Italic Text - Markdown\n", | ||
| "\n", | ||
| "```md\n", | ||
| "*Italic Text*\n", | ||
| "```\n", | ||
| "\n", | ||
| "Italic Text - HTML\n", | ||
| "\n", | ||
| "```md\n", | ||
| "<i>Italic Text</i>\n", | ||
| "```" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "# More tags (not really in markdown)\n", | ||
| "P tag (just represeants a paragraph/normal text)\n", | ||
| "\n", | ||
| "```html\n", | ||
| "<p>This is a paragraph</p>\n", | ||
| "```\n", | ||
| "\n", | ||
| "Button\n", | ||
| "\n", | ||
| "```html\n", | ||
| "<button>some button text</button>\n", | ||
| "```\n", | ||
| "\n", | ||
| "Div (groups together related content)\n", | ||
| "\n", | ||
| "```html\n", | ||
| "<!-- first information -->\n", | ||
| "<div>\n", | ||
| " <!-- notice how tags can be put INSIDE eachother -->\n", | ||
| " <p>This is the first paragarph of section 1</p>\n", | ||
| " <p>This is the second paragraph of section 1</p>\n", | ||
| "</div>\n", | ||
| "\n", | ||
| "<!-- second information -->\n", | ||
| "<div>\n", | ||
| " <!-- notice how tags can be put INSIDE eachother -->\n", | ||
| " <p>This is the first paragarph of section 2</p>\n", | ||
| " <p>This is the second paragraph of section 2</p>\n", | ||
| "</div>\n", | ||
| "```\n", | ||
| "\n" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "# Resources\n", | ||
| "- https://www.w3schools.com/html/default.asp\n", | ||
| "- I will show a demo of how to find information on this website" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "# HTML Hacks\n", | ||
| "- Below is a wireframe for an HTML element you will create. A wireframe is a rough visual representation of HTML elements on a page and isn't necessarily to scale or have the exact styling that the final HTML will have. Using the syntax above, try to create an HTML snippet that corresponds to the below wireframe.\n", | ||
| "- The \"a tags\" can contain any links that you want\n", | ||
| "\n", | ||
| "" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "code", | ||
| "execution_count": 1, | ||
| "metadata": { | ||
| "vscode": { | ||
| "languageId": "html" | ||
| } | ||
| }, | ||
| "outputs": [ | ||
| { | ||
| "data": { | ||
| "text/html": [ | ||
| "\n", | ||
| "<!-- put your HTML code in this cell, Make sure to press the Run button to see your results below -->\n" | ||
| ], | ||
| "text/plain": [ | ||
| "<IPython.core.display.HTML object>" | ||
| ] | ||
| }, | ||
| "metadata": {}, | ||
| "output_type": "display_data" | ||
| } | ||
| ], | ||
| "source": [ | ||
| "%%html\n", | ||
| "\n", | ||
| "<!-- put your HTML code in this cell, Make sure to press the Run button to see your results below -->" | ||
| ] | ||
| } | ||
| ], | ||
| "metadata": { | ||
| "kernelspec": { | ||
| "display_name": "Python 3", | ||
| "language": "python", | ||
| "name": "python3" | ||
| }, | ||
| "language_info": { | ||
| "codemirror_mode": { | ||
| "name": "ipython", | ||
| "version": 3 | ||
| }, | ||
| "file_extension": ".py", | ||
| "mimetype": "text/x-python", | ||
| "name": "python", | ||
| "nbconvert_exporter": "python", | ||
| "pygments_lexer": "ipython3", | ||
| "version": "3.9.12" | ||
| }, | ||
| "orig_nbformat": 4 | ||
| }, | ||
| "nbformat": 4, | ||
| "nbformat_minor": 2 | ||
| } |
Oops, something went wrong.