Welcome

Welcome to Workshop 1 of Web Architecture. Today you're going to build a personal website which will allow you to share all your personal projects and visualisations. We've made sure you've got all the tools you need on the machines in the lab but if you're using your own personal machine make sure you have the Chrome browser installed and that you have a text editor that has syntax highlighting enabled. We'll be using VSCode - https://code.visualstudio.com/download - throughout the course which is available for Mac Windows and Linux but you can also use the following editors as well if you already use them. Notepad++ http://notepad-plus-plus.org on the Windows machines, if you have a Mac you can also use Atom https://atom.io, which is free, or Sublime Text http://www.sublimetext.com (paid but free to use for 30 days). At the start of the workshop we will cover the basics of each editor and how to use the tools to develop your website.

As I mentioned in the lecture, a website is just a group of files on a remote server that the browser requests and renders on the screen, phone or tablet. The basic structure of every website is the same: you have a folder for the style sheets, a folder for images and the individual html pages that contain the information you want to share with the world.

Create a folder somewhere in your local directory called "myWebsite" (this is called the site root) which has the following structure: (– represent folders, the rest are files – this is called a directory tree)

Example Site Structure Folders to create

Once you have these files and folders created, download an image from the web and put it in the img folder. Open the new files in your text editor and start creating your website, a good place to start with is index.html. Grab a copy of the lecture slides to use as a reference and if you need any help with tags or attributes then have a look at http://www.w3schools.com to see if you can find what you're looking for before asking a question.

Also have a quick search on Google for the answer as well framing your question as:

Tags to search for

Doing this will make you a better developer in the future and enhances skills in problem solving as it will train you to understanding what's happening within the process. Also try and avoid copying and pasting answers from other websites. Use the code samples given as a reference and type the text into the file. In programming, by typing the code you'll start to learn how structures are built and how they are referenced in other files. Ultimately, you'll learn faster. You will not learn anything from copying and pasting someone else's code! If you're really stuck then of course, ask away, that's what were here for.

The following sections give you an idea on how to design your page and feel free to either copy the design, use as a starting point or design your own page from scratch. If you are having difficulties translating this design into HTML, just take a pencil and start drawing boxes around the elements, making sure you start at the side of the page. This will help you break up the page into div elements.

Repeat the same design for the ABOUT, PROJECT and GROUP Pages and experiment with lists, tables, and the other elements you have been taught about today. Keep the top and bottom of each page constant to make your site consistent when the user clicks your links. Also try and embed your favourite YouTube video in your about page for extra practise. If you want to jump ahead, maybe try and add a Google Map if you're really adventurous (we will cover this is later weeks).

Install the Live Server Extension in VSCode

Live Server is particularly useful for web development, as it provides a local development server and allows us to see how our website will act when uploaded onto a web server.

Using LiveServer

To install the Live Server extension in Visual Studio Code (VSCode), you can follow these step-by-step instructions:

Using LiveServer

Using LiveServer

That's it! You've successfully installed and used the Live Server extension in Visual Studio Code. It's a handy tool for web development as it simplifies the process of live previewing your web pages.

Home Page to create (index.html)

This the HTML page I'd like you to create. First sit down and work out the blocks you'll need to create and where they appear on the page. Take a piece of paper and draw the boxes (or divs) on the page and then, using the lecture notes, translate that into HTML. Think about using headings, paragraphs and identify how you'll create the spacing of the menubar at the top of the page.

If you need blocks of text to do the design then use Lorem Ipsum - https://www.lipsum.com to create random paragraphs of latin text quickly to copy and paste into the page.

Once you've got the element structures then move onto adding your CSS style rules.

This is the example homepage

When you start adding your CSS rules start with making small changes and build up the rules. F5 (shortcut to reload the current browser page) will be your best friend today. Once you've got your page all ready, copy and paste the files so that you create your ABOUT page, PROJECT page and GROUP WORK pages. Link them together using <a></a> tags and fill in the content about you.

Congrats, you have your own homepage.

Some Notes on Useful HTML tags

<!-- [Comment] -->
-- Used as a comment and wont be rendered by the browser
<hr />
-- Horizontal line which spans the whole page
<p></p>
-- Paragraph of Text (A div is not allowing inside a p tags, see span
<span></span> -- Inline element that allows positioning of individual text
elements inside a paragraph

Useful CSS Rules

// -- Comments in CSS
border: 1px solid black; // Use with a div to see the area rendered
margin: 0px 10px 0px 10px; // Shortcut to define margins – N W S E (T R B L)
border-radius: 4px 3px 6px 10px; // Gives a div round corners
margin: 0 auto; // Center a div or element automatically (need width)
font-family: Arial; // Only system fonts available.

// Why not have a look at Google Web Fonts: https://www.google.com/fonts/

What is GitHub?

We will be using GitHub a lot in this course across all modules, so if you've not signed up for GitHub yet, then now is a great time to do so!

GitHub is a website and service that allows developers to store, manage and collaborate on code. It also allows devs to track and control changes to their code bases over time using a tool called Git, which is an open-source version control system. You'll learn more about this in other modules, but for the moment, all you need to know is that GitHub is a place to view and host code.

Sign up for GitHub

To get started with GitHub.

Creating your first repository

Now it's time to create your first repository in GitHub. We will create a special repository that is the same as our username and give our profile page a bit more personalisation.

As you get more skills and perfect more technologies, you can add badges to this profile to show off your skills to the rest of the world. Just rerun through the https://gprm.itsvg.in/ web app and copy and paste the code to your profile repository.

Create a GitHub.io Page to publish your profile HTML page

GitHub also allows you to publish HTML and Javascript code files to the web, and they'll host the website on their own GitHub.io domain. They host the files and serve them to users who request them. So we will create a newly hosted website for the profile page you created today.

Create a GitHub Pages site

Great you've now got a repository to store your site in. GitHub Pages will use this repository to store your website files. The system will look for an index.html file to display as the homepage of your new site. You'll now need to upload your HTML files and images into the repository so that they'll be accessible to the public web.

To upload your pages.

Once committed, the website should be ready to view. If you ever need to upload more HTML files or images etc., then just edit this repository, and your changes will appear on your website. However, it's best practice to edit locally and then commit changes to the public repo when you're happy with your changes.

Enable your GitHub Pages site

Amazing! That's, you now got a personal website on the internet, and everyone in the world can see it!

See you at the next session!