Skip to content

Commit

Permalink
Merge branch 'frontend'
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevshin2002
kevshin2002 committed May 9, 2024
2 parents 1594ae4 + c961109 commit 23a8986
Show file tree
Hide file tree
Showing 4 changed files with 383 additions and 90 deletions.
146 changes: 141 additions & 5 deletions source/Tutorials/HTML_CSS_JS.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,110 @@ has_toc: false

{: .note }

> By [Victor Hsiao](https://www.linkedin.com/in/hsiaovictor/)
## HTML

When we want to add CSS styling to any of our HTML elements, to select the specific HTML elements we want to style, we would use one of the two types of CSS selectors
### **The `<head>` tag**

#### **ID Selectors**
The head tag represents the set up for our HTML page

The two main components included in every `<head>` tag are the `<title>` and `<link>` tags

We use the `<title>` tag when we include a title for our webpage

We use the `<link>` tag for when we want to link a CSS stylesheet to our page, from the example above, we link the "style.css" stylesheet to our HTML page

We will outline the multiple components that every HTML website has:

### **The header tags**

Header tags represent the titles of our HTML

There are 6 different types of header tags: h1, h2, h3, h4, h5, and h6

To use a header tag, you would do:

```<h + "number">(content here)</h + "number">``` (where number is from 1 to 6)

![](https://th.bing.com/th/id/R.f31151c9930cad0b53977ddf32d16c4d?rik=RvEoDf4v8g7cUA&riu=http%3a%2f%2fictacademy.com.ng%2fwp-content%2fuploads%2f2017%2f10%2fHeading-Tag-Hierarchy.jpg&ehk=38aWjqrzDxhB1GMnv1P4RIyBArTDY3czYf0xm8uapJw%3d&risl=&pid=ImgRaw&r=0)

### **The `<p>` tag**

The `<p>` tag is used for big blocks of text, or paragraphs. We use it when we want to include big blocks of text on our website, like for a blog or article

```<p>(insert some text here)</p>```

![p tag](https://blog.hubspot.com/hs-fs/hubfs/Google%20Drive%20Integration/Using%20the%20%3Cp%3E%20Tag%20in%20HTML-1.png?width=657&name=Using%20the%20%3Cp%3E%20Tag%20in%20HTML-1.png)

### **The `<a>` tag**

The `<a>` tag is a tag is used to link other webpages or websites.

To use an `<a>` tag, you have to specify the href attribute, which is the url that the tag links to.

```<a href="some url">(content here)</a>```

In between the opening and closing `<a>` tags, you insert some text that serves as the link. The default blue color text with the underline shows that the text is a link.

### **The list tags**

There are two types of lists in HTML:

1. ordered lists
2. unordered lists

### **Ordered Lists**

To specify an unordered lists, you use the `<ol>` tag.

With ordered lists, your list items would be in a certain order, going from 1, 2, 3, 4, and so forth

![ordered list](https://th.bing.com/th/id/OIP.Cpx_G8zpj83y636HSsMcrgHaFj?rs=1&pid=ImgDetMain)

Same as ordered lists, to add items to your unordered list you use the `<li>` tag.

### **Unordered Lists**

To specify an unordered lists, you use the `<ul>` tag.

Same as ordered lists, to add items to your unordered list you use the `<li>` tag.

Instead of ordered numbers, there would be a bullet point or some form of separator at the front of each list item

Unordered lists would look like this:

![unordered list](https://th.bing.com/th/id/OIP.HfkBXgQPgATQswMMF43-bwHaEJ?rs=1&pid=ImgDetMain)

### **The `<img>` tag**

The `<img>` tag is used to add images to our website.

Unlike the other tags, the image tag does not have a self-closing tag, so instead of ending with ```</img>``` we just end with ```/>```

```<img src="image link" alt="describe image here" />```

![](https://www.codewithfaraz.com/img/image%20tag%20in%20html%20how%20to%20add%20images%20in%20html%20-%20a%20beginners%20guide.jpg)

## CSS

When we want to add CSS styling to any of our HTML elements, to select the specific HTML elements we want to style, there are a few different type of CSS selectors we can use

### **Element Selectors**

Element selectors are the most basic type of CSS selector. To use an element selector, we just get the tag that we want to apply our CSS to

Say we want to style the tag below

`<h1>Hello World!</h1>`

To use an element selector, we just get the tag `h1` and apply our CSS styles!

```
h1 {
(insert styles here)
}
```

### **ID Selectors**

You would use id selectors if you only want to apply CSS styling to one HTML element

Expand All @@ -39,18 +138,21 @@ And in your CSS, you would use the `#` tag to select the element with a certain

Only one element can have a certain id, you cannot have two elements with the same id

#### **Class Selectors**
### **Class Selectors**

Class selectors allow you to apply the same style attributes to multiple elements

In your HTML, you would assign the class attribute to the tags you want to have the same style

From the below example, we see that two `<p>` tags can have the same class, in this case, "paragraph"
From the below example, we see that there are multiple `<p>` tags

Say we want to style the first two `<p>` tags and not the third one. We can assign them the same class, in this case, "paragraph"

```
<h1>Hello, my name is Deadpool!</h1>
<p class="paragraph">I am an antihero, I have done good but have also done bad</p>
<p class="paragraph">I am played by Ryan Reynolds!</p>
<p>The end!</p>
```

To add style attributes to a class, we use the `.` tag instead
Expand All @@ -61,6 +163,40 @@ To add style attributes to a class, we use the `.` tag instead
}
```

### **Basic Style Attributes**

There are many different types of style attributes, but we'll lay out some basic ones.

When writing any CSS code, you have to write it like this:

![CSS basic style example](https://res.cloudinary.com/practicaldev/image/fetch/s--Uvc4p-Vs--/c_imagga_scale,f_auto,fl_progressive,h_900,q_auto,w_1600/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edojfcbz6sr7j0b2l6v1.jpg)

The ones below are style attributes you would use for **text**

**font-size**: changes the size of the text (font size is based on pixels, or px)

`font-size: 16px;`

**color**: changes the color of the text

`color: blue;`

**font-family**: give a specific font to selected text, there are many different font styles out there (the default is sans-serif)

`font-family: sans-serif;`

**text-align**: controls how text is aligned on a page, can be aligned left, right, or center

`text-align: center;`

For a full list of CSS properties, visit the link below:

[All CSS properties](https://www.dofactory.com/css/properties)

## JavaScript



_______________________________________________________________

[Previous: Getting Started](Getting Started){: .float-left .v-align-text-top}
Expand Down
25 changes: 16 additions & 9 deletions source/Web Development Concepts/Frontend/CSS.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,21 @@ has_children: false
1. TOC
{:toc}

{: .note }
> By [Victor Hsiao](https://www.linkedin.com/in/hsiaovictor/)
{: .note }

We will now discuss different aspects of CSS
CSS, or Cascading Style Sheets, is like the paint and decorations you use to make your LEGO house look awesome after you've built it. While HTML defines the structure and content of your web page, CSS controls how your web page looks, like the colors, fonts, sizes, and layout.

### Types of Styling
CSS works together with HTML to make your web page look fantastic. It's like adding all the cool paint colors, decorations, and designs to your LEGO house after you've built it. You use CSS to tell the browser how you want each part of your web page to look.

#### **Inline Styling**
For example, you can use CSS to make your headings big and bold, your paragraphs have a specific font, and your buttons stand out with a bright color. HTML tells the browser what content goes where, and CSS tells the browser how to style and present that content, just like how the instructions tell you where to put each LEGO brick and the decorations to make your house look amazing.

Together, HTML and CSS work hand in hand to create beautiful and functional web pages, just like how LEGO bricks and decorations come together to make awesome creations!

## Types of Styling

There are different types of CSS styling you can implement:

### **Inline Styling**

Inline styling is when you add CSS styles inside an HTML tag

Expand All @@ -34,7 +41,7 @@ To do inline styling, you add the `style` attribute inside an HTML tag, and the

This is considered the most inefficient form of implementing CSS styles because if we want to implement multiple CSS properties, it can get pretty jumbled and messy!

#### **Internal Styling**
### **Internal Styling**

To utilize internal styling, you add the `<style>` element inside the `<head>` section

Expand All @@ -59,16 +66,16 @@ p {color: red;}

This separates the CSS from the HTML code and makes it easier to read when multiple styles are implemented for a specific element. However, we want to keep our HTML and CSS code separate from each other, and the best way is to keep the HTML and CSS code in separate files

#### **External Styling**
### **External Styling**

For external CSS styling, we use the ```<link>``` tag, which we add to the ```<head>``` section in our HTML

```<link rel="stylesheet" href="(name of css file).css" />```

We add the rel attribute and specify it as a "stylesheet" to specify that we want to add CSS code to our HTML, and then the href attribute to link our CSS code to the HTML
_______________________________________________________________

Overall, CSS can make our website look pretty and stylish. Like with our LEGO figure, we can use CSS to make our website stand out in its own unique way!
Overall, CSS can make our website look pretty and stylish. Like with our LEGO house, we can use CSS to make our website stand out in its own unique way!
_______________________________________________________________

[Previous: HTML](HTML){: .float-left .v-align-text-top}
[Next: Javascript](Javascript){: .float-right .v-align-text-top}
82 changes: 7 additions & 75 deletions source/Web Development Concepts/Frontend/HTML.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ has_children: false
{:toc}

{: .note }
> By [Victor Hsiao](https://www.linkedin.com/in/hsiaovictor/)

HTML serves as the building blocks for our website. It represents the different pieces for your LEGO figure, the head, arms, body, legs.

Expand All @@ -42,86 +41,19 @@ Most HTML tags are structured like this:

![](https://clearlydecoded.com/assets/images/posts/2017-09-04-anatomy-of-html-tag/html-tag-attributes.png)

### The <head> tag
One important aspect of HTML is **the DOM**

The head tag represents the set up for our HTML page
**The DOM, or Document Object Model**, is like the instruction manual that tells you how to put all those LEGO bricks together to build your house.

The two main components included in every `<head>` tag are the `<title>` and `<link>` tags
The web browser is like a really smart LEGO builder. When you open a web page, the browser starts reading through that instruction manual, the HTML code.

We use the `<title>` tag when we include a title for our webpage
The DOM is like a map of your web page, showing how all these HTML elements are connected and organized. It's a way for your web browser to understand the structure of your page so it knows how to display it properly.

We use the `<link>` tag for when we want to link a CSS stylesheet to our page, from the example above, we link the "style.css" stylesheet to our HTML page
It's like a blueprint of the web page, showing how all the HTML elements are connected and organized, just like how the instruction manual tells the builder how to connect all the LEGO bricks to build the house.

We will outline the multiple components that every HTML website has:
Just like how following the LEGO instruction manual helps you build your house correctly, the DOM helps the web browser render your web page correctly, making sure everything shows up in the right place and looks the way it should.

### The header tags

Header tags represent the titles of our HTML

There are 6 different types of header tags: h1, h2, h3, h4, h5, and h6

To use a header tag, you would do:

```<h + "number">(content here)</h + "number">``` (where number is from 1 to 6)

![](https://th.bing.com/th/id/R.f31151c9930cad0b53977ddf32d16c4d?rik=RvEoDf4v8g7cUA&riu=http%3a%2f%2fictacademy.com.ng%2fwp-content%2fuploads%2f2017%2f10%2fHeading-Tag-Hierarchy.jpg&ehk=38aWjqrzDxhB1GMnv1P4RIyBArTDY3czYf0xm8uapJw%3d&risl=&pid=ImgRaw&r=0)

### The `<p>` tag

The `<p>` tag is used for big blocks of text, or paragraphs. We use it when we want to include big blocks of text on our website, like for a blog or article

```<p>(insert some text here)</p>```

![p tag](https://blog.hubspot.com/hs-fs/hubfs/Google%20Drive%20Integration/Using%20the%20%3Cp%3E%20Tag%20in%20HTML-1.png?width=657&name=Using%20the%20%3Cp%3E%20Tag%20in%20HTML-1.png)

### The `<a>` tag

The `<a>` tag is a tag is used to link other webpages or websites.

To use an `<a>` tag, you have to specify the href attribute, which is the url that the tag links to.

```<a href="some url">(content here)</a>```

In between the opening and closing `<a>` tags, you insert some text that serves as the link. The default blue color text with the underline shows that the text is a link.

### The list tags

There are two types of lists in HTML:

1. ordered lists
2. unordered lists

#### **Ordered Lists**

To specify an unordered lists, you use the `<ol>` tag.

With ordered lists, your list items would be in a certain order, going from 1, 2, 3, 4, and so forth

![ordered list](https://th.bing.com/th/id/OIP.Cpx_G8zpj83y636HSsMcrgHaFj?rs=1&pid=ImgDetMain)

Same as ordered lists, to add items to your unordered list you use the `<li>` tag.

#### **Unordered Lists**

To specify an unordered lists, you use the `<ul>` tag.

Same as ordered lists, to add items to your unordered list you use the `<li>` tag.

Instead of ordered numbers, there would be a bullet point or some form of separator at the front of each list item

Unordered lists would look like this:

![unordered list](https://th.bing.com/th/id/OIP.HfkBXgQPgATQswMMF43-bwHaEJ?rs=1&pid=ImgDetMain)

### The `<img>` tag

The `<img>` tag is used to add images to our website.

Unlike the other tags, the image tag does not have a self-closing tag, so instead of ending with ```</img>``` we just end with ```/>```

```<img src="image link" alt="describe image here" />```

![](https://www.codewithfaraz.com/img/image%20tag%20in%20html%20how%20to%20add%20images%20in%20html%20-%20a%20beginners%20guide.jpg)
The browser knows exactly where everything is on the page because it's already built that LEGO-like map in its memory using the DOM. This helps the browser quickly find and update different parts of the web page without getting confused, just like how a LEGO builder can quickly find and add or remove bricks from the right spots in the house they're building!

**To learn more about HTML, down below are some resources:**

Expand Down
Loading

0 comments on commit 23a8986

Please sign in to comment.