Skip to content

samoshaughnessy/accelerate-challenge

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Accelerate challenge

Building the basic code and first steps

When I started to design the website, it was very humble, a liitle diagram of how I wanted it to look like. After creating a basic html file, I began by populating the headers and footer elements. Then I started to create my sections within the body of the page following this I put in the textual information, including headers.

At this stage I probably should've styled my page, but I went on to add photos and kept getting distracted by their impact on the page.

Images, proper alignment with grids and functions

Adding the images was easy and didn't take alot of time, however the creation and alignment of coloumns was a challenge as the pictures would not go into the right coloumn. After a lot of experimentation I figured it out and it was worked wonders. So I began to work on the JavaScript aspect of the page.

Functions and styling

Getting to grips with the terminology of JavaScript was propbably the most difficult part of the site, but it allowed me to generate a library and then display a couple of elements. This means that the page is not overloaded at the begining of loading, people view the site can look at additional pictures in the library by pressing show more.

Styling the page was not easy either, but only due to messy name spaces on my part, in the future I'll keep a better track of my elemeng tags.

About Me

My About Me page contains a header, a brief history section with two coloumns, another section named hobbies with four colomns, a gallery of photos that paginates open and a footer.

Header

At the top of the header is my name, it has a left and top border and is aligned to the left. While the tagline is aligned to the right without a border. Next comes the personal statement section in the header, this section is centered, contains a short paragraph and a contact me button that should open an email to me. This whole section has a background.

Body

The first section in the body contains a brief history, this area is made up of two colomns, the information takez up 2/3rds of the page while the two pictures in the other colomn make up the last 1/3. This area has its own background as well as font colours.

The next section contains my hobbies as elements, this section has four colomns, each colomn has a title, picture and a little text. These colomns also have a background colour.

Gallery

The gallery is the first use of Javascript and displays four padded pictures in a row it also has a button. If the button is pressed then four more pictures will be displayed until there are no more pictures in the album, if this condition is reached an alert saying no more pictures pops up. This section background is the same as the header.

Footer

The footer element contains a small copyright sign and my name, it will decend as the button is pressed. This section bears the same background as the Header and Gallery sections.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors