NESA(Nigerian Economics Student Association) is an association of ecomomics students together for their welfare. As the president of the association, I have deep passion to allow every student a platform for social impact leveraging on what the internet has to offer. Thus, I have taken it as path towards my intended goal by creating a website for my association; building on it to get better with useable applications for my students as I learn Web programming using python and javascript. As I progress in this course, I will improve the state of the website to include more features and become more interactive as the day goes by. This project has seven(7) files made up of html,css,sass and a bootstrapped html file. Read the details below.
This is the first file that I created on this project. In it contains the main and basic construct on the page being supported by a separate css stylesheet to customarily design the page. Although, for the sake of illustration and meeting the project goal, I embeded some of the styling functions and attributes into the code lines especially for more particular designs. This page allows users to move from one section to another using the table of contents and the "Click/Here" links allows you to visit other pages like the signup page and nesa excutive page which contains a table of 3 NESA executives and their role for the purpose of illustration. One of the links will redirect you an online facebook page of Policy Analysis and Research Forum(PAREF). This was made possible using the #id and .class funtions to create special attributes and a unique identity for different sections of the page. The "Table of Content" and the "About" section demonstrated the use of ordered and unordered list attributes and also shows their how they are nested.
This is an abridged version of the index.html file. It contains a bootstrap link which allows a different web interface from the index.html. I made use the bootstrap "button" and the alert component. In this file, I also made more use of the css selector for some particular styling of the webpage.
Here I used sass to demonstrate the variable, nesting and inheritance attribute on top of css. Although compiling them on seems problematic on my command line but github automatically compiles it.
The album.html demonstrates columns for layout purposes using Bootstrap’s grid model. On it are some amazing pictures inserted in each grid space.
Here is where the scss file is compiled
This is the signup page whose link is attached at the bottom of the "NESANAU HOMEPAGE". It has a form that receives users email, name, and gender inputs. The gender inputs has a dropdown option for male or female. This was made possible using the "Datalist" html function.
This file contains most of my styling attributes with at least five different CSS properties, and five different types of CSS selectors. This helps to keep other files more tidy since other files are linked to it for styling reference.
Although I am still new to web programming about two and half weeks into it, I have learnt significantly from the CS50 web programming course. I am keen to learning and to see that this project becomes the reality of my dream to create for students a veritable platform to host their distinctiveness.