Everything we see on a website is a result of the combination of HTML and CSS. With these two languages, we will have the skills we need to bring our website design to life. I built this simple website using web development fundamentals, including HTML5 and CSS3. I took reference from ColorLib - an amazing hub of WordPress themes and while undergoing this learning process, I understood the structure of a basic website, as well as how to change the way a page looks and is laid out.

Process:

As mentioned, I took reference from one of the ColorLib's beautiful WordPress themes/templates - Riddle. ColorLib incorporates WordPress for building a website. Before building a website, I dived into the rudimentary building blocks.
1. HTML stands for Hyper Text Markup Language. It is used to give websites structure with text, links, images, and other elements.
2. CSS stands for Cascading Style Sheets. It is used to change the appearance of HTML elements.
I learnt the basic anatomy of an HTML element and a CSS element.

The declaration defines this document to be HTML5
The HTML element is the root element of an HTML page
The HEAD element contains meta information about 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

A CSS rule-set consists of a selector and a declaration block
The selector (H1) points to the HTML element you want to style.
The declaration {} block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name (COLOR) and a value (WHITE), separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

1. Software Requirements

Atom is a free and open-source text and source code editor for macOS, Linux, and Microsoft Windows with support for plug-ins written in Node.js, and embedded Git Control, developed by GitHub. Atom is a desktop application built using web technologies. I used Atom Editor for easy editing HTML and CSS files.

WinSCP (Windows Secure Copy) is a free and open-source SFTP, FTP, WebDAV, Amazon S3 and SCP client for Microsoft Windows. Its main function is secure file transfer between a local and a remote computer. Beyond this, WinSCP offers basic file manager and file synchronization functionality. For secure transfers, it uses Secure Shell (SSH) and supports the SCP protocol in addition to SFTP.

2. Customized Theme On Need Basis

After understanding the basic site structure and acquiring knowledge about HTML and CSS, I started going through the ColorLib Theme and customized it accordingly. I made changes to the main HTML page (index.html), including the CSS (style.css).

As an instance, I changed the Logo Text from 'Solid Black' to 'Rainbow Gradient', thereby constantly modifying the CSS (style.css) for various other fundamental elements like text and images.

3. Added New Links For More Content

After customizing the theme as per my requirements, I followed the layout of current webpages to build new tabs in the website that could showcase more information. I created the 'Assigments' and 'Projects' Tabs from scratch keeping in mind the basic principles and techniques of building a website. I followed the HTML and CSS Guidelines to lay out the site structure peacefully.

As an instance, I divided the row area into two columns and added the data (Image, Title, Date, Description) sequentially in the two columns, with a button through which the viewer can view the complete article.

4. File Upload To Web Server - PrivateWeb IITD

To connect to the IIT Delhi Web Server, I logged in to WinSCP with the institute's UserName and Password with the Host Name and Port Number as 'ssh1.iitd.ac.in' and '22' respectively.

After logging in, I created a folder with the folder name 'private_html' as the PG students have only access to the website within the campus and copied the HTML, CSS, JS files including the font and image files from the local directory (left side tab) to the server (right side tab).

After copying the files to the folder, I can now access the webpage within the IIT Delhi Campus through http://privateweb.iitd.ac.in/~dds196017

Result: