Interactive Webpage Tutorial
With the help of Web Designer Mag, I've been able to follow through an intermediate tutorial and create a template for a website. Eventually I am hopeful of using this layout as a basis for making my portfolio website at the end of this unit. The link to this tutorial can be found here, it was suggested on Blackboard as a Medium difficulty Hand code tutorial with using HTML5.
The process of creating this webpage went smoothly however I felt that this tutorial missed out some key features of web design (such as css) and didn't really teach me some of the basics of a web template. From around pages 2-4, most of this tutorial consisted of grabbing snippets from a photoshop file and just positioning them around a page, personally I would've preferred to use sophisticated CSS3 features such as box-shadows or button stylings. Furthermore, I didn't really grasp a sense of how to put a web structure up with HTML, it just showed me a block of code and said for me to put it in. Personally, if I was to learn how to make a webpage with HTML/CSS I'd use a website such as codecademy.com to help me.
The process of creating this webpage went smoothly however I felt that this tutorial missed out some key features of web design (such as css) and didn't really teach me some of the basics of a web template. From around pages 2-4, most of this tutorial consisted of grabbing snippets from a photoshop file and just positioning them around a page, personally I would've preferred to use sophisticated CSS3 features such as box-shadows or button stylings. Furthermore, I didn't really grasp a sense of how to put a web structure up with HTML, it just showed me a block of code and said for me to put it in. Personally, if I was to learn how to make a webpage with HTML/CSS I'd use a website such as codecademy.com to help me.
Below are a set of images to prove that I fulfilled this task, the annotations are not apart of the website itself. I will also be displaying the various images I cut from the initial design document along with the HTML and Stylesheets.
Web Template
Html Structure
CSS Design
Images
No comments:
Post a Comment