DEV Community: jolamemushaj

How I built and designed MyWishlist - Part One

jolamemushaj — Thu, 09 May 2024 14:32:29 +0000

The moment I finished Jeffrey Way's course called Laravel 8 From Scratch, I thought that a good way to prove to myself that I understood how Laravel works was to try to create a project myself from scratch. This is where the idea of creating MyWishlist was born.

MyWishlist is a website where a user can add, edit or delete various products and links, which can be divided into categories.

Initially, I started it as a simple CRUD, but recently I came back to give it a more decent design (even though it's purple everywhere 😄) in order to have a more professional appearance. In MyWishlist, the user can add a product where he can specify the name, category to which this product belongs, size, color, price, currency in which the product is sold on the page where the user saw this product and a url that directs you to the page where the product is actually advertised.

The project started with the installation of Laravel and Tailwind. Later during the project I also installed Vue, to experiment a bit with the integration of Vue in an already started project, and to convert some of the blades into Vue components.

Routes

The first step for me was specifying the routes in web.php. The first route loads welcome.blade.php by using the uncommon Route::view() call:

  Route::view('/', 'welcome');

Then I created a page layout using Laravel components, while styling with Tailwind.

Then I gradually continued adding Controllers, Models, Migrations, Factories and Seeders for Products and Categories as the two most important entities.

Models

While working with the backend, it is important to define the models and Eloquent relationships that exist between them. The first relationship was that a product belongs to a category and a category has many products.
This is the code for the Product model:

//app/Models/Product.php

class Product extends Model
{
    use HasFactory;

    protected $guarded = [];

    public function category(): BelongsTo
    {
        return $this->belongsTo(Category::class);
    }
}

This is the code for the Category model:

//app/Models/Category.php

class Category extends Model
{
    use HasFactory;

    protected $guarded = [];

    public function products(): HasMany
    {
        return $this->hasMany(Product::class);
    }
}

Unit Tests

Since I saw a Jeffrey Way course called Code Katas with PHPUnit, it stuck to me that a good developer should write tests. So I started writing the first test, where I tested if a product belongs to a category.

Below you will find the code for the test:

// tests/Units/ProductTest.php
public function test_a_product_belongs_to_a_category(): void
{
    // arrange
    $category = Category::factory()->create();
    $product = Product::factory()->create(['category_id' => $category->id]);

    // act
    $result = $product->category;

    // assert
    $this->assertInstanceOf(Category::class, $result);
    $this->assertEquals($category->id, $result->id);
}

The second test was that a category has many products. Code below:

// tests/Units/CategoryTest.php
public function test_a_category_has_many_products(): void
{
    // Arrange
    $category = Category::factory()->create();
    $product1 = Product::factory()->create(['category_id' => $category->id]);
    $product2 = Product::factory()->create(['category_id' => $category->id]);
    $otherProduct = Product::factory()->create(['category_id' => Category::factory()->create()->id]);

    // Act
    $products = $category->products;

    // Assert
    $this->assertTrue($products->contains($product1));
    $this->assertTrue($products->contains($product2));
    $this->assertEquals(2, $products->count());
}

Database Migrations

It is also very important to create a proper schema for the database following the principle to pick the smallest data type that will hold all of your data. Then the connection between the tables should be made through foreign keys and constraints. Instead of modifying the production database directly, we use migrations which must be stored in the database/migrations directory.

Here's how to create a database migration in Laravel:

php artisan make:migration create_categories_table

This command will create the structure for the following code:

return new class extends Migration
{
    public function up(): void
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->id();
            $table->string('name')->unique();
            $table->timestamps();
        });
    }
};

Also the Schema created for the Product:

return new class extends Migration
{
    public function up(): void
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->foreignId('category_id')->constrained()->cascadeOnDelete();
            $table->string('name');
            $table->string('color');
            $table->float('price');
            $table->string('currency');
            $table->string('size');
            $table->string('thumbnail')->nullable();
            $table->string('url');
            $table->timestamps();
        });
    }
};

Here we notice that the id column, which is the primary keyin the categories table, serves as a foreign key in the products table, where it is renamed category_id. In this way, the tables are connected to each other.

Factories

Another important element, which helps preparing a local environment, are Factories. Through Factories we generate random database records, instead of manually specifying the value of each column. While working with MyWishlist I generated Factories mainly for Products, Categories and Websites.
Below you can find the code written in ProductFactory.php:

class ProductFactory extends Factory
{
    public function definition(): array
    {
        return [
            'name' => fake()->name(),
            'category_id' => Category::factory(),
            'size' => fake()->randomDigit(),
            'price' => fake()->randomDigit(),
            'currency' => fake()->currencyCode(),
            'color' => fake()->colorName(),
            'url' => fake()->url(),

        ];
    }
}

The fake() function is a helper method which is used for generating fake data.

Seeders

Meanwhile Seeders are used to generate initial data that the app needs.

class DatabaseSeeder extends Seeder
{
    public function run(): void
    {
        $clothing = Category::factory()->create(['name' => 'Clothing']);
        $accessories = Category::factory()->create(['name' => 'Accessories']);
        $shoes = Category::factory()->create(['name' => 'Shoes']);

        Product::factory(15)->create(['category_id' => $clothing->id]);
        Product::factory(15)->create(['category_id' => $accessories->id]);
        Product::factory(15)->create(['category_id' => $shoes->id]);
    }
}

As can be seen, inside the run() method I have created three categories Clothing, Accessories, and Shoes using the Category model factory. Each category is assigned a name using the create() method. Then, it creates 15 products for each category, using the Product model factory.

Until now, I have been writing for all the stuff related to Models and the Database. In the following post, I will write about the Controller logic, a Middleware I used to block editing, storing or deleting records when I deployed on the server, and how I converted Blade views into Vue components.

Thank you for making it this far 😊.

How I built CupBook

jolamemushaj — Mon, 15 Apr 2024 17:15:26 +0000

I have decided to document my projects on online platforms. Mainly to write down my progress, but also for anyone curious who is starting out with Vue and Tailwind.

One of my favorite development projects is Cupbook. When one day my friend showed me her favorite design project, where she had revealed all her love for animals and books, I asked if I could build it as a developer. While her creativity and vision brought the design to life, I was able to focus on my passion which is web development.

The first step was to install Vue. Pretty easy and straightforward.
The process started with the creation of the navbar. The bookshelves and cats, brilliantly designed, create a sense of peace for book and cat lovers. The positioning of the SVG-s has been a bit challenging, because I wanted to make sure that the final product matched the designer's vision. But I learned how to edit SVG-s in my editor and I call that a small victory for me. The positioning of the cat was my favorite part because I thought I couldn't pull it off that well. But the result was awesome. A little cat crawling over the search input. How cute is that?

Search is functional. Just type something and the result will appear. Below is the code written with Vue 3:

<script setup>
import {computed, ref} from "vue";
import photo03 from '@/images/photo03.jpeg';

const searchQuery = ref('');
const books = [
    {
        title: 'To kill a mockingbird',
        cover: photo03,
        author: 'Harper Lee',
        isBestseller: true,
    },
    ...
]

const filteredBooks = computed(() => {
    if (! searchQuery.value) return [];

    return books.filter(function (book) {
        return book.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
            book.author.toLowerCase().includes(searchQuery.value.toLowerCase())
    })
})
</script>

<template>
        <div>
            <img alt="logo" src="@/images/mace.svg"/>
            <input v-model="searchQuery"
                   type="text"
                   name="name"
                   id="name">
            <button></button>
        </div>

        <div v-if="filteredBooks.length" id="books">
            <div v-for="book in filteredBooks">
                <img alt="logo" :src="book.cover"/>
                <div>{{ book.title }}</div>
                <div>{{ book.author }}</div>
            </div>
        </div>

    </template>

Listing books and events on the home page was a piece of cake, especially when you have the design ready. I used CSS grid and flex utilities to position the books in different screen sizes.

Then I continued with the creation of the About Page. Here too, I used mainly grid and flex.

The last section was the Contact Page. It was created with forms and here I made validation errors with Vue.

After I finished the Desktop version, I switched to the mobile version of the site. The basic change was the part of the navbar, from which I removed the book SVG-s and put a simple hamburger menu which, when clicked, opens the menu of the page which consists of Home, Books, Events, About us, Contact.

The last step is to Lazy Load the images so that the page is performant and fast.

<img loading="lazy" src="@/images/photo24.jpeg">

It defers loading the image until it is needed.

Where did I encounter difficulty during the project?

The first difficulty was to make Search functional. The second was well-positioning the SVG-s.

What did I learn during the realization of the project?

I learned how to make a functional Search. I used the filter() function of arrays in Javascript. I also used Vue model binding to link the search input with the search variable.
I learned how to edit SVG-s in IDE (PhpStorm).

Here is a link to the CupBook Website and here is a link to the GitHub Repository

I hope you like it 😄.

Understanding Primary Keys, Foreign Keys, and Constraints in SQL

jolamemushaj — Mon, 01 May 2023 21:22:09 +0000

SQL stands for Structured Query Language, which is a standard programming language used for managing relational databases. It is used to create, modify, and retrieve data from a database, as well as to manage database objects such as tables, views, indexes, and stored procedures.

Important concepts in SQL databases that are used to establish relationships between tables and ensure data integrity are primary keys, foreign keys, and foreign key constraints.

A primary key is a unique identifier for a row in a table. It is a column or a combination of columns that uniquely identify each row in the table. Primary keys are used to enforce entity integrity, which means that each row in the table must be uniquely identifiable.

A foreign key is a column or a combination of columns in one table that refers to the primary key of another table. It can be used to ensure referential integrity, which means that the values in the column or columns that refer to the primary key of another table must match one of the values in that primary key.

A foreign key constraint is a rule that enforces referential integrity between two tables. It specifies that the values in a foreign key column or columns must match one of the values in the primary key of another table and can be used to ensure that data is consistent and accurate across multiple related tables.

Here's a simple example to illustrate the concepts of primary keys, foreign keys, and foreign key constraints in SQL databases:

Suppose we have two tables: "customers" and "orders". The "customers" table has columns for "customer_id", "name", and "email", and the "orders" table has columns for "order_id", "customer_id", "date", and "total".

To establish a relationship between the two tables, we can define the "customer_id" column in the "customers" table as the primary key, and the "customer_id" column in the "orders" table as the foreign key.

Here's the SQL code to create these tables and define the primary key and foreign key constraints:

CREATE TABLE customers (
  customer_id INT NOT NULL PRIMARY KEY,
  name VARCHAR(50),
  email VARCHAR(50)
);

CREATE TABLE orders (
  order_id INT NOT NULL,
  customer_id INT NOT NULL,
  date DATE,
  total DECIMAL(10,2),
  PRIMARY KEY (order_id),
  FOREIGN KEY (customer_id) REFERENCES customers(customer_id)
);

In this example, the "customer_id" column in the "customers" table is the primary key, which means that it uniquely identifies each customer in the table. The "customer_id" column in the "orders" table is the foreign key, which refers to the primary key in the "customers" table.

The foreign key constraint is defined using the "REFERENCES" keyword, which specifies that the "customer_id" column in the "orders" table references the "customer_id" column in the "customers" table. This constraint ensures that each order in the "orders" table is associated with a valid customer in the "customers" table.

So, when we insert data into the "orders" table, the foreign key constraint ensures that the value in the "customer_id" column matches one of the values in the "customer_id" column in the "customers" table. If the value in the "customer_id" column does not match a valid value in the "customers" table, the foreign key constraint will prevent the data from being inserted, ensuring that the data is consistent and accurate across both tables.

This article was created with the help of AI.

How to create a Steps Progress Bar

jolamemushaj — Thu, 05 Jan 2023 13:52:44 +0000

Recently, I had to facilitate the work of the users of a web page that I am maintaining. The best way to make the process as simple as possible was to create a Steps Progress Bar.

A multi-step progress bar is a powerful tool, used to show your customers the progress of work in a step format. It is very useful because it lets users know how close they are to a completed action.

To create a basic Progress Bar, you need to use Html, CSS and JavaScript.

Let's start with Html. The following format requires the use of Font Awesome.

<div class="main">

    <ul>
        <li>
            <i class="icons awesome fa-solid fa-user"></i>
            <div class="step first">
                <p>1</p>
                <i class="awesome fa-solid fa-check"></i>
            </div>
            <p class="label">Profile</p>
        </li>
        <li>
            <i class="icons awesome fa-solid fa-coins"></i>
            <div class="step second">
                <p>2</p>
                <i class="awesome fa-solid fa-check"></i>
            </div>
            <p class="label">Finances</p>
        </li>
        <li>
            <i class="icons awesome fa-solid fa-house"></i>
            <div class="step third">
                <p>3</p>
                <i class="awesome fa-solid fa-check"></i>
            </div>
            <p class="label">Property</p>
        </li>
        <li>
            <i class="icons awesome fa-regular fa-star-half-stroke"></i>
            <div class="step fourth">
                <p>4</p>
                <i class="awesome fa-solid fa-check"></i>
            </div>
            <p class="label">Evaluation</p>
        </li>
        <li>
            <i class="icons awesome fa-solid fa-thumbs-up"></i>
            <div class="step fifth">
                <p>5</p>
                <i class="awesome fa-solid fa-check"></i>
            </div>
            <p class="label">Approval</p>
        </li>
    </ul>
</div>

Below is the code for styling the elements. The code includes CSS for active and inactive buttons.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

ul {
    display: flex;
}

ul li {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 40px;
}

ul li .icons {
    font-size: 25px;
    color: #1b761b;
    margin: 0 60px;
}

ul li .label {
    font-family: sans-serif;
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: bold;
    color: #1b761b;
}

ul li .step {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: #d7d7c3;
    margin: 16px 0 10px;
    display: grid;
    place-items: center;
    color: ghostwhite;
    position: relative;
    cursor: pointer;
}

.step::after {
    content: "";
    position: absolute;
    width: 197px;
    height: 3px;
    background-color: #d7d7c3;
    right: 30px;
}

.first::after {
    width: 0;
    height: 0;
}

ul li .step .awesome {
    display: none;
}

ul li .step p {
    font-size: 18px;
}

ul li .active {
    background-color: #1b761b;
}

li .active::after {
    background-color: #1b761b;

}

ul li .active p {
    display: none;
}

ul li .active .awesome {
    display: flex;
}

JavaScript code is required for product functionality. The following code explains how the steps are initially inactive, and then become active through clicks on each step and event listeners.


const first = document.querySelector(".first");
const second = document.querySelector(".second");
const third = document.querySelector(".third");
const fourth = document.querySelector(".fourth");
const fifth = document.querySelector(".fifth");
const steps = [first, second, third, fourth, fifth];

function nextStep(currentStep) {
    steps.forEach(step => step.classList.remove("active"));

    steps.forEach((step, index) => {
        if (index <= currentStep) {
            step.classList.add("active");
        } else {
            step.classList.remove("active");
        }
    });
}

steps.forEach((step, index) => {
    step.addEventListener("click", () => {
        nextStep(index);
    });
});

The final product would look like this:

Three ways to iterate an array

jolamemushaj — Fri, 16 Sep 2022 10:02:05 +0000

Given an array of integers, return a new array with each value doubled.

For example: [2, 4, 6] --> [4, 8, 12]

Number #1: We use a for loop to iterate over the elements, transform each individual one, and push the results into a new array.

function doubleValues(array) {
    let result = [];
    for (let i = 0; i < array.length; i++) {
        result.push(array[i] * 2);
    }
    return result;
}

console.log(doubleValues([1, 2, 3, 4]));
// [2, 4, 6, 8]

Number #2: For-of loop.

function doubleValues(array) {
    let result = [];
    for (const element of array) {
        result.push(element * 2);
    }
    return result;
}

console.log(doubleValues([1, 2, 3, 4]));
// [2, 4, 6, 8]

Number #3: JavaScript Array type provides the map() method that allows you to transform the array elements in a cleaner way.

const array = [1, 2, 3, 4];
const doubleValues = array.map(element => element * 2);
console.log(doubleValues);
// [2, 4, 6, 8]

How to merge two arrays?

jolamemushaj — Thu, 15 Sep 2022 10:16:48 +0000

Let’s say you have two arrays and want to merge them:

const firstTeam = ['Olivia', 'Emma', 'Mia']
const secondTeam = ['Oliver', 'Liam', 'Noah']

One way to merge two arrays is to use concat() to concatenate the two arrays:

const total = firstTeam.concat(secondTeam)

But since the 2015 Edition of the ECMAScript now you can also use spread to unpack the arrays into a new array:

const total = [...firstTeam, ...secondTeam]
console.log(total)

The result would be:

// ['Olivia', 'Emma', 'Mia', 'Oliver', 'Liam', 'Noah']

There is also another way, in case you don't want to create a new array but modify one of the existing arrays:

firstTeam.push(...secondTeam);
firstTeam; // ['Olivia', 'Emma', 'Mia', 'Oliver', 'Liam', 'Noah']

Removing elements from an array

jolamemushaj — Tue, 13 Sep 2022 09:33:37 +0000

Take an array and remove every second element from the array. Always keep the first element and start removing with the next element.
Example:
Given the array --> [1, 2, 3, 4, 5]
The result will be --> [1, 3, 5]

function removeEl(arr) {
    const newArr = [];
    for (let i = 0; i < arr.length; i = i + 2) {
        newArr.push(arr[i]);
    }
    return newArr;
}

console.log(removeEl([1, 2, 3, 4, 5]));

Building a sidebar with Tailwind CSS

jolamemushaj — Wed, 24 Aug 2022 08:32:15 +0000

Tailwind is a CSS framework. When you use it, you don't have to write custom CSS to style your application. Tailwind provides a deep catalog of CSS tools and classes to control the padding, margin, color, font, and more, to build beautiful custom designs.

Let's see how we can create a sidebar, using Tailwind.

The first tag, inside which all the other tags will be included, is a div, to which we will write the classes:

min-h-0 (min-height: 0px)
flex-1 (flex: 1 1 0%)
overflow-hidden (overflow: hidden)



<div class="min-h-0 flex-1 flex overflow-hidden">
....
</div>

The second tag, inside of the first div is nav with the following classes:

hidden lg:block (to hide the sidebar on mobile and will make it visible on larger screens)
flex-shrink-0 (to prevent a flex item from shrinking)
bg-gray-800 (background-color: rgb(31 41 55))
overflow-y-auto (to allow vertical scrolling if needed)



<div class=" min-h-0 flex-1 flex overflow-hidden">
    <nav aria-label="Sidebar" class="narrow-sidebar hidden lg:block lg:flex-shrink-0 lg:bg-gray-800 lg:overflow-y-auto">
....
    </nav>
</div>

The third tag, inside nav is another div, with the following classes:

relative (position: relative)
w-20 (width: 5rem; /* 80px */)
flex (display: flex)
space-y-16 (margin-top: 4rem; /* 64px */)
flex-col (to position flex items vertically)
p-3 (padding: 0.75rem; /* 12px */)



<div class=" min-h-0 flex-1 flex overflow-hidden">
    <nav aria-label="Sidebar" class=" hidden lg:block flex-shrink-0 bg-gray-800 overflow-y-auto">
        <div class="relative w-20 flex space-y-16 flex-col p-3">
....
        </div>
    </nav>
</div>

Now all that needs to be done is to add the icons and their naming. In this post I have made a sidebar with only three icons to show a basic example. The final code for the given example would be:



<div class=" min-h-0 flex-1 flex overflow-hidden">
    <nav aria-label="Sidebar" class="hidden lg:block flex-shrink-0 bg-gray-800 overflow-y-auto">
        <div class="relative w-20 flex space-y-16 flex-col p-3">

            <a href="#" class="text-gray-400 hover:text-red-700">
                <div class="flex-shrink-0 inline-flex items-center justify-center w-14">
                    <i class="fa fa-house"></i>
                </div>
                <div class="text-center text-xs font-normal ">Home</div>
            </a>

            <a href="#" class="text-gray-400 hover:text-red-700">
                <div class="flex-shrink-0 inline-flex items-center justify-center w-14">
                    <i class="fa fa-cog"></i>
                </div>
                <div class="text-center text-xs font-normal ">Settings</div>
            </a>

            <a href="#" class="text-gray-400 hover:text-red-700">
                <div class="flex-shrink-0 inline-flex items-center justify-center w-14">
                    <i class="fa fa-envelope"></i>
                </div>
                <div class="text-center text-xs font-normal ">Messages</div>
            </a>

        </div>
    </nav>
</div>

As we can see, using Tailwind means writing all the necessary code in html. The end result will be the same as if it were written with CSS.

The final sidebar looks like this:

CSS

jolamemushaj — Sat, 25 Jun 2022 20:25:38 +0000

CSS is a core technology for building Web pages. CSS stands for Cascading Style Sheets and is a style sheet language we use to style the presentation of a document written in Hypertext Markup Language (Html).

CSS files can define the:

typography (font-size, font-color, font-weight, font-family, font-style, line-spacing, letter-spacing)
size (background-size, font-size)
color (background-color, font-color)
background (background-size, background-image, background-position, background-color, background-clip)
indentation (text-indent)
borders (border-width, border-style, border-color)
location of HTML elements.

There are three types of CSS:

Inline
Internal
External

Html lists

jolamemushaj — Sat, 18 Jun 2022 11:41:26 +0000

HTML lists are used to group together related pieces of information. All lists may contain one or more list elements. There are three different types of HTML lists:

- Unordered List - bulleted List <ul>
- Ordered List - numbered List <ol>
- Description List - definition List <dl>

HTML Unordered Lists - An unordered list is a collection of related items that have no special order. The Unordered list starts with <ul> tag and list items start with the<li> tag. Each item in the list is marked with a bullet.

<ul>  
 <li>Michael</li>  
 <li>Pamela</li>  
 <li>Dwight</li>  
</ul>

HTML Ordered Lists - In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with <ol> tag. The numbering starts at one and is incremented by one for each list element tagged with <li>.

<ol>  
 <li>Angela</li>  
 <li>Oscar</li>  
 <li>Kevin</li>  
</ol>

The type attribute for <ol> tag is used to specify the type of numbering you want to use:

<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

HTML Description Lists - A description list is a list of terms, with a description of each term.

<dl> - defines a description list
<dt> - defines a term in a description list
<dd> - describes the term in a description list

Example:

<dl>
  <dt>Michael</dt>
  <dd>- world's best boss</dd>
  <dt>Pam</dt>
  <dd>- the office receptionist</dd>
</dl>

Html tables

jolamemushaj — Fri, 28 Jan 2022 14:23:16 +0000

A table is a data structure used to organize information. Html tables are used to help web developers organize data in rows and columns. Each row represents a unique record, and each column represents a field in the record.

The first thing we need to be clear about, is that creating tables consists of three main sections, which are: header, body, footer. To create the table we will use different tags, where the main one is <table> </table>. This tag wraps around the entire table. To create the table border the tag would be <table border = "1px"> </table>and it will add a border around each cell of the table.

The head of the table is created via the <thead> </thead> element. The <tr> tag is used to create table rows and the <th> tag is used to create table headings. If the width of the table headings needs to be specific, all we have to do is type <th width = ""> and put the width we want between the quotes. An example of code, written to create a table header is as follows:

<thead>
    <tr>
        <th width="100">Name</th>
        <th width="100">Gender</th>
        <th width="100">Age</th>
    </tr>
</thead>

The body of the table is created through the <tbody> </tbody> element, which contains the main information of the table. The <td> tag is used to create table data cells. An example of code, written to create a table body is as follows:

<tbody>
    <tr>
        <td>Bill</td>
        <td>Male</td>
        <td>37</td>
    </tr>
    <tr>
        <td>Jessica</td>
        <td>Female</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Richard</td>
        <td>Male</td>
        <td>18</td>
    </tr>
</tbody>

The end of the table closes with <tfoot> </tfoot>, which creates a separete footer for the table.

<tfoot>
    <tr>
        <th colspan="3">List of people</th>
    </tr>
</tfoot>

The table we created will look like this:

Html Basics

jolamemushaj — Thu, 27 Jan 2022 22:18:59 +0000

Hello,
My name is Fabjola, graduated in Finance, with two years of experience in this field. I have recently shown interest in programming, as the world is advancing and it seems that the future is mostly there.

The course with which I decided to start my journey in this field is called - The Complete Front-End Web Development Course - and it looks really interesting.

First I was introduced to html basics and then to the advanced level.

I was introduced to the structure of the html document and its elements. An element is the opening tag, all of the content within it, and then the closing tag itself. One of the main elements is <div> </div> which is considered a full block element, and has the width of the whole page, and then <span> </span> which gives the possibility that the content in the middle to be as wide as we want it to be.
Then I learned that <i> </i> stands for italica, <b> </b> for bold, <p> </p> for paragraph and <a href=""> </a> to put a hyperlink reference to the web page we are creating.
Another really interesting detail that I have recently learned in this course is the creation of lists on web pages. For unordered lists use the <ul> <li> </li> </ul> element. This way the listed content will appear on the page we are trying to create, but without a numerical order.
For ordered lists the element <ol> <li> </li> </ol> will be used. Content will be listed in numerical order.
It is very important to note that the page will have a structure, which consists of header, body and footer. Starts with <html> and ends with </html>, which basically means that the tag wraps around the entire page.
Inside the <html></html>element there is generally a structure that starts with <head> <title> </title> </head>, an element which indicates the title of the document but it is not printed out in the page.
The structure then continues with <body></body>, an element in which the inside of the web page is treated. Basically, in order not to make a div soup and for the work to be more structured and organized, some <article> </article> elements are used.
The <footer> </footer> element is used to close the page.