Coding workshop – CSS and HTML

This week, we had a workshop that put all of our coding skills we learnt up till this point to the test. We were shown a webpage on the big screen in our computer lab and we were then tasked to re-create it with the use of HTML and CSS.

We used the coding software Brackets to create the code and make the final webpage. I found this session particularly useful, because it helped me revise and improve my skills. It also reminded me on how to use and implement certain features like the “margin” and “float” functions. The following pictures show the finished lookalike webpage and the HTML and CSS code (respectively) used to produce it.

HTML

HTML

Screen Shot 2014-11-17 at 16.49.55

CSS

In order to help me revise how some of the above functions worked, I needed to access websites that offered tutorials on coding. I found the following websites most useful:

http://www.w3schools.com/

http://www.codecademy.com/

For a first attempt at re-creating a webpage, I felt that it went surprisingly well, and the result is almost identical to the page we saw on the board. After doing this exercise, I certainly felt more confident about coding and the results I can produce with it.

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