Wednesday, January 22, 2014

23 Jan - Changing text and content to my own styles

Unfortunately, I was not in School on the 21st of February, and I could not do anything to my CSS and HTML files due to the fact that I was in an HKSSF Inter-school Athletics event. Therefore, I had to catch up quite a little bit today. Here is what I have gotten so far before I start to work on anything else:

The main CSS style has already been put in place, and also the Navigation panel on the right is quite acceptable. The bright yellow color really fits in with my red background on the middle and left. The blue also provides a light, cool shade so that the font can be read with ease and the reader will not feel uncomfortable when reading it. The font style is Helvetica, and it is quite simple and easy to read in my opinion, although it doensn't have any serifs on it. I might change the font to make it more bold, or maybe change the weight of it soon.

Here is an example of the CSS code I used. I changed the h1, p, body, etc to format it. I changed the alignment of different things, the height, background color, and also the font family as well. I might consider adding more color to the font, etc. Right now I am currently working on the paragraphs and I will consider adding more styles to the CSS if needed to best suit my website.






At the end of the lesson, I have tried to change the default image provided by Ms Marshall into my CD cover. The results were not as I expected it to be. After I searched for a while I found out why:
As you can see, apart from just having the location in the <img src> tag, there is also width and height restrictions so therefore the picture was rescaled and stretched into a different ratio, obscuring the image. I will need to get the ratio of the image and get it to its original ratio next lesson.

Thursday, January 16, 2014

Jan 17 - Using DIV and CSS to create layouts

Today, I have started on making my own website. There was a template that was provided for us by the teacher, and we have all used it to test on working on our layouts. Here is how it looks now:
The padding, margins, and different div's have been used to seperate, and size the different parts of the website. Here is the code i used, where I have learned to use color codes.

Thursday, January 9, 2014

10th Jan - Learning CSS

We have continued our work on Codecademy and we have been learning CSS along with our HTML. Here is what I am up to today:
As you can see, I am halfway done into creating a full website that functions properly.

Here is an example of what I have been learning in my CSS:
We have been learning to add styles into our code. However, it was not as quite staightforward for me because I would sometimes mistake my  brackets for other types of brackets, and also the semicolons were some of the reasons why I would get a non-functioning code!