My First WebPage

Overview

Prerequisites
Create Project
Changing Tab-Name
Creating Paragraphs
typographical emphasis

Pre Requisites

Create Project

Create Project Structure and files
- mkdir ~/dev
- cd ~/dev
- mkdir my-first-webpage
- cd my-first-webpage
- touch index.html
- code .

Use `emmet` to Create HTML Boilerplate Code

Execute the command below from VSCode editor to use emmet to auto-generate HTML code.
- doc

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Add Paragraph

The p tag is used to set a paragraph of text.

  <p>The quick brown fox jumps over the lazy dog</p>

Open index.html with a browser to view the webpage

Change Title

The title tag is used to set the name of the tab in the browser.

Typographical Emphasis

The b tag is used to typographically emphasize text with bold styling
The i tag is used to typographically emphasize text with italic styling
The u tag is used to typographically emphasize text with underline styling

<p>The <i>quick</i> <b>brown</b> <u>fox</u> jumps over the lazy dog</p>

Line Break

The br tag is used to create a line break, or new line on the page.

Tables

The table tag is used to start a new table
The tr tag is used to start a new row within a table
The td tag is used to start a new data cell within a row.

Table Example 1

1 Row, 2 Cells per row

<table>
    <tr>
        <td>First row, First cell</td>
        <td>First row, Second cell</td>
    </tr>
</table>

Table Example 1

2 Rows, 2 Cells per row

<table>
    <tr>
        <td>First row, First cell</td>
        <td>First row, Second cell</td>
    </tr>

    <tr>
        <td>Second row, First cell</td>
        <td>Second row, Second cell</td>
    </tr>
</table>

Styling

CSS is used to style an HTML document
Create a new file named style.css and add a link with a href set to the style.css path.
Style the .css document by stating a selector, followed by the specified styling to apply.

Styling Example 1

Here, we change the p style to have a color of red

p {
    color: red
}

Styling Example 2

In the animation below we
1. change the table style to have a border-style of solid
2. refresh the browser
3. change the tr style to have a border-style of solid
4. refresh the browser

td {
    border-style: solid;
}

Creating a repository

Ensure this project is pushed to github.
Follow the article below a guide for how to create a repository
- https://curriculeon.github.io/Curriculeon/lectures/version-control-systems/git/my-first-repository/content.html

My First WebPage

Overview

Pre Requisites

Create Project

Use emmet to Create HTML Boilerplate Code

Add Paragraph

Change Title

Typographical Emphasis

Line Break

Tables

Table Example 1

Table Example 1

Styling

Styling Example 1

Styling Example 2

Creating a repository

Use `emmet` to Create HTML Boilerplate Code