Dr Martin White
Mobile Web 3D Applications
Creating a Responsive Mobile First Web Page

Copyright By Assignmentchef assignmentchef

Creating A Responsive Mobile First Web Page
Table of Contents
Introduction3
Code editor and libraries3
Prerequisite knowledge3
Live Feedback Site3
Tutorial Style3
Different technical approaches4
Part 1: Site folder structure5
Warning, your site might not work on the Web Server6
Part 2: Creating the page structure with a fluid grid layout7
Evaluate the task ahead7
Examine the comp7
What to do if things go wrong8
Create a fluid grid page with Bootstrap13
Create the header16
Convert the navigation menu to a 3-bar icon20
Create the Footer23
Part 3 Insert the laboratory 1 contents27
Insert the image content27
Part 4 Create the CSS styling rules33
Responsive web design CSS3 media queries33
Create the CSS rules for the mobile main contents34
Install and declare fonts35
Continue to build your custom.css file38
Get used to using Chrome Developer Tools to examine your site40
Create the CSS rules for the mobile header logo and navigation menu44
Style the logo44
Style the navbar46
Style the navigation menu47
Style the navigation dropdown menu50
Create the CSS rules for the footer52
Style the footer and its contents52
Create the CSS rules for the other screen break points54
Tidy up your CSS59
Part 5 Publish your website Lab 161
Part 6: Set up Git and GitHub with Visual Studio Code62
Appendices63
Appendix A Getting Started63
Set up your coding environment63
Required Libraries63
Integrating with GitHub63
Prerequisite knowledge63
Live Feedback Site63
Appendix B Some Technical Details65
Different technical approaches65
Appendix D Best practices for naming files and folders in a website66
Appendix E Rationale for fluid grid66
Appendix F Setting up your Bootstrap template67
Appendix G Create a fluid grid page with Bootstrap68
Appendix H Convert the navigation menu to a 3-bar icon69
Appendix I Inserting Image Content70
Appendix J CSS media queries72
Appendix K Working from home73
Appendix L Using Git and GitHub for to manage your code73

Introduction
Welcome to the Part 1 of this tutorial on creating a responsive mobile first web page. You may recall on the Canvas page where you downloaded this tutorial from that we suggested two approaches to acquiring the skills and knowledge needed to complete this tutorial:
1. You could find a video tutorial online, e.g. from YouTube, and there are plenty available, and follow that to achieve the same or similar results. Here is one, for example:
https://www.youtube.com/watch?v=9cKsq14Kfsw
2. Alternatively, follow this tutorial in detail, where you can follow the instructions carefully and read the embedded learning materials as you proceed
3. Or, follow the instructions and catch up on the learning materials later.
Whichever approach you use, there is an optional tutorial quiz (go back to Canvas) that you can complete to solidify your knowledge.
Code editor and libraries
If you do not already have a preferred coding environment, you will need to set one up. We recommend using Visual Studio Code. Further, all tutorials will exploit the Bootstrap front-end framework extensively. Also, this tutorial requires no previous knowledge of a full web development stack you will learn by doing in the lab (or at home) using the provided Canvas based learning materials. For a longer discussion on setting up your coding environment, etc. See the Appendix A for more details.
Prerequisite knowledge
This tutorial requires no previous knowledge of a full web development stack you will learn by doing in the lab (or at home) using the Canvas learning materials. For a longer discussion on prerequisites, etc. See the Appendix A for more details.
Live Feedback Site
This laboratory tutorial gives you, in advance, a completed version of the end result located at the Live Feedback Site to enable you to compare your work with an end result if you get stuck. For a longer discussion, etc. Live feedback site links can be found on Module Canvas home page. See the Appendix A for more details.
Tutorial Style
This tutorial is developed from scratch, as we develop the code, we have written the tutorial in parallel.This produces more of a narrative style tutorial rather than a simple set of instructions; so, to reduce the overall length will try, where we can, to:
Move some of the learning material detail (as opposed to instructions) to the Appendix and provide, where appropriate Canvas quizzes to test your knowledge and understanding of key learning materials
Provide links, e.g. in the document, to alternative third party (usually YouTube) videos that outline the same or similar key concepts.
Provide some of our own video clips on key concepts where suitable third-party videos are not available.
The module convenors will complete and update all the lab tutorials each year again to test they still work, particularly after library updates. A particular consequence of this is that when we get coding, we sometimes change the CSS or some other code aspect, and then have to backtrack to update the tutorial text. This can lead to the odd mistake or anomaly in the tutorial text. However, there is no substitute for turning up to labs where you will find the module tutors who can correct any such anomalies, and we deeply appreciate your feedback to make the tutorials better.
Different technical approaches
There are many different ways we could use to develop a simple responsive and mobile first web 3D application (3D App). However, we have to choose an approach, as such we are choosing to develop mostly from scratch exploiting a small number of key libraries such as Bootstrap, and a using responsive and mobile first approach, rather than hybrid or native approaches. See Appendix B for more details.
Part 1: Site folder structure
In lab_0, you have set up your folder structure for the module, it may look like the Figure 1:

Figure 1: The initial proposed site folder structure

You can see here that to organize your work for the other labs in this module you only need to add lab2, lab3 and so on. We anticipate, as your results from a previous lab are completed that, by and large, you will build on these in the following weeks lab requiring a copy of the previous lab and then to move forward by modifying it. Further, in Part 6 of this lab 1, we will store our work in a GitHub repository.

You will need to download from the Canvas module site the resources for this lab and insert them into the Lab 1 folder. Organise your images and text into an asset folder as indicated in Figure 2.

Figure 2: Adding some assets to the Lab 1 site structure
Youve now defined a local site folder for your Mobile Web 3D Applications (3D App) Lab 1 site. This is where you will keep your working copies of your 3D App pages on your local computer (e.g. on the Home Share/3dapp/lab1 or your Laptop, and in my case I am using Dropbox).
Warning, your site might not work on the Web Server
You should take care when naming files and folders on your site when developing on a PC which is case insensitive and porting your files to a remote web server, which is likely to be Unix based and case sensitive. See Appendix D for more details.
Part 2: Creating the page structure with a fluid grid layout
The second part of this tutorial focuses on creating the fluid grid layout for your responsive mobile first web page, which is a core component of your 3D App (i.e. a web application with interactive 3D content). This section explains how to create a CSS-based fluid grid page layout (a pre-requisite for your 3D App). A fluid grid page layout determines how your page will appear in a desktop, tablet or smartphone browser showing, for example, the placement of menus, images, and other kinds of content utilizing image scaling, font resizing and CSS3 media queries.
Appendix E discusses how the rationale for creating a page structure with a fluid grid layout in more detail, dont forget to read that information.
For this tutorial, our fluid grid layout will exploit Bootstrap, which is, and I quote the most popular HTML, CSS and JS framework for developing responsive, mobile first projects on the web, or so they say!
So, you need to be careful about which versions of Bootstrap you use.You may come across code snippets that you want to adapt that only work with previous versions of Bootstrap. You should use the latest stable version of Bootstrap and can certainly use the previous years version shown on the Live Feedback Site.
Now, it is highly likely that you will hunt around the Internet for open source code snippets with which to build your larger applications, just remember to cite them.
Evaluate the task ahead
The first steps to creating a website usually begin on a piece of paper or in a graphics-editing application such as Adobe Photoshop. Graphic designers usually sketch out a piece of comprehensive artwork (also known as a comp) for the website to show it to the client and make sure that the initial ideas for the site meet with their clients approval.
Examine the comp
A comp consists of any number of page elements that the client has requested for a website. For example, the client might say, I want to have a logo at the top of the page, a navigation that links to these other pages, a section for an online store, and a place where I can insert video clips. Based on that discussion, the designer begins planning the layout of the site and creates sketches of sample pages that fulfil the clients requirements.You are given just such a list of requirements for your 3D App assignment refer to the assignment section on Canvas.
However, although this isnt a web site development module, we are going to exploit a full web stack to build our 3D App. Figure 3 shows an example comp of the required Lab 1 page layout. In this particular case, the comp could simply have been constructed in Photoshop, or it could have been sketched with paper and coloured pens I actually just took a screen shot from a previous years Bootstrap results for this lab to simulate a Photoshop comp.
We can see from the comp that the graphic designer has provided you with a design that includes a number of content areas. These content areas include a top banner, with logo and navigation, a main 3D viewing area, with a Coke image as a backdrop, that will display your 3D models.Beneath the main 3D area are three columns, each with an image at the top the image can act as a button link to a new page or to load the corresponding 3D model, and the text area below. At this stage, the comps contents may be undecided; you now need to layout this design in HTML5 and style it in CSS3.
What to do if things go wrong
When learning new techniques, or working with unfamiliar software, its easy to make mistakes.
The most common causes of mistakes are accidentally skipping a step in the instructions, or miss-spelling an ID or CSS property. If your page doesnt look the way you expect, dont ignore it and plough on, you must retrace your steps to make sure you did everything as instructed. The lab tutor does not have a magical wand to fix your code, well actually they do, its called, heres one I created earlier, located on the Live Feedback Site. You can look at the results there as a last resort to bug find, but although the latest this year version might not go live until a week or two after the lab session, there is always last years version available.
So, generally, you will find the all lab results in the Live Feedback Site so you can compare and contrast your results.
But, sometimes, the best idea is to start again from scratch. It can be frustrating, but you can learn a lot from your mistakes. Of course, if you do get stuck, call for help, the course convenor, lab tutor, or lab assistant will be there in the lab every week.

Figure 3: An example comp of the Lab 1 web page layout
So, lets build your 3D App landing page similar to that shown in Figure 3 we will use Bootstrap 4.3.
Head on over to the Bootstrap site and download the libraries, then install them into your project directory. Dont forget to have a read around the Bootstrap Get started notes and make a decision on whether to use Bootstraps managed dependencies, a Bootstrap CDN or a compiled build of Bootstraps CSS and JS.We tend to use either a CDN or a compiled build, more usually the compiled build. We suggest you download the compiled CSS and JS build.
It should download as a zip file containing a css and a js folder, which each contain all the variations of Bootstrap CSS and Bootstrap JS that you may need. You will probably need only the bootstrap.js, but you can use the minified version, and I think you should only need the bootstrap.css (or the bootstrap.min.css) versions of the CSS files but no harm in leaving them all in the css folder for now you can clear out the ones you dont need later.
Instruction: Install the css and js folder into your project directory at the root, i.e. same level as your assets folder, and while you are doing this add a folder for some fonts in your assets folder, see Figure 4.
As we move forward through the module labs we will build up the assets folder to include other media, e.g. 3D, videos, whatever.

Figure 4: The lab 1 file structure with the new assets/fonts, css and js folders
That is about all we need for now, so lets open up a code editor to start developing our code and markup. In this tutorial we will use Visual Studio Code, see Figure 5 for the Lab 1 site opened in Visual Studio Code. Here, you can see the overall Mobile Web 3D Application module folder structure, which correlates to that shown in Figure 4.You will be building code and creating media assets for Labs 1 through to Lab 7, Lab 8 will be an example of a very basic 3D App, and Lab 9 will be a Coca Cola based 3D App continued as a partially completed Bootstrap version of Lab 6, but exploiting the MVC design pattern, which you explore in Lab 7 and 8. Note, each week you will add lab2, lab3, and so on, folders. AS the labs are completed each week we will usually add these new results to the Live Feedback Site.
You can see from Figure 5 that we have installed all the Bootstrap CSS and JS files that we downloaded.However, you only need the bootstrap.css or bootstrap-min.css and the bootstrap.js or bootstrap-min.js. I suggest to use the bootstrap.js and bootstrap.css versions, because there is some feature we need later that is left out of the min versions! You can remove the rest or archive them away somewhere, or just leave them where they are for now.

Figure 5: The lab 1 file structure opened in Brackets
We can now start to develop the fluid grid layout in HTML5 using Bootstrap. First we need to get a basic template up and running. If you look on the Bootstrap Get started site you will see they have a starter template you can copy.
You will have to do some digging a round to install the libraries for JQuery, popper and Bootstrap. For example, Bootsrap downloads as a zip file and you simply grab the files you need and put them in your css and js folders, while for the Popper and JQuery you can use the CDNs or as we prefer, I simply opened the CDNs and copied the contents into new files and installed in the css and js folder, then tested they worked ok.
Heres an example that you can use, stick it in your code editor and tidy it up, and save it as index.html, see Figure 6.

Hello, world!

Note, you will see that first we tried out the CDNs for JQuery and Popper, then created the local versions and installed them.
For more details on setting up a Bootstrap template, check out Appendix F. If you decide to use the CDN, you will have an HTML template like that shown in Figure 6, but note the libraries versions have advanced.

Figure 6: Your new index.html initial template.
So, once you have setup your initial HTML template as shown in Figure 6 check it works on a web server.Here, you can use your Home Share/public_html/lab1 directory as discussed in Part 1, i.e. copy over your file structure to your Home Share/public_html/lab1.In which case, you will access it through something like:
http://users.sussex.ac.uk/~martinwh/3dapp/lab1/
Your path might be slightly different, for a start use your own username, obviously.
Alternatively, if you are working from home, perhaps on your personal laptop, then you can install a web server such as XAMPP, WampServer for a PC or MAMP for a Mac and check it works on your localhost, see Figure 7, and the path might be:
http://localhost:8888/3dapp/lab1/

Figure 7: Hello world on your localhost
Clearly, this isnt an exhaustive test! Ok, lets get on with creating the page structure, for the comp given in Figure 3, with a fluid grid layout.
Create a fluid grid page with Bootstrap
Bootstraps grid system allows up to 12 columns across the web page, which can be grouped into a wider column, e.g.2, 4, 6, 12, etc. You do odd columns as well, e.g. 3, 5, 4, and mix it up! Because the Bootstrap grid system is responsive, these columns will re-arrange depending on screen size.
For a more detailed discussion on fluid grid in Bootstrap see Appendix G. Also, here is a very good YouTube video describing Bootstrap fluid grid layouts: Bootstrap 4 Grid System Explaind! Note, here they are using Bootstrap 4.0.0-alpha, and they have added some custom CSS.
To design your layout, it is often useful to jump over to somewhere like w3schools and use their Bootstrap grid examples where you can try out different layouts and then reuse the code. So, if we look at the comp in Figure 3 we can see that we will need a number of block elements that include:
A header that contains a logo based on text, not an image, and a navigation bar.
A row that contains a background main image with a floating text box.
Another row that contains three columns with an image in each.
Another row that contains three columns with text aligned under each image and a button in each to link to other information. However, in this case we dont use a Bootstrap row because we want the text to stay underneath the associated image when we shrink to smaller devices. If we make the image 100% width of the column, then the text has to float beneath the image.
And, finally a footer that contains some copyright information and links constructed from awesome fonts.
The layout is designed to be responsive maintaining the same layout for desktop and larger tablets and rearranging to single column for smaller tablets and mobiles.
Dont worry about the header and footer yet, focus on the main contents, put these contents in a Bootstrap container class you can use a Bootstrap container or container-fluid class, but later if you use a container fluid class you will need to make sure you have enough background images for each media query break point. For now, I am going to use a Bootstrap container class.
That should be enough information to go and use the w3schools site to get the grid layout designed. You should end up with something like that illustrated in Figure 8. Try mo

CS: assignmentchef QQ: 1823890830 Email: [email protected]