Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 4 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
# Gaza Sky Geeks’ Code Academy | Palestine
# Gaza Sky Geeks’ Code Academy | Palestine

# Fundamentals Course

## A master reference for the running of the Code Academy's Fundamentals Course.


The program is a 10-week, part-time (15 hours per week) course that provides a comprehensive introduction to web development fundamentals and the professional skills needed to succeed in the twenty-first century global economy. The course will be delivered by GSG staff and Coding Career Accelerator alumni.





![alt text](https://i.imgur.com/IEXYPp4.png)



### Contributing Guidlines
🚨Please review the [contributing guidelines](./CONTRIBUTING.md) before creating and pushing any content.

🚨Please review the [contributing guidelines](CONTRIBUTING.md) before creating and pushing any content.
13 changes: 5 additions & 8 deletions coursebook/Week 01/session-00/README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
# Introduction to the web

You will read about web development and web developers in general so you can have a better understanding of what are you going to be learning in the next sessions

- 11:00 - 12:00 | Welcome talk
- 12:00 - 12:10 | Go through schedule
- 12:10 - 12:40 | [Introduction to programming](./programming.md)
- 12:10 - 12:40 | [Introduction to programming](programming)
- 12:40 - 12:50 | BREAK
- 12:50 - 01:20 | [Introduction to web development](./intro-to-web.md)
- 01:20 - 01:30 | [Web development tools](./webdev-tools.md)
- 12:50 - 01:20 | [Introduction to web development](intro-to-web)
- 01:20 - 01:30 | [Web development tools](webdev-tools)
- 01:30 - 02:00 | [Inroduction to HTML](https://github.com/gazaskygeeks/Fundamentals-course/blob/master/coursebook/Week%2001/session-01/intro-to-html.md)


[Resources](./resources.md)



[Resources](resources)
15 changes: 7 additions & 8 deletions coursebook/Week 01/session-01/README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
# HTML INTRO
# HTML INTRO

### [Learning Outcomes](./learning-outcomes.md)
### [Learning Outcomes](learning-outcomes)

### Schedule

- 02:10 - 03:10 | [Intro To HTML](./intro-to-html.md)
- 03:10 - 03:20 | Break
- 03:20 - 04:30 | [Formatting Page Content with HTML](./elements-and-attributes.md)
- 04:30 - 05:00 | [Exercise](./exercise.md)
- 02:10 - 03:10 | [Intro To HTML](intro-to-html)
- 03:10 - 03:20 | Break
- 03:20 - 04:30 | [Formatting Page Content with HTML](elements-and-attributes)
- 04:30 - 05:00 | [Exercise](exercise)


### [Research Topics](./research-topics.md)
### [Research Topics](research-topics)
44 changes: 16 additions & 28 deletions coursebook/Week 01/session-01/intro-to-html.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
#### Not a Programming Language

Programming languages have functional purposes. HTML, as a markup language doesn’t really “do” anything in the sense that a programming language does. HTML contains no programming logic. It doesn’t have common conditional statements such as If/Else. It can’t evaluate expressions or do any math. It doesn’t handle events or carry out tasks. You can’t declare variables and you can’t write functions. It doesn’t modify or manipulate data in any way. HTML can’t take input and produce output. Think of it this way: you can’t compute the sum of 2 + 2 in HTML; that’s not what it’s for. This is because HTML is not a programming language.
### The History of HTML:

### The History of HTML:

HTML was first created by Tim Berners-Lee, Robert Cailliau, and others.

Expand All @@ -16,7 +16,8 @@ A **Markup Language** is a way that computers speak to each other to control how

**The latest version is known as HTML5.**

### Basic HTML Structure For Web Page
### Basic HTML Structure For Web Page

Here are the tags that pretty much any HTML page should have:

- `<!DOCTYPE html>`: This tag specifies the language you will write on the page. In this case, the language is HTML 5.
Expand All @@ -31,28 +32,22 @@ Here are the tags that pretty much any HTML page should have:

- `<body>`: This is where the content of the page goes.



![](https://www.oreilly.com/library/view/learning-web-design/9781449337513/httpatomoreillycomsourceoreillyimages2257981.png)

This is how your average HTML page is structured visually.



### HTML Elements:

As we mentioned in the previous paragraph, **HTML Elements** are the building blocks of a webpage. An HTML element is a **start tag** and an **end tag** with content in between.

```html
<h1> Hello World </h1>
<h1>Hello World</h1>
```

This is an example of an HTML element which represents a big heading as you can see the starter tag is `<h1>` and the end tag is `</h1>` and the content `hello world` goes between them.



![](https://www.bluekatanasoft.com/wp-content/uploads/element-structure.png)


**The basic elements of an HTML page are**:

- A text header, denoted using the `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` tags.
Expand All @@ -64,52 +59,47 @@ This is an example of an HTML element which represents a big heading as you can
- A divider, denoted using the `<div>` tag
- A text span, denoted using the `<span>` tag


### HTML Attributes
HTML elements can have attributes, **Attributes** provide additional information about the element, Attributes come in **name/value pairs** like **lang="ar"**

HTML elements can have attributes, **Attributes** provide additional information about the element, Attributes come in **name/value pairs** like **lang="ar"**

![](https://i.imgur.com/6Ux4eE0.jpg)


**These are some basic HTML attributes**:
- The **href** attribute
HTML links are defined with the <a> tag. The link address is specified in the href attribute:

- The **href** attribute
HTML links are defined with the `<a>` tag. The link address is specified in the href attribute:

```html
<a href="https://www.google.com">This is a link</a>
```

- The **src** Attribute
HTML images are defined with the `<img>`tag. The filename of the image source is specified in the src attribute:
HTML images are defined with the `<img>`tag. The filename of the image source is specified in the src attribute:

```html
<img src="image.jpg">
<img src="image.jpg" />
```

- The **style** Attribute
The *style* attribute is used to specify the styling of an element, like color, font, size etc.
The _style_ attribute is used to specify the styling of an element, like color, font, size etc.

```html
<p style="color:red">This is a red paragraph.</p>
```

- The **title** Attribute
Here, a title attribute is added to the `<p>` element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:
Here, a title attribute is added to the `<p>` element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:

```html
<p title="This is a tooltip">
This is a paragraph.
</p>
<p title="This is a tooltip">This is a paragraph.</p>
```


For a full reference about HTML attributes visit:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes



### JavaScript HTML DOM

When a web page is loaded, the browser creates a **D**ocument **O**bject **M**odel of the page. With the HTML DOM, **JavaScript** can access and change all the elements of an HTML document.

**The HTML DOM model is constructed as a tree of Objects:**
Expand All @@ -119,5 +109,3 @@ When a web page is loaded, the browser creates a **D**ocument **O**bject **M**od
From W3school https://www.w3schools.com/js/js_htmldom.asp

We will learn more about the HTML DOM later in the course but its good to know what is it from now.


5 changes: 2 additions & 3 deletions coursebook/Week 01/session-02/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
# Introduction to GIt && Github


- 02:00 - 03:00 | [Git Introduction](./introduction-to-git.md)
- 02:00 - 03:00 | [Git Introduction](introduction-to-git)
- 03:00 - 03:10 | BREAK
- 03:10 - 05:00 | [GIT workshop](https://github.com/foundersandcoders/git-workflow-workshop-for-two)
- assignment | [here](https://github.com/gsg-K1-FC/GitHubWorkshop)
- assignment | [here](https://github.com/gsg-K1-FC/GitHubWorkshop)
93 changes: 55 additions & 38 deletions coursebook/Week 01/session-02/introduction-to-git.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,19 @@




### Let's start with simple words that everyone understands,What is Git? :computer:


![Alt Text](https://media.giphy.com/media/VGbx7xfluiGnY4KwBF/giphy.gif)


- Is it a programming language? - :negative_squared_cross_mark:
- Is it a database? - :negative_squared_cross_mark:
- Is it an operating system? - :negative_squared_cross_mark:
- I was wondering what is git doing? So what is Git? What exactly is his job?
- Is it a programming language? - :negative_squared_cross_mark:
- Is it a database? - :negative_squared_cross_mark:
- Is it an operating system? - :negative_squared_cross_mark:
- I was wondering what is git doing? So what is Git? What exactly is his job?

To understand what it is, we must first understand the problem that led to its existence, take this as a simple example, to get it.

### The problem :confused:

You are working on a big project as programmer, and you works on it for along time, and you really made progress, during working on it, suddenly found your self with trouble, you wrote function that made a messy in your code, and you wish that you can undo or knowing where exactly the project work successfully. So you think you are smart enough to not fall in this problem again.
![Alt Text](https://media.giphy.com/media/l2R024uE283zkmdfW/giphy.gif)

![Alt Text](https://media.giphy.com/media/l2R024uE283zkmdfW/giphy.gif)

You starts create a folder for your project, and give it a name, date and time.
And you will make an another copy, every time you add new feature. And this will help you to find any copy you want.
Expand All @@ -31,15 +25,18 @@ You will waste time and effort to know which one.

![Alt Text](https://media.giphy.com/media/108KUzjTMEp2gw/giphy.gif)


### So, the soultion is
version control system

version control system

## What is version control system (VCS)?

Version control, also known as revision control or source control, is the management of changes to documents, computer programs, large websites, and other collections of information. Each revision is associated with a timestamp and the person making the change. Revisions can be compared, restored, and with some types of files, merged.[1]

Version control systems (VCS) most commonly run as stand-alone applications, but may also be embedded in various types of software, including integrated development environments (IDEs).

### Discussion

Version control implements a systematic approach to recording and managing changes in files. At its simplest, version control involves taking ‘snapshots’ of your file at different stages. This snapshot records information about when the snapshot was made, and also about what changes occurred between different snapshots. This allows you to ‘rewind’ your file to an older version. From this basic aim of version control, a range of other possibilities is made available.

#### Version control allows you to:
Expand All @@ -63,20 +60,23 @@ Popular version control systems include:

#### what is Git?

Git is a Version Control System for tracking changes in computer files.
* **Distributed version control** (**decentralized**): Many developers can work on the single project without having to be on the same network.
* **Coordinate work between multiple developers**:
* **Who made what changes and when**
* **Revert back at any time**
* **Local and remote repositories**
**What is repository?**
We have two types of repos; local which is on our computer and remote which is hosted on somebody's else server or computer.
The purpose of a remote repository (eg, **GitHub**) is to publish your code to the world or to some people and allow them to read or write it, so if you are the only developer, you don't really need a remote/central repo.
Git is a Version Control System for tracking changes in computer files.

- **Distributed version control** (**decentralized**): Many developers can work on the single project without having to be on the same network.
- **Coordinate work between multiple developers**:
- **Who made what changes and when**
- **Revert back at any time**
- **Local and remote repositories**
**What is repository?**
We have two types of repos; local which is on our computer and remote which is hosted on somebody's else server or computer.
The purpose of a remote repository (eg, **GitHub**) is to publish your code to the world or to some people and allow them to read or write it, so if you are the only developer, you don't really need a remote/central repo.

## Initializing a git local repository

#### Local implementation of using git and version control

inside your **terminal**, follow the next commands:

```
cd Desktop
mkdir FOLDER_NAME
Expand All @@ -101,68 +101,85 @@ git log
![drawing](https://i.stack.imgur.com/UvZ0M.png)

## What is GitHub?

#### the largest host of source code in the world

The world's leading software development platform.
GitHub brings together the world's largest community of developers to discover, share, and build better software. From open source projects to private projects.

### Open Source

Open source refers to any program whose source code is made available for use or modification as users or other developers see fit. Open source software is usually developed as a public collaboration and made freely available.

## How to create a remote repository?
<ol>
<li> create a <span style="font-weight: bold;">repository</span></li>
<li><span style="font-weight: bold;">clone</span> the repo you've created</li>git
<li>move into the newly created directory</li>
<li>raise your <span style="font-weight: bold;">issues</span> on the work to be done</li>
<li>create a new <span style="font-weight: bold;">branch</span> with a unique and descriptive name</li>
<li>leave the <span style="font-weight: bold;">master branch</span> by switching to the new branch you have just created</li>
<li>write your code</li>
<li>add the new files to the <span style="font-weight: bold;">staging area</span></li>
<li><span style="font-weight: bold;">commit</span> your changes</li>
<li><span style="font-weight: bold;">push</span> your local version up to GitHub</li>
<li>create a <span style="font-weight: bold;">pull request</span></li>
<li>wait it to be <span style="font-weight: bold;">merged</span></li>
</ol>

1. create a **repository**
2. clone the repo you've created git
3. move into the newly created directory
4. raise your **issues** on the work to be done
5. create a new **branch** with a unique and descriptive name
6. leave the **master** branch by switching to the new branch you have just created
7. write your code
8. add the new files to the **staging** area
9. commit your changes
10. push your local version up to GitHub
11. create a **pull r**equest
12. wait it to be **merged**

## Git & GitHub terminology

### Working Directory

It is the folder/directory where we initialize our git repository by using the command

```
git init
```

### Staging Area

It is an intermediate place between Working Directory and Local Repository to figure out what the things you want git to ignore and what the things you want it to be tracked.

### Repository

A repository is like a folder for your project. Your project's repository contains all of your project's files and stores each file's revision history. You can also discuss and manage your project's work within the repository.

### Local Repository

It is the repo on which we will make local changes, typically this local repository is on our computer.

### Remote Repository
It is a common repository that all team members use to exchange their changes. In most cases, such a remote repository is stored on a code hosting service like GitHub or on an internal server.

It is a common repository that all team members use to exchange their changes. In most cases, such a remote repository is stored on a code hosting service like GitHub or on an internal server.

### Cloning

Cloning a git repository means that you create a local copy of the code provided by developer; it is downloading the whole code of the repository.

### Issues

Issues are a great way to keep track of tasks, enhancements, and bugs for your projects. They're kind of like email—except they can be shared and discussed with the rest of your team.

### Branches

A branch is a parallel version of a repository. It is contained within the repository, but does not affect the primary or master branch allowing you to work freely without disrupting the "live" version. When you've made the changes you want to make, you can merge your branch back into the master branch to publish your changes.

### Master Branch

One word: the master branch is deployable. It is your production code, ready to roll out into the world. The master branch is meant to be stable, and it is the social contract of open source software to never, ever push anything to master that is not tested, or that breaks the build.

### Commit

It is a command used to save your changes to the local repository.

### Push

Pushing refers to sending your committed changes to a remote repository, such as a repository hosted on GitHub. For instance, if you change something locally, you'd want to then push those changes so that others may access them.

### Pull Request

Pull requests let you tell others about changes you've pushed to a branch in a repository on GitHub. Once a pull request is opened, you can discuss and review the potential changes with collaborators and add follow-up commits before your changes are merged into the base branch.

### Merge

It is a command which lets you take the independent lines of development created by git branch and integrate them into a single branch.
Loading