HTML and CSS workshop
Here i will be learning the basics of using html and css to create my own webpages.
Making a very basic and simple HTML website with a bit of CSS, created with dreamweaver.
we were given some html challenges to complete on the first day which had us making these very simple webpages.
Here art the challengesWorkshop 1 - Introduction to HTML and CSS
Challenge 1 - Create your first webpage. It should feature the following
a title
a heading using h1
a sub heading using h2
a list
3 images side by side
a link to your favourite website
an article which you have found on lipsum.com
Challenge 2 - Adapt your first webpage.
Change the colour of the title
change the font family of the heading h1
change the sub heading to h3
make the list display horizontally with borders and spacing around each word
Put 3 images side by side with a 5px black border around each
a link to your favourite website which shows up as a different colour when you roll over it
make the article more readable by using css styles to change colour, font, line spacing, letter-spacing, word-spacinga
Make sure the page uses correct markup for HTML 5.
Once you have created the page visit
http://validator.w3.org and validate your page markup
Make sure the page uses correct markup for HTML 5.
So this is what i ended up making
here is a basic resizable website i made that also works on phones
-----------------------------------------------------------------------------------------------------------
Making a personal portfolio website
What is a portfolio website used for?
A portfolio website is used to show ones professional and/or personal work to possible employers and companies to potentially acquire a job. It's especially important for freelancer's to have a portfolio website so they can show their work to employers that are thinking of hiring them for their specialties.
how are websites made?
Websites made by web designers nowadays are usually made with media authoring systems like "Dream Weaver", "Brackets" and "Coffeecup" which are web designing code editors to edit HTML and CSS code but for the people who don't know how to use and write HTML and CSS they would use media Authoring systems such as "Wix", "Weebly" and "SquareSpace" which are website creation software that allow people with very little knowledge in markup languages (HTML & CSS) to build nice websites very quickly with drag and drop editing systems.
what is a media authoring system/tool?
An authoring system is a program that has pre-programmed elements for the development of interactive multimedia software titles. Authoring systems can be defined as software that allows its user to create multimedia applications for manipulating multimedia objects.
Taken from the wiki HERE
So basically a media authoring system is any piece of software that allows the user to create anything that software was built for creating. So for example a game engine like "Unity" is a media authoring system that allows the user to make video games, or software like "Microsoft Word" allows the user to write stuff as pdf's and different text files.
What is interactive media authoring?
Interactive media authoring is the process of designing and making an interactive media product such as a website, videogame, interactive art and so on, through the use of an interactive media authoring system. So for example you would go through the process of interactive media authoring while designing and making a website with the use of "brackets", which is a interactive media authoring system to help create interactive media products.
Here is quick image i found online showing the "process" of interactive media authoring
This "diagram" shows examples of creating a interactive media product (on the right, which looks like some kind of slideshow for a biology class) through the use of interactive media authoring systems and input devices (on the left).
Looking at portfolio websites and what they should be composed of
After reading these 2 articles (one & two) it has changed my viewpoint on how a portfolio website should look, originally I was just thinking of making a basic looking website with some cool graphics (basically I didn't think too much into it) but reading those 2 articles has made me think that a portfolio website is all about selling yourself to possible employees and that you should present yourself in the best way possible and keep the website as clean and understandable as possible and make sure that the user will see your work straight away after you have introduced yourself.
I also did some research on some preexisting portfolio websites and i found THIS one which had a great format/layout as the person straight away introduces themselves and then shows their work.
I have now decided to do something in a similar layout but with my own style to it. I also ended up looking at portfolio websites of game dev's but i never really found any good website to get inspired from as i found most of their portfolio's to be quite weak, for example THIS portfolio website of a mobile game dev is good and effective in terms of information but the design of it is very boring and uninteresting.
Making responsive website template
-----------------------------------------------------------------------------------------------------------
My portfolio website proposal
Project introduction
For this project I will be creating a personal portfolio website to a professional standard to be able to showcase my work to potential employers and anyone who might be interested in my work.
Throughout the project I will be researching what portfolio websites should include, I will be designing and prototyping the website to make sure I create the best outcome I can create and I will be creating the final website and upload it to the web.
Constraints of the project
The website will need to look and be to professional standards in order to impress a potential employer, the website will need to be designed with a mobile first methodology and aim to be responsive in order to be viewed on a smart phone, and the website will need to be accessible to everyone through the internet in order to be discovered by people who would be interested.
context of the project
So far the only other portfolio website that i have found which i think has a good design is THIS one, I like this website because it is simple and very effective at showing the viewer what you are all about, it goes straight in with an introduction and then showcases some work that the person has previously done. I really like how effective this is.
Initial ideas for the project
My initial ideas is to look at pre-existing websites made by professionals and get inspired by their design choice and recreate a similar quality website in my own style. and to have the website be accessible with smart phones I will make the website with special techniques in order to allow the website to be responsive and change design depending on screen size. To test my website in different screen sizes I will be using THIS website to see if my website is correctly responsive and works on mobile devices.
Deliverables
For my final website I will need to design and sketch potential layouts for the website, create a paper prototype of the layout I like most, illustrate what the website should look like in Photoshop or illustrator and then once I'm happy with the final design I have got I will get on with making it using HTML and CSS with some potential JS. I will also probably need to create some graphics to add to my website to make it look more appealing, I will also have to look for a good font style that fits the theme of my website.
Targets and milestones
Investigate brief
general research on what media authoring is
general research on what media authoring is
Research existing portfolio websites
Generate ideas
Rough sketches of layouts/designs of the website
Develop ideas
Paper prototype of the website
design the website in Illustrator or Photoshop
design the website in Illustrator or Photoshop
Produce outcome
Make the final website with HTML, CSS and potentially some JS
upload the website to the internet
upload the website to the internet
Evaluate Outcome/ Prototype or Solution to problem
Show the final website to people who would be interested
Evaluation methods
To evaluate the quality of my website I will show it to people who would be interested in seeing it.
---------------------------------------------------------------------------------------------------------
designing the website
So after the research I have done, I have decided that I want to make my website be as simple as possible to understand for people who might not be familiar with the internet. The website will also need to look visually appealing in order to attract people who might be interested in my work.
I'm mainly making my personal portfolio website to promote myself as a game's developer but i will also show my art on some other pages on my website.
On the first page of my website I want the user to instantly learn about who I am and what I have done in the past, so to do this I will need to have a short introduction to who I am and then some kind of list of the games I have made to show that I can make games as a games developer. I also want to add links to my social media websites to allow the user to find alternate ways to contact me and view my most recent work.
I will also have a about and contact page so that people can learn more about myself and know how to contact me in case they are thinking of hiring me or any other reasons.
To come up with some new ideas for the design and look of the website I created some quick thumbnails. This helped me come up with more ideas in how I could make my website.
In all of these design a have a basic structure where I first introduce who I am and what I do then I show the games that I have made and might be making to really sell the fact that I am a Games Dev with skill.
After reviewing all my thumbnails and showing them to a few colleagues I decided that there wasn't one design that was perfect and that I should mix certain designs with others to make a greater design.
Rough sketches and ideas for the website layout/idea that I like.
But it didn't feel good enough yet I wasn't to sure about the navigation bar and certain other elements so I remade this design again and changed a few small things.
After remaking the design I feel much better about the way it looks and I think I should start to design it in illustrator or photoshop to get a better idea.
Phone design of the home page
Refined "sketch" of some of the web pages made in Photoshop
In order to have a better idea of the colour scheme and structure of my website i decided to recreate some of my webpages in photoshop.
This is the main index page that will quickly introduce me and show the viewer some of the games I have made. The introduction text is still subject to change. overall i'm quite happy with the way this looks and I will try my best to recreate it using html and css.
Photoshop design of a game page that shows the info of a game I made, I might need to rework on this as i'm not too sure on the way the text is presented. But overall i think that the final page will look something similar to this.
This is the contacts and about page where the viewer will be able to learn more about who I am and have some different ways to contact me. This is an important page because it allows people to potentially contact me for a job or other reasons. overall I'm quite happy with the way it looks and i think that it would be quite simple to remake using html and css.
----------------------------------------------------------------------------------------------------------------
Making the website
what software will I be using?
To make my final website I have decided to use the code editor brackets as I feel that is very convenient to write html and css code at the same time with it's spilt screen option.
When making my website the biggest challenge would be is to make all pages responsive so that it is easy to use on mobile devices.
Making the main page
The first thing I started working on was making the structure of the website and use some of the code/structure of my previous responsive website template to also have the nice header and footer with a responsive hamburger. I then started to add divs of colour for the sections that will be apart of my website.
Adding the text and profile image box to the introduction section.
I was told by a friend that the image box was unnecessary for the main page and would be more relevant on the about page, I agreed as it made a lot more sense.
I then removed the profile pic box and adjusted the size of the text so it all fitted in the way I had designed it in my sketches, I had a few issues trying to do this but in the end I managed. After that i went on to adding some more elements and text like the art section/button.
fixed a few issues I had with the intro text and i changed the way the art button looked.
Finishing off the main index page
I then finished up the game boxes that will display some of the game I have made but for now i can only really show off "Attack On Harbour" as it is the only well made and most completed game I have made. I went on to then make everything responsive.
And finally I made sure that everything was responsive in order for the page to work on mobile devices.
Making the about and contacts page
I started of with creating the basic colour scheme boxes to create the "about me" section and "contact me" section I then created some container div's to contain the text and image and finally i gave the 2 sections a title. The image for now is just placeholder for when I have a good profile pic i like. And the text in the about me section is lorem ipsum placeholder text.
I the added some contact information text and added some more about me text for later.
This is what I'm planning to write in the about section:
My name is Sam Auber and I am currently an independent games developer who focuses on making fun and challenging games. I mainly work in the Unity3D game engine with C# but I am very keen on learning to use different game engines and programming languages. When it comes to making games I do a bit of everything, I see myself as a "jack of all trades" and my main focus is on making everything work well and look good in order to make a quality game. I'm also very passionate about art, I love to draw and do digital art.
My skills include:
- C# Unity game development
- Photo manipulations, illustrations and graphics making with adobe Photoshop and illustrator
- Cinema 4D animation and 3D modelling
- Web development HTML5, CSS and some Javascript
- simple animations with Flash
Added the social media buttons, about me text and skills list to finish it off. I'm actually quite happy with the way the about & contact page looks and it's also fully responsive.
Making the game page for my game "Attack on Harbour"
I started of with creating the basic colour scheme boxes to create the title and video section and "About the game" section and gave the page the usually navigation bar and footer.
I embedded the youtube video of my game and then added a div to contain the text about the game in the about section.
I later decided that the youtube video would be best placed below the about section text and have the top section used for an image slider, so that the user will first be able to see some interesting images of the game then afterwards learn more about the game then finally watch a clip of how the game plays. I also added a download/play button for when the game is ready for downloading.
I had images with my last image slider and I wasn't happy with it so i changed for a much better one that is a lot nicer and it's called HiSlider.
~~~~~~~~~~~
User review, critiques and comments on my portfolio website so far
I had some of my college colleagues try out and review my website
User1: The website works fine and it looks unique and original very different to a lot of portfolio websites.
User2: The website works very well, the style and layout is basic yet good looking and the social media buttons on the footer of every page is a great idea but I would like to see more of your personal artwork on the website, it also needs a dedicated game page.
User3: Easy to navigate and looks good but the games button in the navigation bar should bring you to a new games page instead of the homepage again and it also needs a page to show off your artwork.
~~~~~~~~~~~
Making the Artwork Page
After getting some feedback from some of my colleagues i decided that it was quite important to have more of my own artwork page on my website instead of just linking it to my Deviantart page.
To make this image gallery I used the same image slider creating tool (HiSlider) I used to create the image slideshow on my Attack On Harbour page. It was a fairly simple webpage to make the only thing that was tricky was making responsive and also make the images look good on a small phone screen.
The importance of clean code
Why is clean code important?
Well apart from the part where it make the code so much nicer to look at it also makes it easier to read and understand therefore making it easier and faster to edit, add and change.
I basically see it as a time saver.
When writing the html and css code for my website I made sure to make it as well written as possible to get as little confusion and errors as possible while making the website.
This is the HTML and CSS code of my index page and as you can see everything is nicely organised.
WebHosting
To host my website I used my old Htmlexperiment website that I have had for the last year now.
It was fairly simple to upload my website and it all works exactly as planned and I didn't run in to many issues.
Final Evaluation
How well do I think I did in this unit/project?
Personally I think I did a pretty good job at creating a personal portfolio website to show off my work and try and sell myself to potential employers, but of course it could be a lot better and there are a bunch of small adjustments that I would of changed and added if I had more time. For example there are some issues with the way certain elements look when displayed on phones that i wanted to readjust.
One of the things i really wanted to add to my website was some background art for all the blue sections on my web pages, I was thinking of having a nice seamless background filled with lots of small blue monsters, I'm not sure why but i think it would of looked really cool.
Originally I planned on making 5 webpages but in the end I only made 4. The one page I missed out on was the page that would show all the games I had made in the past, but the problem with that is that I only have 1 game to show so far so it wouldn't make much sense to create a whole page to show games that is only showing 1 game all by it's self, so I didn't bother make it in the end (and I also kind of ran out of time).
Overall I think I did a good Job at creating a personal portfolio website and i have definitely learned a lot from making this. If I were to make another website again (which I probably will) I will definitely have a much better understanding of how to make it.
No comments:
Post a Comment