Posts Tagged ‘beginners’

How to Make A Website (and get it up and running!) PART 1/3

Tuesday, February 16th, 2010

Hey guys, this is my first tutorial, teaching you how to make your own website as well as upload all the files and make the pages function correctly, etc. Hopefully you can learn a few things from it. (sorry for my voice, I had a really bad cold at time of recording.)

If you have any questions feel free to reply and ask, or message me and I will reply.

This tutorial is aimed more at beginners, so if you’re looking for more expert methods you might want to find a new tutorial, or perhaps skip through pieces of this one. I know I used some basic methods, not to say I don’t know the more advanced ones, but as I mentioned this is for beginners.

Before everyone starts asking, i’m using WindowsBlinds to theme my windows, the theme is OpusOS (customized to black), and to record i’m using “My Screen Recorder Pro 2.3″.

FOR SMARTFTP:

http://smartftp.com/

FOR DREAMWEAVER:

http://www.adobe.com/products/dreamweaver/

FOR PHOTOSHOP:

http://www.adobe.com/products/photoshop/family/

Thanks for watching, I hope you learned something. Don’t forget to keep checking my website, www.trportfolio.net for more tutorials in the future!

(By the way, in case you missed it… “Least but not last.”

Haha, i’m an idiot.)
——————————————-
ATTENTION EVERYONE:

Addressing a few FAQS:

Do I have to use 1and1?
–No, there are tons of other great hosts out there. Just make sure they have FTP, otherwise uploading your images will take forever.

What about Freewebs?
–I do not recommend freewebs. You cannot have any php (used for login systems, blogs, etc), no mysql (used to save information, like usernames and passwords), and no FTP (used to upload files quickly and explore your directory freely). You can use freewebs and sacrifice the features above instead of paying about $3.00 a month, but like I said, you will only be allowed to upload 1 file at a time.

Can I use any image for slicing?
–Anything that you can open in imageready (which is pretty much any image file) can be sliced.

Are there alternatives to these methods?
–Of course there are, this is just a great way to learn. If you dislike coming across all those table expansion problems and such in dreamweaver, you can always make each image one at a time and create the tables yourself.

Is there a simple way to avoid the stretching and distorting of my website in dreamweaver?
–Yes, but its a little painstaking and a bit tougher to do. If you have a long image that is a gradient or a solid color, rather than keeping that image there, you can…
a) For solid colors, just find the color. Then, delete the image and make the background color of that section the same color.
b) For gradients, if it is a vertical gradient, make an image that is (1px by ?px, ? being the height.) What you can now do is rather than having one giant image gradient, you can have 100 of these side by side to create the same effect. This is a useful method because if you need to expand the width of your page now, you can just keep adding the small 1px pieces.

Hopefully this giant post helped a few people.
——————————————–

Duration : 0:9:42

(more…)

Basic HTML and CSS Tutorial. Howto make website from scratch

Wednesday, December 9th, 2009

You can put your site on the web using a free host

http://blog.jimmyr.com/List_of_Webhosting_Companies_17_2008.php

Yeah, it’s long. #1 requested tutorial on my page is how to make your own site though. I guess it beats those “learn html in 24 hours” books in any case. See the freehosts below on how to put your page online.

w3 html and css

http://www.w3schools.com/html/

http://www.w3schools.com/css/default.asp

Simple HTML/CSS Layout Examples

http://blog.html.it/layoutgala/

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

http://www.mycelly.com/

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Simple CSS Formatter

http://csstypeset.com/

HTML testing Sandbox

http://htmlsandbox.com/

CSS cheat sheet

http://www.google.com/search?hl=en&q=css+cheat+sheet&btnG=Search

HTML Cheat sheet

http://www.google.com/search?hl=en&q=html+cheat+sheet&btnG=Search

Group that standardizes html

http://www.w3.org/

MetaTags

http://www.google.com/search?hl=en&pwst=1&sa=X&oi=spell&resnum=0&ct=result&cd=1&q=meta+tags&spell=1

doctype

http://www.google.com/search?hl=en&q=doctype&btnG=Search

Adding Images as backgrounds

http://www.w3schools.com/css/css_background.asp

RGB Color
You can indicate color by using RGB mode too. eg. #336699 is a nice blue google likes to use. It stands for 33 red, 66 green, and 99 blue in hexadecimal. Here’s a RGB color picker

http://www.siteprocentral.com/html_color_code.html

Domains cost money, like $10 a year usually or less. I’m not going to endorse any registrars.

CSS rounded corners

http://www.google.com/search?hl=en&q=css+rounded+corners&btnG=Search

Change the look when printing (media)

http://www.w3.org/TR/REC-CSS2/media.html

CSS Popular Pages

http://del.icio.us/search/?fr=del_icio_us&p=css&type=all

http://del.icio.us/search/?fr=del_icio_us&p=top+css&type=all

HTML Validator

http://validator.w3.org/

CSS Validator

http://jigsaw.w3.org/css-validator/

Some decent text editors

http://www.context.cx/

http://www.pspad.com/

http://notepad-plus.sourceforge.net/uk/site.htm

http://www.jedit.org/

http://www.scintilla.org/SciTE.html

http://www.notetab.com/

html forums

http://groups.google.com/group/alt.html/topics?lnk=gschg

CSS Forums

http://csscreator.com/?q=forum/

Info about “Lorem Ipsum” often seen on template pages

http://en.wikipedia.org/wiki/Lorem_ipsum

blah

http://www.bbc.co.uk/blogs/radiolabs/2009/01/how_we_make_websites.shtml

http://arbent.net/blog/css-tips-that-every-beginning-developer-should-know-about

CSS Transparency
IE
filter:alpha(opacity=50);
Firefox
-moz-opacity:0.5;
kde based browsers
-khtml-opacity: 0.5;
Safari
opacity: 0.5;

@@@{
“Group”: “Programming”,

“JumpPoints”: [
{ "Description": "Standardizations Rant", "time": "04:21" },
{ "Description": "List of Intervals and their note Distances", "time": "5:20" },
{ "Description": "Using TrainEar.com", "time": "5:32" }
],

“Subtitles”: [
{"locale": "EN", "long": "English", "url": "http://youtube.jimmyr.com/subs/K3kC_lYLAZw_en.srt" },
{"locale": "ES", "long": "Spanish", "url": "http://youtube.jimmyr.com/subs/K3kC_lYLAZw_es.srt" }
],

“Related”: [
{ "id": "afgyNp5HueQ", "description": PHP Tutorial" }
],
“Tags”: “HTML Tutorial, Learn HTML and CSS, CSS Tutorial, html video tutorial”
}

Duration : 0:39:19

(more…)