![Minimal Photocentric Productivity Blog Banner_20240225_164524_0000.jpg](https://files.peakd.com/file/peakd-hive/kushyzee/23z7ayeeUBrmZJUCSorbxkm1mYbmrBeJ7etUpFZqgzE93JrjWKt2fywJbTmjvSgvmr7SS.jpg) I have been coding for a while now and it has been a very interesting journey because I have learned how a lot of things on the internet work. HTML and CSS are the basic structure of any website you find on the internet and it is fun to see how both work to create beautiful websites. so, today, I will show how a simple login page is built using HTML and CSS.

https://files.peakd.com/file/peakd-hive/kushyzee/23viTbb25m8e7jppYtN9xn4YbrtS15FijDgGJe4ibu5o8NKox9MCHgymXNexpQChxZKvj.png

--- ## Prerequisite - Basic understanding of HTML and CSS --- ## Tools - Visual studio code (VS code) - live server (VS code extension) - chrome browser (or any browser of your choice but Chrome is preferable) --- ## Section 1 - Building the page 1. First, create a folder on your Desktop or anywhere you like, where you will keep the webpage files. I named mine “tutorial” but you can name it anything. 2. Right-click on the folder and select “open with vscode” to open the folder directly in vscode. 3. Click on the “New File” icon to create two files. Name the first one “index.html” and the second one “style.css” ![open-vscode.png](https://files.peakd.com/file/peakd-hive/kushyzee/Eo43LfkMjSqTu9t9YE7anXcLTcHKwxXH3L6ED7btZu6mxd9HjUxcuD6VAPDj1GnBYEd.png) 4. These files are the HTML and CSS files respectively. We will start with the HTML file. click on it to open the file. 5. The file is currently empty but in vscode, you can type the exclamation mark “!” and the HTML boilerplate will be suggested. Press the tab key to add the boilerplate to the page. ![html-boilerplate.png](https://files.peakd.com/file/peakd-hive/kushyzee/23tGRhP9MY9gF1oBAJ5VPUeVqzRq6QX9KK7PLkR8ireiAPgt1TFTF4hYd2Hbz1xC74hr8.png) 6. The `` represents the title of that page and for now, it’s “document”, so we should change it to “Login page”. 7. Just below the ``, add a link to the CSS file we created earlier. ```html ``` 8. Within the `` tag, add a `

` tag. Within that header, add a `

` tag with the word “Zeetech” in it (you can use any other word if you want). This will act as our logo for the page. ![header.png](https://files.peakd.com/file/peakd-hive/kushyzee/23tGRXsJuhx82J5WbHkdaZRmJU3yke7GV15jxEPboPN6xbCU7cVdP7Bhwsma93Xi9YZ22.png) 9. Next, create a div and add a class of “main-container” to it. within the div, add a `

kushyzeena)
Lead image: Personal picture
Edited with Canva
All images used are mine

RE: NEW! Rising Star NFT Giveaway R95 Barney