Working with HTML and CSS

Having previously worked with both HTML and CSS, the process of coding a webpage is a procedure in which although incredibly rewarding, is also extremely infuriating to me. Knowing this and with the dooming deadline of the 8th of January, I set out to gather the basis of my webpage even though my design has not been completed, so I am not stressed trying to fix things the night before. I have a clear idea of the layout and design requirements so having the framework of my html and css will be helpful and time saving.

I knew before beginning the layout that I should learn firstly how to create a smooth scroll on my anchors so that I could make sure my divs were the correct format for accepting anchors. With the help of this website, I successfully managed to create a smooth scroll in which will be useful in later web design projects as I enjoy the interface a lot.

class=”smoothScroll”

From past experience, I knew that keeping my code neat was something that I need to prioritise as not doing so had caused tears in the past. I also wanted to make sure that the basics of my portfolio were easy accessible on my stylesheet.

9o

By having both the left and right margin auto, it would help with sizing when i come to opening up in browsers and smart phone devices.

I also wanted to insert a Lightbox so I could have the basis of my content on the webpage already. With the help of this youtube video, I was able to achieve a customisable Lightbox to match my current colour scheme.

The Lightbox placement caused a problem for me as when hovered over, the entire content would move, causing the images to expand outside the column which looked unprofessional and sloppy.

However after reviewing the code, I was able to fix the problem and continued to add work to the gallery.

Screen Shot 2014-02-19 at 00.53.17

Overall, I have secured the framework of my portfolio and once the design is done, it will be truly begin to form into a real, functioning webpage.

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