# data[].attributes.body
We were able to add a page for each member of the group, and each member edited their page to their liking. We learned how to embed other webpages that we want to be easily accessible in our website.

# data[].attributes.body
This week we want to add an individual pages for each member of te group. We want to add distinct backgrounds to each of ourpages in order to easily distinguish between eachother's pages. We also see that in a few days we are going to learn how to embed pages into our website, and that is something we are looking forward to.

# data[].attributes.body
Together we worked on the 3x3 grid and improved user settings. As a group we discussed the best way of making the game as user friendly as possible. I figured out how to save values in the grid. I learned how to clear the screen so that the overall experience ran a little bit smoother. Roop found out a way of typing "Tic Tac Toe" with ASCII characters for the title of our game.

# data[].attributes.body
At a glance
Official Guide - use this for details and alignment on learnings

# data[].attributes.body
We completed all of our goals for the week and even did some additional work too. We added a feature in which all links now open in a different tab on the browser. We also did bug testing in order to encounter the problems that we would not see otherwise.

# data[].attributes.body
Our goals for this week are to improve the functionality of our journal, so that the viewer can easily understand our progress throughout the trimester. We also want to add links to our project that take the user to code and proof of understanding of a subject

# data[].attributes.attachment_link.readable_text
Pedro, Roop, Colin, Manuel, Arul | Home

Pedro, Roop, Colin, Manuel, Arul

Hello! Welcome to the Gorillas Website

Here you find the repositories for all our projects; our journals, where we document coding progress; and Individual pages with personal information and our coding experiences. Explore!!

The time now is 2020-11-10 13:52

The sun shines on our backs, and the Gorillas are up and about.

# data[].attributes.attachment_link.description
Pedro, Roop, Colin, Manuel, Arul | Home Pedro, Roop, Colin, Manuel, Arul Hello! Welcome to the Gorillas Website Here you find the repositories for all our projects; our journals, where we document coding progress; and Individual pages with personal information and our coding experiences. Explore!!

# data[].attributes.body
An error occured in the journal where almost everything was put into one collumn. Taking advantage of that, the journal was revamped and drastically improved. A lot of links were added to facilitate navigation through the website.
One downside is that the group as a whole did not work on that muchcode this week.

# data[].attributes.headline
Roop and Pedro Algos and Programming (20pts)

# data[].attributes.subject
Roop and Pedro Algos and Programming (20pts)

# data[].attributes.body
Journal of Key Learnings:

Strings, Numbers: I learned how to do strings at the very beginning, for printing a sequence of lines with ASCII characters. We used it for printing out our first array and the title of the game. We leaned how to use numbers at the beginning to define places on the board.

Variables and Assignments: We used variables to make it easier to switch things around if we changed our mind throughout the project, and to define certain aspects of the code.

Lists, Dictionaries: We used a list for defining the possible the possible ways the user could win the game of Tic tac Toe. We did this using "and" and "or".

Iteration (for): We made use of if statements in our code, so that it would keep displaying new iterations of the board until a winner is detected.

Functions (def): We used the "cls" function quite a bit. It makes the game much easier to read.

Classes/Objects: We made generous use  of colored text throughout the code to make the game more aesthetically pleasing and user friendly.

Highlights to AP Big Ideas:
Big Idea #1: Creative Development
- We had to be creative when trying to solve problems and errors we encountered when coding. Coding is all about improvisation, and that can only be achieved if everyone in the group is creative and open to sharing their ideas.
Big Idea #2: Data
- Our program collected data from the user to define the path that the user chose the program to take. In the 4x4 game the program receives input from the user to define where to position the "X" or "O".
Big Idea #3: Algos and Programming
- See above
Big Idea #4: Computer Systems and networks
- We used Repl.it to divide tasks among the team, so that we could do tasks in parallel.
Big Ideas #5:
- Our main goal for this project was to entertain people with our game through computing.

# data[].attributes.body
We made web pages for everyone. We struggled to make the vanta backgrounds work correctly.

# data[].attributes.headline
Roop Collaboration Learning (20pts)= 20/20

# data[].attributes.subject
Roop Collaboration Learning (20pts)= 20/20

# data[].attributes.body
Evidence of Key Contribution to Team:
I worked on the scoring code with Pedro and delegated other tasks to the others. I was the one who originally came up with the idea to include the colored text. I delegated this task to Arul and Colin so I could work on the 3x3 game.
Journal correlation to project:
With Pedro's help, I remade the 4x4 game into a 3x3 game. I helped the other guys understand the code and how it worked. We all then commented throughout the code to make it more readable.

# data[].attributes.body
I believe I deserve a 10/10 this week because I collaborated, communicated and was creative with the whole group, and assisted them with learning new stuff related to coding. I was always looking to improve our effectiveness during class and outside of class. I always tried to bring innovative ideas to the table.

# data[].attributes.body
I think I deserve a 10/10 this week because I met all my goals. I certainly got better at communicating with the team and getting my ideas across to them. I collaborated with new ideas on how to get past problems. I also tried to make it that everyone in the group was doing something at all times. Overall, our group was very successful with achieving our goals this week.

# data[].attributes.body
I learned how to Input Colors into the code. I also learned how to reformat so that the mathematical values would display in a 3x3 grid. I also typed "Tic Tac Toe" with ASCII characters for the title of our game.

# data[].attributes.body
We are both currently signed up for the AP Classroom and AP Exam in College Board

# data[].attributes.body
We are now experts at changing the background and editing it to our like.

# data[].attributes.attachment_link.description
Create a new document and edit with others at the same time -- from your computer, phone or tablet. Get stuff done with or without an internet connection. Use Docs to edit Word files. Free from Google.

# data[].attributes.body
The exam consists of the Create performance task and an end-of-course AP Exam.

# data[].attributes.body
The end-of-course exam is 2 hours long and includes 70 multiple-choice questions.

# data[].attributes.body
The grade is weighted as follows: 60% for the exam and 40% for the Create Performance task.

# data[].attributes.body
We collaborated with eachother by updating, commiting and pushing to Github through IntelliJ.

# data[].attributes.attachment_link.readable_text
Hello, World! This is our website, which consists of a project link to our previous project of 3x3 and 4x4 Tic Tac Toe on Repl.it, the CSP class resources (Nighthawk Coding Society Padlet), individual repositories, project plan, and pair and trio journals.

Make our projects and resources accessible to other students and teachers.

Add a simple and stylish UI for those who want to view our project

Add and customize embeds

Add commits and Github account

Arul

My goal is to help with the website menu to make it more user friendly, professional, and more navigable

Study the differences between html and python

Port my playground to IntelliJ (expand more on it as well)

Make the overall site aesthetic more appealing to all users

Help with the porting of our tic tac toe game to IntelliJ

Brainstorm ideas of how our group can incorporate our tic tac toe game into the website

Help others with their weekly goals as needed
________________________________________

Colin

Make website more user friendly

Manuel

My goals was to help my team members with the website menu to make it easier to navigate for the user

Learn more about HTML on my own time

Port our playground to intelij and maybe add more things to it that we have learned since we last updated it

Help our group import our tic tac toe game from repl.it to intelliJ

Help others with their goals
---------------------------------------------------

This week we fully incorporated the Raspberry Pi, we updated our README.md, we learned the ins and outs of "Repl.it to IntelliJ process" and one of outr group members even made a video for the class explaining how to port their project to IntelliJ easily.

We did not really work on code this week

Instead we focused on our README.md, porting the Repl.it to the IntelliJ, and incorporating the Raspberry Pi into our project

Next week we plan to improve our code

We were a little bit unlucky on the grading criteria for this week, since what we did is not viewable to the consumer, it is more behind the scenes work.

This week we worked more on understanding how to port our code from repl.it into IntelliJ IDEA. And we are proud to say we now are almost complete "pros" at that. We also worked together to make a more reliable server machine. For that we used a Raspberry Pi. We can now constantly run our website without having to have our own machine awake all the time. this was a major achievement for us because now there is less stuff to worry about.

We also worked on making the website easily accessible for those outside the host's residence by opening a port of entrance on our router.

We did not work on code as much this week, since we wanted to have our website up and running reliably before we started doing anything related to the main coding of the website

This next week we plan on increasing the functionality of our website

We plan on making a menu tab in which the user can easily navigate the website

Arul, Colin, Manuel, Pedro, Roop

# data[].attributes.attachment_link.description
Hello, World! This is our website, which consists of a project link to our previous project of 3x3 and 4x4 Tic Tac Toe on Repl.it, the CSP class resources (Nighthawk Coding Society Padlet), individual repositories, project plan, and pair and trio journals. Make our projects and resources accessible to other students and teachers.

# data[].attributes.body
We communicated well in and out of class, talking to each other, sharing ideas, giving each other updates, etc. We communicated by letting people know when you were working, where you are working, and what you are working on

# data[].attributes.body
We had many issues with IntelliJ where the code would not run, and in one case we were together for about an hour looking for an error which ended up being an incorrect link for the embed. That got us very frustrated, but we go on.

# data[].attributes.attachment_link.readable_text
Embedding a Repl via iframe

You can embed repls in an iframe. This is useful if you want to integrate Repl.it into your app. If your app supports OEmbed -- we already implement the standard, so simply copy and paste any Repl.it URL, and it should work.

If you'd like to embed specific code then do the following:

1. Write your code in your favorite language

2. Save

3. Share

4. Copy the embed code

5. Insert it on your site or blog

Here is an example:

And the html snippet for this:

You can also manually embed repls by using your own custom iframe tags. These repls must have?lite=true as a query parameter to be embedded. The following options are also supported:

outputonly=1: Include this as a query parameter if you want to hide the editor in the embed. Please note that the code is still accessible if the user opens the repl on Repl.it.

Example: https://repl.it/@timmy_i_chen/flask-boilerplate?lite=1&outputonly=1

Embedding on WordPress

WordPress supports OEmbed but can only embed content from an approved whitelist of websites. Check out the WordPress documentation for instructions to add Repl.it to the whitelist. Once Repl.it is added, a repl URL formatted as https://repl.it/@username/repltitle will automatically embed an interactive copy of the repl into your WordPress site.

Embedding on Medium via Embedly

To embed your Repl on Medium, simply paste the link to your repl ( https://repl.it/@username/repl-name) into your medium post and hit Enter. It should automatically be converted to the interactive IDE, where you can edit and run code. To resize the embedded repl, simply click on it, then select one of four choices that Medium presents to you.

Editing an Embedded Repl

If anyone edits an embedded repl, it will automatically fork the repl for them and they will be editing their own version. If the user is logged into Repl.it in their browser, the forked repl will become theirs and show up on their repls dashboard. If the owner edits an embedded repl, those changes will be saved to the repl and become visible to others who view the embedded repl.

# data[].attributes.attachment_link.description
You can embed repls in an iframe. This is useful if you want to integrate Repl.it into your app. If your app supports OEmbed -- we already implement the standard, so simply copy and paste any Repl.it URL, and it should work.

# data[].attributes.body
We had to be creative to get past problems that we encountered, such as when we came to an error in github embedding. We got very creative with different links and tricks, but ended up not being able to embed it.

# data[].attributes.attachment_link.readable_text
I am sure that you here because, you have a situation that you need to embed a file from a github repository to your webpage/blog. right?

I was in the same situation once, so I googled and got a perfect solution for my need and now for yours.

Gist-it

is your solution for it. A man named " Robert Krimen " is kind enough to create a application so that we can embed any file from github repository to our webpage/blog. You can do it as simple as in three steps, just like you embed a gist, hoping you are familiar with embedding gist.

1. Copy github url of the file you like to embed.

2. Submit it to Gist-it and copy the script tag generated.

3. Use the script tag copied in you blog, same as you use gist.

A sample file is embedded here.

If you like to contribute to this project here is the source code in github.
Hope you got it. Now start embedding it.

# data[].attributes.attachment_link.title
Embed files from github repository into webpage

# data[].attributes.attachment_link.description
I am sure that you here because, you have a situation that you need to embed a file from a github repository to your webpage/blog. right? I was in the same situation once, so I googled and got a perfect solution for my need and now for yours.

# data[].attributes.body
As a group we came together to discuss for the last time what all of us needed to have in our deliverables.

# data[].attributes.body
Together, we joined other DNHS students in order to teach and put together videos for Mr. M to leture to the class about how to Deploy a Web Server in a Raspberry Pi.

# data[].attributes.body
We got some insight from more exprienced coders when it comes to web Servers on a Raspberry Pi.

# data[].attributes.body
We polished the website even more by adding embeds which will drastically facilitate the fluidity of navigating our website

# data[].attributes.body
We gave customers (family & friends) the link to our website, and asked them to review and report any errors so that we could fix it. This is a very efficient way to polish code and deliverables since it is a fresh pair of eyes tking a look.

# data[].attributes.body
We learned how to open links in new tabs. We did not know how simple it would be.

# data[].attributes.attachment_link.readable_text
Asked

This question already has answers here:

Closed 7 years ago.

Is it possible to open an a href link in a new tab instead of the same tab?

<a href="http://your_url_here.html">Link</a>

wvdz

14.7k 2 2 gold badges 38 38 silver badges 77 77 bronze badges

asked Mar 21 '13 at 15:33

Rene Rene

11.7k 5 5 gold badges 16 16 silver badges 26 26 bronze badges

You should add the target="_blank" and rel="noopener noreferrer" in the anchor tag.

For example:

<a target="_blank" rel="noopener noreferrer" href="http://your_url_here.html">Link</a>

Adding rel="noopener noreferrer" is not mandatory, but it's a recommended security measure. More information can be found in the links below.

Source:

It shouldn't be your call to decide whether the link should open in a new tab or a new window, since ultimately this choice should be done by the settings of the user's browser. Some people like tabs; some like new windows.

Using _blank will tell the browser to use a new tab/window, depending on the user's browser configuration and how they click on the link (e.g. middle click, Ctrl+click, or normal click).

set the target attribute of your <a> element to "_tab"

EDIT: It works, however W3Schools says there is no such target attribute: http://www.w3schools.com/tags/att_a_target.asp

EDIT2: From what I've figured out from the comments. setting target to _blank will take you to a new tab or window (depending on your browser settings). Typing anything except one of the ones below will create a new tab group (I'm not sure how these work):

_blank Opens the linked document in a new window or tab _self Opens the linked document in the same frame as it was clicked (this is default) _parent Opens the linked document in the parent frame _top Opens the linked document in the full body of the window framename Opens the linked document in a named frame

You can simply do that by setting target="_blank", w3schools has an example.

Stack Overflow works best with JavaScript enabled

# data[].attributes.attachment_link.description
Asked This question already has answers here: Closed 7 years ago. Is it possible to open an a href link in a new tab instead of the same tab?

# data[].attributes.body
Our Vanta Backgrounds needed to be expanded to fit the expanded web pages. This was relatively simple and was resolved quickly with minimal computer crashing. (I forced Colin's Laptop to crash and auto update.)

# data[].attributes.attachment_link.title
Vanta.js - 3D & WebGL Background Animations For Your Website

# data[].attributes.attachment_link.description
Gallery of customizable plug & play animated backgrounds using three.js

# data[].attributes.body
At the beginning of the tri we only learned the basics ofVanta, but today we began to learn more and go more in depth into how it works. We learned how the controls for the background works

# data[].attributes.body
After the lecture given, we decided to embed Repl.it into our site for our Tic Tac Toe Project. We got inspiration from the Nighthawk Coding Society embedding code.

# data[].attributes.body
We made the discovery that we could play multiplayer Tic Tac Toe through the website.

# data[].attributes.body
We successfully embedded the Repl.it Tic TacToe project into our website

# data[].attributes.body
Roop = 10/10
Pedro = 10/10

We all worked quickly to install IntelliJ. Then we worked on our website.

For our website, we chose the background using VANTA Backgrounds. We chose a particle mesh background that features an array-like base, with a floating mesh globe that looks like a pink sun. We were inspired to use this because the array-like base reminded us of our fundamentals project which was a tic tac toe game. It took us a while to get the background working, but now that we have, it looks really cool.

# data[].attributes.headline
Pedro's Collaboration Learnings (20pts) = 20/20

# data[].attributes.subject
Pedro's Collaboration Learnings (20pts) = 20/20

# data[].attributes.body
Evidence of Key Contribution to Team:
- During this project I worked on the core of the coding with Roop, and formatted the array that was going to be used for the Tic Tac Toe. I taught the team how to color the characters in the instructions panel.  I came up with ideas on how we could make the game more fun and enjoyable for the user.
Journal correlation to project:
- Because of my new ideas that I brought to the team we were able to improve our game and expand our understanding of python. While we communicated ideas to each other, we were always absorbing new information about coding, so that in future project, we can bring that same knowledge to the table. That way each project will be better than the one before.

# data[].attributes.body
By reading through the website that was given by Mr. M, we learned how to add a navbar to our website
We also browsed the website in order to learn more tricks and tips.

# data[].attributes.attachment_link.readable_text
Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

How it works

Here's what you need to know before getting started with the navbar:

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.

Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.

Use our spacing and flex utility classes for controlling spacing and alignment within navbars.

Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.

Navbars are hidden by default when printing. Force them to be printed by adding .d-print to the .navbar. See the display utility class.

Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

Read on for an example and list of supported sub-components.

Supported content

Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:

.navbar-brand for your company, product, or project name.

.navbar-nav for a full-height and lightweight navigation (including support for dropdowns).

.navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.

.form-inline for any form controls and actions.

.navbar-text for adding vertically centered strings of text.

.collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.

Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.

Brand

The .navbar-brand can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.

Adding images to the .navbar-brand will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.

Navbar navigation links build on our .nav options with their own modifier class and require the use of toggler classes for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.

Active states-with .active-to indicate the current page can be applied directly to .nav-links or their immediate parent .nav-item s.

And because we use classes for our navs, you can avoid the list-based approach entirely if you like.

You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for .nav-item and .nav-link as shown below.

Forms

Place various form controls and components within a navbar with .form-inline.

Immediate children elements in .navbar use flex layout and will default to justify-content: space-between. Use additional flex utilities as needed to adjust this behavior.

Input groups work, too:

Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.

Text

Navbars may contain bits of text with the help of .navbar-text. This class adjusts vertical alignment and horizontal spacing for strings of text.

Mix and match with other components and utilities as needed.

Color schemes

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg-* utilities.

Containers

Although it's not required, you can wrap a navbar in a .container to center it on a page or add one within to only center the contents of a fixed or static top navbar.

When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified .navbar-expand{-sm|-md|-lg|-xl} class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.

Placement

Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.

Also note that .sticky-top uses position: sticky, which isn't fully supported in every browser.

Responsive behaviors

Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don't add any .navbar-expand class.

Toggler

Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.

With no .navbar-brand shown in lowest breakpoint:

With a brand name shown on the left and toggler on the right:

With a toggler on the left and brand name on the right:

External content

Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the id and data-target matching, that's easily done!

# data[].attributes.attachment_link.authors[].name
Mark Otto, Jacob Thornton, and Bootstrap contributors

# data[].attributes.attachment_link.description
Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

# data[].attributes.body
We began to figure out how we would set up other web pages for the whole group. We tried to figure out what the most practical thing to do would be

# data[].attributes.body
We added a sequence of commands into the Raspberry Pi in which it firstly kills the website. Then it pulls from Github through Git Clone. Then we turn it back on with the updated code. The very nice part is that all of this happens within seconds.

# data[].attributes.body
Our group now has a fully set up Raspberry Pi with Raspbian software downloaded. We set up shortcuts so that we could easily turn on and off the website.

# data[].attributes.body
Roop made a very well rounded video explaining how to port code from Repl.it to Github and then to IntelliJ.

# data[].attributes.body
We took a look at Mr. M's code and adapted it to our own needs.

# data[].attributes.body
We started to connect Github to our website project. We still do not have any commits, but we are figuring it out.

# data[].attributes.attachment_link.description
GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and features, power your CI/CD and DevOps workflows, and secure code before you commit it.

# data[].attributes.body
We downloaded IntelliJ and got it working with Github

# data[].attributes.attachment_link.readable_text
We've noticed that JavaScript is disabled in your web browser. Please enable JavaScript in order to take advantage of all the features of this website.
Download IntelliJ Idea Ultimate for your operating system: Windows, macOS, Linux.
Download IntelliJ Idea Community for your operating system: Windows, macOS, Linux.

# data[].attributes.attachment_link.title
Download IntelliJ IDEA: The Java IDE for Professional Developers by JetBrains

# data[].attributes.attachment_link.description
We've noticed that JavaScript is disabled in your web browser. Please enable JavaScript in order to take advantage of all the features of this website. Download IntelliJ Idea Ultimate for your operating system: Windows, macOS, Linux. Download IntelliJ Idea Community for your operating system: Windows, macOS, Linux.

# data[].attributes.body
We got a very basic understanding of how HTML works. We learned that main.py directed traffic so that when a button is clicked i takes the user to the correct place on page

# data[].attributes.attachment_link.readable_text
HTML Elements

An HTML element is a start tag and an end tag with content in between:

HTML Attributes

HTML elements can have attributes

Attributes provide additional information about the element

Attributes come in name/value pairs like charset="utf-8"

A Simple HTML Document

</html>

Try it Yourself "

Example Explained

HTML elements are the building blocks of HTML pages.

The <!DOCTYPE html> declaration defines this document to be HTML5

The <html> element is the root element of an HTML page

The lang attribute defines the language of the document

The <meta> element contains meta information about the document

The charset attribute defines the character set used in the document

The <title> element specifies a title for the document

The <body> element contains the visible page content

The <h1> element defines a large heading

The <p> element defines a paragraph

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

HTML Document Structure

Below is a visualization of an HTML document (an HTML Page):

<html>

<body>

</body>

</html>

Note: Only the content inside the <body> section (the white area above) is displayed in a browser.

HTML Headings

HTML headings are defined with <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

HTML Paragraphs

HTML paragraphs are defined with <p> tags:

HTML Links

HTML links are defined with <a> tags:

The link's destination is specified in the href attribute.

HTML Images

HTML images are defined with <img> tags.

The source file ( src), alternative text ( alt), width, and height are provided as attributes:

Example

Try it Yourself "

HTML Buttons

HTML buttons are defined with <button> tags:

HTML Lists

HTML lists are defined with <ul> (unordered/bullet list) or<ol> (ordered/numbered list) tags, followed by <li> tags (list items):

HTML Tables

An HTML table is defined with a <table> tag.

Table rows are defined with <tr> tags.

Table headers are defined with <th> tags. (bold and centered by default).

Table cells (data) are defined with <td> tags.

Example

Try it Yourself "With CSS "

Programming HTML

Every HTML element can have attributes.

For web development and programming, the most important attributes are id and class. These attributes are often used to address program based web page manipulations.

Full HTML Tutorial

This has been a short description of HTML.

For a full HTML tutorial go to W3Schools HTML Tutorial.

For a full HTML tag reference go to W3Schools Tag Reference.

# data[].attributes.attachment_link.description
An HTML element is a start tag and an end tag with content in between: HTML elements can have attributes Attributes provide additional information about the element Attributes come in name/value pairs like charset="utf-8" Try it Yourself " HTML elements are the building blocks of HTML pages.

# data[].attributes.body
Our roup has acquired a Raspberry Pi as a recommendation from Mr. M.

# data[].attributes.attachment_link.keywords[]
canakit raspberry pi 4 4gb starter kit - 4gb ram

# data[].attributes.attachment_link.title
CanaKit Raspberry Pi 4 4GB Starter Kit - 4GB RAM

# data[].attributes.attachment_link.description
Amazon.com: CanaKit Raspberry Pi 4 4GB Starter Kit - 4GB RAM: Computers & Accessories

# data[].attributes.body
Our Raspberrry Pi can now host our website at any time. The good part of this is that we do not have to worry about someone's machine turning off when rrunning the website.

# data[].attributes.body
This journal got all messed up because of an accidental change in format, so we took a long time to get it working again

# data[].attributes.body
We want to embed more stuff into our individual websites so that the user doesn't have to keep clicking on links, instead, just scroll through one single page.

# data[].attributes.body
We are polishing the journal and making sure that it is easy for the viewer to understand our progress in the class

# data[].attributes.body
We had the idea to create a video as a quick demo for our journal submission this week. We came up with ideas and concepts that we want to focus on for the video.

# data[].attributes.body
We added "bash_aliases" shortcut to make it as easy as possible to connect to the Raspberry Pi and get the website up and running. We can now have the Raspberry Pi headless and we can still run the site.

# data[].attributes.attachment_link.readable_text
MacOS Catalina and Above

Apple switched their default shell to zsh, so the config files include ~/.zshenv and ~/.zshrc. This is just like ~/.bashrc, but for zsh. Just edit the file and add what you need; it should be sourced every time you open a new terminal window:

nano ~/.zshenv alias py=python

Then do ctrl+x, y, then enter to save.

This file seems to be executed no matter what (login, non-login, or script), so seems better than the ~/.zshrc file.

High Sierra and earlier

The default shell is bash, and you can edit the file ~/.bash_profile and add aliases:

nano ~/.bash_profile alias py=python

Then ctrl+x, y, and enter to save. See this post for more on these configs. It's a little better to set it up with your alias in ~/.bashrc, then source ~/.bashrc from ~/.bash_profile. In ~/.bash_profile it would then look like:
source ~/.bashrc

# data[].attributes.attachment_link.description
Apple switched their default shell to zsh, so the config files include ~/.zshenv and ~/.zshrc. This is just like ~/.bashrc, but for zsh. Just edit the file and add what you need; it should be sourced every time you open a new terminal window: nano ~/.zshenv alias py=python Then do ctrl+x, y, then enter to save.

# data[].attributes.body
No notable achievements.

# data[].attributes.body
Today we intoduced our journal to Mr. M and got some feedback in order to improve it.

# data[].attributes.body
We added the goals for this week to the timeline

# data[].attributes.body
Collaboration:
- This week was more focused on the pair shares than the scrum team as a whole.
- Although, we had to work closely with the other team when we had questions about the requirements for the journal due this week.
Program Function and Purpose:
- The main purpose ofthis week was to improve our journals which were a very weak part of our grade this trimester.

# data[].attributes.body
Collaboration:
- We collaborated with eachother by giving suggestions of what we should add to make our individual webpages complete.
- We also talked to eachother on our Thursday's meeting in order to get a general script together for the video assignment.

# data[].attributes.body
Data Compression:
- We used data compression in order to make it as easy as possible to change definitions if needed
- Now if we want to change something, all we have to do is change it in data.py
Extracting info from data:
- We pull from localtime in order to get information of what time it is

# data[].attributes.body
Libraries:
- We now have a library in data.py where we store information so that other files can pull data from that library.

# data[].attributes.headline
Big Idea 4: Computing Systems and Networks

# data[].attributes.subject
Big Idea 4: Computing Systems and Networks

# data[].attributes.body
The Internet:
- Our website is out in the open on te web to however wants to open it.
- That is a vurnerability because anyone in the world can access it

# data[].attributes.body
Safe Computing:
- We are not really following this guideline since our website is exposed to however wants to access it.

# data[].attributes.body
We learned from Mr. M that we should have a reflection at about each six weeks.

# data[].attributes.body
- We had to input data into the vanta settings in order to get it working

# data[].attributes.body
Strings:
- We made a variety of strings in order to list links on the website home page.
Simulation:
- We simulated an actual customer accessing our website by giving it to our family members.

# data[].attributes.headline
Big Idea 4: Computing Systems and Networks

# data[].attributes.subject
Big Idea 4: Computing Systems and Networks

# data[].attributes.body
The Internet:
- Our Website is currently online on the web so that abyone can see

# data[].attributes.body
- Because of the innovations we put into our project today, our website is now looking a lot better and functional than it previously did.

# data[].attributes.body
We used many sources to improve our project including these below:

# data[].attributes.body
We used this for any type of question we had on code.

# data[].attributes.attachment_link.description
Stack Overflow | The World's Largest Online Community for Developers

# data[].attributes.attachment_link.readable_text
Grow your team on GitHub

GitHub is home to over 50 million developers working together. Join them to grow your own development teams, manage permissions, and collaborate on projects.

You can't perform that action at this time.

You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

We use optional third-party analytics cookies to understand how you use GitHub.com so we can build better products. Learn more.

We use optional third-party analytics cookies to understand how you use GitHub.com so we can build better products.
You can always update your selection by clicking Cookie Preferences at the bottom of the page. For more information, see our Privacy Statement.

Essential cookies

We use essential cookies to perform essential website functions, e.g. they're used to log you in. Learn more

Always active

Analytics cookies

We use analytics cookies to understand how you use our websites so we can make them better, e.g. they're used to gather information about the pages you visit and how many clicks you need to accomplish a task. Learn more

# data[].attributes.attachment_link.description
GitHub is home to over 50 million developers working together. Join them to grow your own development teams, manage permissions, and collaborate on projects. You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window.

# data[].attributes.attachment_link.title
Vanta.js - 3D & WebGL Background Animations For Your Website

# data[].attributes.attachment_link.description
Gallery of customizable plug & play animated backgrounds using three.js

# data[].attributes.body
Daily, we asked questions to eachother either related to code or the journal. Throughout the whole trimester we were constantly in communication via Slack, Discord, or Zoom.

# data[].attributes.body
To advance our learning this second half of the trimester we looked up how we were going to use the Raspberry Pi to get ahead of the curve.

# data[].attributes.body
We used Github, Repl and IntelliJ

# data[].attributes.attachment_link.readable_text
Hello, World! This is our website, which consists of a project link to our previous project of 3x3 and 4x4 Tic Tac Toe on Repl.it, the CSP class resources (Nighthawk Coding Society Padlet), individual repositories, project plan, and pair and trio journals.

Make our projects and resources accessible to other students and teachers.

Add a simple and stylish UI for those who want to view our project

Add and customize embeds

Add commits and Github account

Arul

My goal is to help with the website menu to make it more user friendly, professional, and more navigable

Study the differences between html and python

Port my playground to IntelliJ (expand more on it as well)

Make the overall site aesthetic more appealing to all users

Help with the porting of our tic tac toe game to IntelliJ

Brainstorm ideas of how our group can incorporate our tic tac toe game into the website

Help others with their weekly goals as needed
________________________________________

Colin

Make website more user friendly

Manuel

My goals was to help my team members with the website menu to make it easier to navigate for the user

Learn more about HTML on my own time

Port our playground to intelij and maybe add more things to it that we have learned since we last updated it

Help our group import our tic tac toe game from repl.it to intelliJ

Help others with their goals
---------------------------------------------------

This week we fully incorporated the Raspberry Pi, we updated our README.md, we learned the ins and outs of "Repl.it to IntelliJ process" and one of outr group members even made a video for the class explaining how to port their project to IntelliJ easily.

We did not really work on code this week

Instead we focused on our README.md, porting the Repl.it to the IntelliJ, and incorporating the Raspberry Pi into our project

Next week we plan to improve our code

We were a little bit unlucky on the grading criteria for this week, since what we did is not viewable to the consumer, it is more behind the scenes work.

This week we worked more on understanding how to port our code from repl.it into IntelliJ IDEA. And we are proud to say we now are almost complete "pros" at that. We also worked together to make a more reliable server machine. For that we used a Raspberry Pi. We can now constantly run our website without having to have our own machine awake all the time. this was a major achievement for us because now there is less stuff to worry about.

We also worked on making the website easily accessible for those outside the host's residence by opening a port of entrance on our router.

We did not work on code as much this week, since we wanted to have our website up and running reliably before we started doing anything related to the main coding of the website

This next week we plan on increasing the functionality of our website

We plan on making a menu tab in which the user can easily navigate the website

Arul, Colin, Manuel, Pedro, Roop

# data[].attributes.attachment_link.description
Hello, World! This is our website, which consists of a project link to our previous project of 3x3 and 4x4 Tic Tac Toe on Repl.it, the CSP class resources (Nighthawk Coding Society Padlet), individual repositories, project plan, and pair and trio journals. Make our projects and resources accessible to other students and teachers.

# data[].attributes.body
Pedro and I collaborated to adapt the 4x4 game into the 3x3 game. He helped convert the numerical values while I helped with formatting and adding the locations in the grid.

# data[].attributes.body
We communicated well in and out of class, talking to each other, sharing ideas, giving each other updates, etc. By communicating we were able to complete all of our goals for the week, such as, making the 3x3 Tic Tac Toe, and making the game more user friendly.

# data[].attributes.body
We were having issues with the 3x3 game. We could not end it in a Tie, and then we remembered that every Tic Tac Toe game ends in a tie when the board is full. So we set a round limit, then when the user reaches the final round without a winner, a message of a draw is printed.

# data[].attributes.body
This week we were very creative, because we came up with different ways of getting past problems and improving our game. We used different color schemes for the instructions, to make it easier to look at and understand.

# data[].attributes.body
We began to think about how we were going to add our website into the main website

# data[].attributes.headline
We put together our group goals for the week

# data[].attributes.subject
We put together our group goals for the week

# data[].attributes.body
Integrate our website into N@TM website. Add to our journals. Prepare self-grade for Wednesday.

# data[].attributes.body
All the work on Pedro's laptop was not pushed because of a problem wih github and Intellij

# data[].attributes.body
We are preparing the shell of our self-grade, so that we can turn it in tomorrow.

# data[].attributes.body
After working with Mr. M for about 45 min, we were able to figure out a solution. We now have to push via the terminal. It is not ideal but it works at the moment.

# data[].attributes.body
We have made it to the last class of the trimester, and we have made it i style. We have completed all of our goals and we are happy with our results.