Website Design
The first assignment we have got for course DSL810 is to design our personal website. During my M-Tech I have learned to develop prototype of web interface design using Adobe XD. So developing fully functional website was something that I was keen to learn. I have used several graphics stuff like my own logo, word portrait that I have created for my portfolio.
Basics:
List of software that I have implemented:
- WinScp: to transfer file from local to remote computer. I am using domain provided by IIT Delhi in the directory public_html (publically accessible).I am using host ssh1.iitd.ac.in connected to port 22. The kerberos user id and password provided by IIT Delhi used as login credential.
- Compress png and ImageMagick:The png images (e.g. logo) compressed online using Compress png (ref: https://compresspng.com/) and other images using ImageMagick.
- Sublime text editor:to write the html and css codes. It has unique feature of syntax highlighting using color codes over notepad which is very helpful for debugging.
Besides the classroom learning, I have referred https://www.w3schools.com/ to add some extra features on my website.
Website development:
Starting with html and css
- CSS file named css_website.css has been crated separately to control the layout of multiple web pages (including styles) all at once.
- The CSS file linked to html as stylesheet in the <head> section. Command: <link rel="stylesheet" href="format_website.css">
Creating the header
The header is fixed and common for all webpages. It contains logo, name and horizontal navigation bar. The menu linked to 4 different pages such as home, about, project and assignments.
Subsidebar and dropdown menu
The subside bar added to both about and assignment section. In assignment section, dropdown menu comes with each assignment to replace the table of content.
Challenges:
From 1st template to the final one, I faced several obstacles being a beginner.Some of it are
- Placing text and images on proper position:Elements are positioned using top, left, right and bottom property in css. However, position property need to be set before providing these property, which I was lacking.
- Creating dropdown menu inside side navigation bar:The dropdown button was not working. It was either showing the dropdown content as a side navigation bar or completely hiding as shown. A loop is to be created to toggle between showing and hiding the dropdown contents. For this I have referred https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown
- Fixing the header: The body of webpage was getting placed above the header while scrolling.
The problem resolved by providing the z-index.