The purpose of this tutorial is to get you started accessing the web server and to check that you can access all the computing resources you need to start university. There may be some issues - we can help sort them out during Welcome Week, so don't worry. You can refer to this in upcoming weeks if you need reminding how the web space works. You will locate your personal web space on the web server Brighton Domains- and publish a basic test web page there.
STEP 1: Access MyStudies
MyStudies is the university's VLE (Virtual Learning Enviroment). Each module will have its own page, with a broadly similar layout. You can access it directly (MyStudies) or via MyBrighton (your portal for all university information. Open MyStudies and find your modules:
Move to My Course and Modules page, find the link to CI435 - Introduction to Web Development
Access the CI435 module area, and find -
The Semester One* folder - this will contain the teaching material for each week's - a lecture, links to online lab tutorials and other learning materials.
The Assessment folder for web development module
The teaching schedule and other module information, such as the module specification, teaching staff contact details etc.
* What is a semester? At university there are three physical terms: Autumn, Spring, Summer, separated by holidays. There are two logical teaching blocks (exact dates of both here):
Semester One (October-Jan)
Semester Two (Feb-June)
Some modules take the whole academic year (usually two contact hours per week); some are done in one semester (usually four contact hours per week). Expect to do about that much again as independent work. Each semester consists of:
Eleven Teaching Weeks
One Revision Week - most coursework will be handed in by this point
STEP 2: Locate your personal web server space on Brighton Domains
All computing and digital media students are provided with a personal web space, hosted on a web server. This can be found at Brighton Domains, which is accessed via a web interface. You will be using this location for your web work during semester 1, so that you can publish the web pages that you make online and test them on devices such as a smartphone.
Click on Get Started and log in with your university name (mine is jh1033 - what is yours?) and password.
You need to be fully registered at the university to access BrightonDomains. It may take up to 24 hours after completing enrolment for you to be given access to this and other services. If you cannot access Brighton Domains after 24 hours, please contact IT Service Desk here: Service Desk Online System - include your (actual) name and short-form user name. We can sort this out in Welcome Week if you can't do it before.
You will now be in the Dashboard, shown below.
This shows you a suite of web-based tools that you will have access to during your university life. Explore this window to see what tools you have.
Scroll down until you see Files and click on File Manager.
Click on File Manager to show the screen below. You can manage your server files and folders here. You will put your webpages in the public_html folder. Make sure that you are in the public_html folder before the next step.
Step 3: Create a simple test page into your web space (2 methods discussed)
There are many different ways to work with files on a web server. This week we will cover:
Direct text entry on server (simple, but not efficient)
Creating files offline, then uploading them manually (better as can work offline / will have backup copy / can choose text editor)
In a future week, we will cover using FTP (File Transfer Protocol).
1. Direct Text Entry On Server
Check that you are in the public_html folder. In the top left-hand part of the screen, click on the button. Create a file called index.html in the public_html folder.
You should now see the index.html file in the folder. Right click on it and select Edit. Copy and paste the text below into your new file. Note the indentation (and colour) in the image here makes it easier to see how each pair of tags is matched (more later).
Create an html file called index2.html. Change the text in the body section – perhaps Hello Universe.
NOTE: make sure that you can see file extensions when you are developing. If you don’t see them, then you might think that you have renamed a text file index.html, but you can’t see the hidden extension and it’s actually called index.html.txt – and won’t be handled in browser like you expect.
WINDOWS: Go to Folder > View > File Name Extensions, ensure that the Show File Extensions box is ticked. Examples here (Microsoft, 2023)
MAC: Use File > Get Info then expand the Name and Extension section. More information here (Apple, 2023)
If you double-click on index2.html, it will open in your default browser, looking like this:
NOTE the file address - it's in file view, on your local computer.
Go back to the brighton.domains file manager, and navigate to public_html. Click on the upload button in the menu ribbon. Drag and drop index2.html to the server.
You want to view it through the browser, so go to step 4, below.
Step 4: View the page thorough a browser, not through file view
Open a web browser (we recommend Chrome / Firefox / Edge).
The URL (Uniform Resource Locator) or web address for my page is:
jh1033.brighton.domains/index.html
You can use this URL from any device that can access the Internet to show the page.
The URL for your page is:
YOURUSERNAME.brighton.domains/index.html
The first part (before the /) takes you to your public_html folder. If I had put the page in a sub-folder called ci435, the URL would be:
jh1033.brighton.domains/ci435/index.html
NOTE: change the file name in the address bar to index2.html if you want to view the second file that you created.
Use this URL on another device to see your page on the server.
Why it is important to see the page on the server? Because, particularly for more complex pages - which yours will become - they might look different. EXAMPLE: most web servers are LINUX based, which is case-sensitive, so an image called myImage.jpg won’t be found if it’s looking for Myimage.jpg, or myImage.JPG. You should aim to have a page on the server by the end of the first teaching week - we are here to help you in tutorials!
Browsers have built in web developer tools such as the Chrome Developer Tools (DevTools); Firefox Developer tools; Edge Developer Tools. These browsers are also updated frequently support the latest web standards (more later). Have a look at these pages and try to use the tools to view your page elements (building blocks) - bit of independent study here.
Edit the file contents again (see step 3) (e.g. change the words that you can see), save it and refresh the browser. You should see the new words. This will be your workflow - edit (your choice of method) > save > (upload if neccessary) > view from server.
Congratulations - you have now made a web page and published it on the web. It doesn't look much, but in the following weeks you will be learning everything you need to know to make responsive web pages that meet the latest web standards. You should now delete these two pages as they were just to test your setup worked (index.html and index2.html). Use the right-click menu or select and use the top level page icons to delete the file(s).
Further work
Once you have completed this tutorial you are ready to move on to the first CI435 web development tutorial. You can wait until after the first lecture if you prefer.
If you have any questions email the module leader or ask your lab tutor. The contact details for the teaching team can be found on the CI435 area of MyStudies.
Check that you are in the 
in the top right hand side of the editing window.
