Web Technologies Coursework

Web Technologies Coursework. INST0007: Web Technology Dr Karen Stepanyan Term 1.

TABLE OF CONTENTS. Introduction. 01. The aims, features, summary and contents of the website..

01. INTRODUCTION.

AIM. Currently, COVID has disrupted the travel plans of many passionate travellers . My website aims to share my passion for travelling. I offer travel tips, advice and stories that can re-ignite a traveller's passion and inspire them to plan their next dream vacation..

Features and Content. Clear navigation bar to find intended information. Contact email provided for any help or advice. High resolution images. checkbox to include user opinion. Contact and feedback form. Built in links to start planning your trip Helpful information about top destinations to inspire travellers and Useful tips/advice..

Home page that has a navigation bar, introduces me and my interest. Has travel images to inspire users..

Providing my top tips for travellers and informing about essentials to pack providing useful information..

Design and adopted Technologies. T he design of the website is developed considering the user in mind at every decision. responsive navigation bar - enabling users to easily browse content and locate what they are looking for. consistent layout- with similar heading and fonts to facilitate easy reading. T he form elements - engages the users making them feel valued, and providing support. A clear logo - on each page helps the user recall the brand to build a deeper connection with the website. C lear images- engages the users and improve their experience on the website T his was possible through the available technologies: Proto.io to build a wireframe and plan an effective layout. Adobe logo maker to design a relevant logo. HTML to create these engaging web pages. CSS to style each page making it consistent and effective. Internet provide valuable resources for support when a problem arises. Web testing technology for evaluating the websites..

02. PLANNING AND RESEARCH.

PLANNING AND RESEARCH. Existing websites Templates Copyright free images W3Schools tutorials YouTube videos Travel destinations.

Tips md My Experiences Unrem ipsum dolor sit amet. consectetur adipiscine elit. Fusce convallis metus id lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit Fusce convallis pellentesque metus id Lacinia Nunc dapibus pulvinar auctor Duis nec sem at orci commodo viverra id in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing eLit. Fusce convallis metus id lacinia. Nunc dapibus pulvinar Duis Sem at arci Viverra id in ipsum. Lorem ipsum dolor Sit amet, Consectetur FuSCe id lacinia. Nunc dapibus pulvinar auctor. Duis nec sem at orci commodo viverra id in ipsum..

03. DEVELOPMENT PROCESS.

DESIGNING THE WEBSITE. RESEARCH. This stage involved researching templates and tutorials to build a deeper understanding..

DESIGNING THE NAVIGATION BAR. t ext-decoration: none;.

text-align: centre;. float: left;. display: inline-flex;.

04. LEARNING ACHIEVEMENTS.

LEARNING JOURNEY. positioning elements Designing a navigation bar New properties in CSS (text-align, flex, justify-content) Applying link to an image Different weighting in CSS Making a website responsive for different screens. Attribute placeholder for form elements..

SOLUTION. I tried using the property float and inline but the text was still under the image. I watched YouTube tutorials for solutions such as creating divs and using flex properties or inline tags. All my research was useful but unsuccessful and I was recommended to embed the img tag within the p tag, which worked..

SOLUTION. Researched on W3Schools and watched YouTube tutorials to understand the process of making a site responsive from scratch, applied @media queries for 4 different screen sizes changing the desired properties thus, the elements don’t overlap in smaller screen sizes and the format is appropriate for larger screen sizes..

LEARNING EXPERIENCES. ● Discovered various technologies for wire framing and designing my logo. ● Enhanced my knowledge by applying all my previous knowledge to build a deeper understanding. ● Struggling and researching to solve problems learning new knowledge. ●Informative to ask for help from TA and gain a fresh perspective. ●Learned the importance of considering user-centered design. ● realised Importance of planning and research before building a website as it was useful..

05. LIMITATIONS AND FUTUREWORK.

Limitations and existing technologies. Contact forms.

Future work. Learned massively about HTML and CSS which would be helpful towards building my knowledge in future modules. In the future I would like to overcome my limitations to improve my website and any other future work. I aim to strengthen my knowledge by learning about new technologies to apply to future work and modules. I would like to utilise my newly learned knowledge and build upon it..

THANK YOU FOR LISTENING, HOPE YOU LIKED MY WEBSITE.