Year 1
I had two main modules in which I learned web programming:
- Creative Programming 1
- Website Development 1
- User Experience Design
Creative Programming 1
In this module, I learned about the rules and basics of programming using a language called p5.js. We did three main assignments.
Beware Flashing. Colours flash in Assignment 1 and 3. FLASH WARNING!
| Assignment 1 (FLASH WARNING!) | Learning about variables, loops and shapes. I animated a bit using for loops. It is a Halloween themed design |
| Assignment 2 (FLASH WARNING!) | This is a design with more interactivity with the mouse, a slider button, and choosing the speed of an object that can be moved with the arrow keys |
| Assignment 3 (FLASH WARNING!) | This one has even more animation and is Christmas themed. It has many interactive objects and has a video that can run in the background. |
Website Development 1
This module helped me to learn more HTML and to understand some CSS. I learned about classes and IDs.
Assignments
These are the assignments I put together based on all the labs I did during this module.
| Assignment 1 (Hobbies Website) - Part A | This assignment was my first website. We had to make one about ourselves and our hobbies using HTML and CSS |
| Assignment 1 (Hobbies Website) - Part B (Adding some extra style) | I learned more about borders, tables and asides so I added more to my first assignment to make it more interesting to hover the mouse over |
| Assignment 2 (Using Semantic UI) | An assignment where we have to make a website for a club. I made up a club called Emboldened Bakers |
Lab Work
In these labs, I learned about HTML and CSS step by step. This is my work from the entire semester.
| Lab 1 | |
|---|---|
| Main HTML Tags | Learning about the basics of HTML |
| Lab 2 | |
|---|---|
| Formatting Text | Learning how to bold and italicise text |
| Text Size, Tag Order, Inserting Symbols | Learning about the proper order to put tags in and what sizes they are |
| Adding Images | Adding images to a page with an alt |
| Learning to Validate HTML | Making a page to validate to ensure it works perfectly |
| Lab 3 | |
|---|---|
| Adding Links 1 | Adding links as a navigation bar |
| Adding Links 2 | Adding links inside a page |
| Lab 4 | |
|---|---|
| Using CSS | Learning how to add CSS to a HTML page |
| Applying Font and Text Styles | Learning how to change the appearance of text with CSS |
| Styling Links | Adding colour to different types of links with CSS |
| Lab 5 | |
|---|---|
| Classes and IDs 1 | Adding colour and bold to text with CSS classes |
| Classes and IDs 2 | Adding colour and sizes to text with CSS IDs |
| CSS Combinators | Using descendant selectors to alter quotes |
| Adding Lists | Learning about ordered (ascending and descending) and unordered lists |
| Lab 6 | |
|---|---|
| Creating Tables | Learning how to create tables with varying sizes of columns and rows |
| Styling Tables 1 | Adding hover and colours to tables |
| Styling Tables 2 | Adding stripes and controlling the size of tables |
| Background Images | Making the body background and image with floating text |
| Lab 7 | |
|---|---|
| The Box Model 1 | Making boxes using html CSS styling |
| The Box Model 2 | Making boxes using html CSS styling with borders |
| Semantic Layout 1 | Organising text and navigation using Semantic UI |
| Semantic Layout 2 | Organising text and navigation using Semantic UI - full width version |
| Lab 8 | |
|---|---|
| Semantic UI 1 | Organising blocks of text using Semantic UI grids |
| Semantic UI 2 | Organising blocks of text with images using Semantic UI grids |
| Lab 9 | |
|---|---|
| Semantic UI Elements | Learning how to mix around the appearance of sections with Semantic UI |
| Semantic UI Tables | Learning how to make a table visually with Semantic UI (Functionality is show in Web App Development for this) |
| Lab 10 | |
|---|---|
| Semantic UI Tabular Menu | Learning how to make a tabular menu appearance for the navigation |
| Semantic UI Dropdown Menu | Making a dropdown menu for a music website with Semantic UI |
| Semantic UI Cards | Learning how to make information cards with Semantic UI |
| Lab 11 | |
|---|---|
| Semantic UI Forms | Learning how to make forms with different types of input with Semantic UI |