Journey in Web Design – Task 2 Completed!

Another week and another task done. I haven’t be able to focus on the task this week as much as I hoped to but I have managed to create a website.  Unlike the website I made previously, this website uses tables sparingly and I started using DIV tags. This was a new area for me and I may of made a few cock ups in the code but everything on the website works.

Web Design Task 2

I created the website using DIV tags. The header at the top was created by creating a DIV area that consisted of 80% of the width. I did this so I could keep the look of a comic book. The height of the header was 150px. The navigation bar at the top of the page was placed there using the FIXED positioning which means that the navigation bar will follow the page when scrolled.

Web Design Task 2 - 4

As you can see above, the navigation bar has continued to stay on the page even though we have scrolled down. I managed to embed a video which I downloaded from my YouTube Channel ( Click here to have a look ) and embed it using a HTML5 Video player. I made the video player dimensions change depending on the size of the DIV area. I change the height and width of the HTML5 video player to 100% so it would change.
Web Design Task 2 - 3

I managed to place one div box next to another ( after some time figuring out and sorting out the dimensions ) and managed to implement a list into the DIV area. It’s been an interesting ride finding out what works and what doesn’t work when it comes to using code inside DIV areas.


Web Design Task 2 - 5

In the image above, I managed to embed a table into a DIV area. I managed to center the images, headers, text and buttons and I feel that I have learnt a lot about DIV tags.

With this task, I feel that even though the website that I created is that visually appealing, I managed to learn more about CSS,HTML, HTML5 and DIV tags. I will hopefully be able to reference back to this in the future when I have to use the dreaded DIV tags again, which I will 😦

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s