LAB 3


                                    

                                    LAB 3


 Part I – Reviewing this week’s lectures

    PAGE LAYOUT
  1.  Cells can be spanned across rows and column in a table by the use of a span factor and span operator. These is described with code and example below;
           Span factor = <n> ,
           Span operator = + 
                To make a cell span more than one column, we use the colspan attribute. A typical example is illustrated below;
        
<table style="width:100%">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
<td>M</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
<td>F</td>
</tr>
<tr>
<td>Jack</td>
<td>Dorsey</td>
<td>42</td>
<td>M</td>
<tr>
<td>Steven</td>
<td>John</td>
<td>37</td>
<td>M</td>
<tr>
<td>Mary</td>
<td>Benson</td>
<td>47</td>
<td>F</td>
</tr>
</tr>
</tr>
</table>
        Then we have something like this





2. Coding Tables 

                    Positive; Improves ones knowledge of coding
                    Negative; Coding table is a bit technical, and requires proper knowledge of the process

      

  Cognition

 3. University Website in USA      
  1.    Alaska Christian College    (https://alaskacc.edu)                       
  2.    University of Alaska Fairbanks (https://uaf.edu/uaf/)                       
  3.    University of Arkansas Fort Smith (https://uafs.edu)                         
  4.     Athens State University (https://www.athens.edu)               
  5.    University of Alabama (https://www.ua.edu)               
  6.    Caltech (https://www.caltech.edu)                


 4. From the analaysed website above the common feature observed are; 
                Eazy to navigate
                Images on the websites are flexible
                Dynamic content
                They have landing page

5.  University Website in Ireland            
  •  Atlantic Technological University (https://www.atu.ie/)
  •  Dublin City University (https://www.dcu.ie/)
  •  Technological University Dublin (https://tudublin.ie/)
  •  Trinity College Dublin (https://www.tcd.ie/)
  •  University of Galway (https://www.universityofgalway.ie/)
 
6.   From the analaysed website above the common feature observed are; 
            Clear Navigation
            Interactive content 
            Student, alumni, donor personas
            Responsive design

7.     
    a.     Flat Design is a user interface design style that uses simple 2 dimensional elements and bright colours. websites that uses flat design includes; 
   
     b. Glassmorphism is a type of design which uses properties of glass to enhance a design, it  emphasizes light or dark objects, placed on top of colorful backgrounds. Website that uses flat design includes dribbles (www.dribbles.com), Microsoft and Apple.
     
    c. The difference between Glassmorphism and Neumorphism is that; while neumorphism is all about subtle contrast and solid colors and use of shadow, light and colour pallets, Glassmorphism goes a bit more about transparency, multilayer approach with object floating in space, vivid colours, a subtle light border on translucent object.

Comments

Post a Comment

Popular posts from this blog

LAB 1

                                             LAB 1 PART 1   Answers to Question 3 Two interesting observation I found in question 3a was the distinct understanding of the  difference between Wireframe and Prototype. Wireframe  is described as a skeletal framework in which a design is molded into. They are represented in form of sketch, lines, which provide the bases and layout a digital design is laid on. It is less detailed, can be done using pen and paper or specialized software like Wirify by Volkside and  Freehand by InVision . While, Prototype  is an essential part of a design process that depicts the possible outcome of a design and details how the design will look like. Prototype is well detailed, more or less like a mockup or model of what is expected of a design. A prototype represents the product but not the final product itself. Softwares like Sketch, Invision are used for prototyping. Wireframing and Prototyping are two important steps in a design process that helps make de
Read more

LAB 2

Image
                                               LAB 2  PART II  – Using <meta> in an HTML5 page   1.    Four different  uses of meta tag are;   Meta tag is used to set viewpoint   Meta tag is used for description  Used to denote author To specify title       2.  PART III  – Search Engine Optimisation (SEO)   2. Four SEO Guidelines when designing a website My title tag must be descriptive and relates specifically to my page All unnecessary pop-up should be removed My domain name must be concise and effective Site structure and architecture must be well outlined 3. The two codes below will help improve my website  <meta name ="description" content ="These is the official website page for the best animal hospital in the country"/>   <!doctype html>  <html lang "en">  <head> meta charset = "utf-8">  <title> Fish Creek Hospital</title>         
Read more

LAB 4

                                                                                                                                                                  Lab 4 Part I – Coding a Fish Creek Website 2.       Using the HTML validator for the Fish creek website 11 errors was observed, two warnings, later, I was able to fixed all the errors afterwards. For the CSS file, no error was found. 3.      I tested my code with Opera, Google Chrome and Microsoft Edge Browser, all ran smoothly.  No issues. 4.        I tried the game till the 4th level. It's an interesting and tasking game. The game refreshes and broaden my knowledge of CSS Part II – Web Development Tools  1.  The developer tool is used for inspecting and preview loaded html, time it takes to load.  To check for the responsiveness of a website i.e. how compatible it is with mobile, tablet, desktop view.  It can also be used to check performance and gives developer more flexibility. In some cases  it serves as a debugger.  
Read more