Student ID: 11253946
INTRODUCTION
My name is Vanessa Elinam Daker, an IT student of the university of Ghana. The purpose of this website is to facilitate easy access to information for current and prospective students within the computer science department.
Information for prospective students, concerning what will be their areas of study over the duration of their degree program, what is expected of them, resources, events among others. The website also allows students to know be familiar with their department heads and seniors. (Staff Profiles)
THE PROCESS
I rebuilt the website from scratch, using a different design. I envisioned something simple but attractive and interactive enough, using CSS, HTML and JavaScript. I did take some of the information from the official site, however, it was text only.
HOME PAGE
For my first page, I used HTML, CSS and JavaScript. I used CSS to design the page's template. I gave colors, alignment, margins and even transition colors to my sections, navigators and body and headers. I also used that to hide texts, make my 'feature-box' and edit images.
I used HTML to add images and fill the feature boxes with information. JavaScript, I used for the click action that would reveal the text, using 'toggle text' and for other animations as well. Then I made my footer.
RESOURCES PAGE
The resource page contains information, tools and links to practical resources. In CSS, I made a grid, and applied a reasonable gap between my containers. Each of my resource cards came with the same padding of 20px to define the space between the element and the border, giving it a sleek finish. I also added some transitions with JavaScript, so that everything does not look too basic.
For my HTML, I made sections and used dividers, along with classes. This was to provide adequate spacing. My classes "resource-card" was to create a consistent visual style for each of the cards.
STUDENT'S SHOWCASE
The purpose of this webpage is to display projects done by current and past students of the department. I put three of the "best" works on display.
I started out with my usual CSS code, that I have been using for most of my pages so far. Then, I made project cards, with project images within each card. I then created a header and some selecters to edit the header message. JavaScript took care of the animations.
Then I proceeded to add all the information inside the cards with HTML. I finished the page off with my usual footer.
CATALOGUE
The catalogue of this website shows a few of the courses offered at the computer science department in year two. For this page, I barely used any JavaScript. I used CSS to create the page template. I create 'course-item'. Then HTML did the rest of the work by filling in the information. I cloned my usual footer from my other webpages.
STAFF SPOTLIGHT
The purpose of the webpage is to showcase the faculty of the computer science department, along with their positions.
My staff spotlight page is virtually identical to the student showcase, only with different colour grading. I used "staff cards" whose design were very similar to the project card design of the previous page. In them, I linked images of all the lecturers easily available on the internet. And then, I added my usual footer.
INTERNSHIPS AND JOB OPPORTUNITIES
This websites shows students and graduates what opportunities they have for employment and internships. It is made with simple CSS and HTML. CSS for borders, margins, sections and the body. HTML to fill in information using the division tag. There is a bit of JavaScript in there with the "Apply Now" button, however it does not lead anywhere. Yet. But if this were a launched website, it would certainly lead to those job opportunities.
ANNOUNCEMENTS
I used CSS to design my 'news-items' and the background of the whole document. Using HTML classes among others, I filled in the relevant information. I used JavaScript to show the text on clicking the "READ MORE" button and to do the opposite when clicking on "READ LESS". I did this by using 'ToggleDetails'. Then I cloned the usual footer.
GALLERY
This is a very simple page that only required CSS to make the borders and margins and some animations and then HTML to fill in the information. It ends with the header. The purpose of this page is to display the gallery of the computer science department to whoever may be visiting the site.
CONTACT US This is a page that allows the user to send e-mails to the department. JavaScript is used to display an "alert!" message and also with a function, it allows the message to be sent. The design of the boxes is done by CSS. There is a little HTML to fill in some information.
ABOUT PAGE
The about page simply consists of a few sections in containers that give information about the department. I used dividers to separate the content.
For my footer, I added contact information and links to social media profiles using lists both ordered and unordered.
This project has been very challenging for me. Although I consider myself a good programmer, petty mistakes made it so hard to not get frustrated and just rage-quit. However, I am a better programmer for it. Adding images to headers was a huge obstacle for me, but after working relentlessly, I have managed to get the hang of it. Also, this project had helped me learn how to use git better. Well, gitHub, to be honest. It is much less complicated; just like using a normal website. I also finally understand repositories, commits, and pull requests. It was so difficult for me to get my pull request up, so much so that it delayed my work, but now? I even help people when they ask. So all in all, although this project has been tasking, it has been very fun and educative.