Sunday, January 10, 2016
Monday, January 4, 2016
Extra Material: CSS3 Transitions, Transforms, Animation
HTML5 and CSS3 made significant improvements in the way web pages are designed. With the advent of HTML5 and CSS3, web design has become much simpler, and the new features that are now available, help us design complex web pages with ease. These cool new features are a part of the expected features in the claimed HTML5 knowledge as a development platform, hence, it is important to learn about them now. HTML5 and CSS3 Transition, Transformation, and Animation will help you take advantage of the real power behind HTML5 and CSS3 and will give you a good grounding for using it in your own web pages.
Helpful tutorials with examples that could be just repeated on your pages or modified to your liking (you already are supposed to have some orientation in CSS)
http://www.w3schools.com/css/css3_2dtransforms.asphttp://css3.bradshawenterprises.com/
https://www.youtube.com/watch?v=IVIcOfQNyAc
A more advanced comparison of transitions vs animations can be found here
http://jsbin.com might be a good way of trying it out
Tuesday, December 29, 2015
Simple introduction to CSS
Before watching this video you have to view the previous one about screen organization!
A simple gentle introduction to some important concepts of CSS working together with HTML can be found in this video.
Here you will also see the continuation of the previous video lecture on best screen organization for work with html, css, and the chosen browser on one screen.
For best viewing you might want to download the video and then view it locally.
A simple gentle introduction to some important concepts of CSS working together with HTML can be found in this video.
Here you will also see the continuation of the previous video lecture on best screen organization for work with html, css, and the chosen browser on one screen.
For best viewing you might want to download the video and then view it locally.
Tuesday, July 14, 2015
How to Organize Your Screen for Work with HTML
The following video shows how to start working on your HTML, how to save it, how to view it in the browser, and how to modify it using a comfortable screen organization with several windows side-by-side.
Saturday, July 11, 2015
How to do the project with real hosting
Here is the best way of doing the project and the online hosting task:
1. Get free 30 day (or 60 day if you wish) trial without any credit card on smarterasp.net
2. After you confirm your email they will send an email with important information like this:
instead of my login name "profabv" you will have yours, but the rest will look similar.
3. Then go to smarterasp.net and log in with your credentials. After that go to your new site (sometimes it might take a couple of minutes to set it up). After logging in, you will see something like this:
notice that your root is site1, which is reflected in the url
4. After clicking on your site you should go to File Manager
5. Choose Go (to your root folder site1)
6. Once inside your root folder create a new folder week2 (like you will be doing for each part creating new folders like W2P2, etc.)
7. Go inside the new week2 folder and upload all practice files from practice files subdirectory that is among the student data files for week 2 that you were supposed to download as described on Moodle
8. Test your project site prototype by typing the url leading to its index.html file in a new browser window. Pay special attention to the need of using your folder name before the file name in the url. The url will look like the following:
http://profabv-001-site1.smarterasp.net/week2/index.html
but use your login name instead of "profabv" to see something like this
9. Now you can start modifying the practice files (Trillium site) to make it look like the chosen project. Have all the pages from the chosen project and add the description page as indicated in the tasks.
After the one-page html task is done - this should be a breeze for you.
Good luck!
1. Get free 30 day (or 60 day if you wish) trial without any credit card on smarterasp.net
2. After you confirm your email they will send an email with important information like this:
instead of my login name "profabv" you will have yours, but the rest will look similar.
3. Then go to smarterasp.net and log in with your credentials. After that go to your new site (sometimes it might take a couple of minutes to set it up). After logging in, you will see something like this:
notice that your root is site1, which is reflected in the url
4. After clicking on your site you should go to File Manager
5. Choose Go (to your root folder site1)
6. Once inside your root folder create a new folder week2 (like you will be doing for each part creating new folders like W2P2, etc.)
7. Go inside the new week2 folder and upload all practice files from practice files subdirectory that is among the student data files for week 2 that you were supposed to download as described on Moodle
8. Test your project site prototype by typing the url leading to its index.html file in a new browser window. Pay special attention to the need of using your folder name before the file name in the url. The url will look like the following:
http://profabv-001-site1.smarterasp.net/week2/index.html
but use your login name instead of "profabv" to see something like this
9. Now you can start modifying the practice files (Trillium site) to make it look like the chosen project. Have all the pages from the chosen project and add the description page as indicated in the tasks.
After the one-page html task is done - this should be a breeze for you.
Good luck!
Tuesday, July 7, 2015
Purpose of the Blog
In this blog I will write reflections on your performance, on grading methods, explain possible task difficulties, provide additional help if needed, etc. Check this blog periodically - it is mandatory and for your benefit.
Subscribe to:
Comments (Atom)