Coming up...

posted April 03

Thanks to all those who welcomed me in my last post, and thanks for the questions as well! I’ve been compiling a list of potential guides/articles to work on in the near future (spring break starts this weekend! :D) and I’m looking for more.

Here are the current ideas:

A brief coding overview: What’s the deal with HTML 5? How do I/why should I validate, and what’s it mean to have valid code? (This may have an abundance of links as many have been more eloquent than I in expressing the answers to these questions.)
A guide to positioning: Essentially this will take up where this guide leaves off; it will show you the different techniques for arranging and positioning the components of your layout.
Introduction to fancy CSS techniques: Once you’ve got the basics of positioning and color down, there are some more recently developed techniques to add a little flair to your page. This would list these techniques and have links to tutorials on and examples of them, and if necessary, an explanation of the principles behind them.
Textpattern and Swimchick: How do we use Textpattern to run Swimchick? This would probably not delve into the code itself, but just give you an idea of how Textpattern operates, since I don’t think many of you are working with Txp right now. If you want to see code, that can be done, too, but you’ll have to let me know!

Which one(s) do you want to see? Additionally, what other questions do you have or tutorials do you want to see? Please be as specific as possible; it’s much easier to write a guide (or find one) on a narrow topic than a broad one!

53 comments | online news
Read Full Story

Comments

thanks sumaiya!
btw,,the icon pic of yours doesnt show up at the page where u click the title (but it does at HOME)

lauren posted this April 03 * # Reply
Oh, thanks for reminding me! It’s fixed now; my URL was incorrect. :)

Sumaiya posted this April 03 * # Reply
Those sound good, Sumaiya. Can’t wait to learn more about coding! =]]

Jenny posted this April 04 * # Reply
well i actually want to know all the kinds of coding and each’s description. also, their differences.

and the differences among files like .php .asp .html etc.

im really confused about a lot of stuff..im not even sure what i was talking about at the 2nd par.lol!

does php (and all applicable files in the state) have their own place in coding? or is it simply just html coding and it’s really just a file?

i really want to know and understand a lot.
basically, what i need i think is a full guide of basics. i dunno. i think im talkin random stuff. im really hard to understand haha!

‘i need a guide to understand ALL the basics’

if it’s ok?
im really confused..
the CMS thingy..wats that?! lol
i need serious help obviously
if it’s ok..im not really requesting a lot (am i? haha). i just need to understand all the basics of important sections in web,coding,etc.

thanks sumaiya!!

lauren posted this April 03 * # Reply
I’ve started a draft that should hopefully explain everything clearly, so keep an eye out for that. Thanks for the suggestion! :)

Sumaiya posted this April 04 * # Reply
It’d be supermegacool if you could go further in the css department. :) I’m still learning, and a tutorial from <i>you</i> on <i>that</i> would be amazing.(:

Hmm. Tutorials, tutorials… I’d also like to see a tutorial for multi-editing. I know that’s not what’ it’s called though: Like when one is adding an affiliate per say, and one can modify one page, and it will show up on every page?

Something like that. :)
Thanks in advance, and if you don’t get around to it, I understand. :D

tiah posted this April 03 * # Reply
I fail at html. Haha.

Oh, and by the way… I was wondering if it wasn’t too much (Gosh, I feel like a pest, now) but a tutorial on how to do a randomizing section [sooo not what it’s called] sort of like the section of SwimChick where the random quote is? That!

And maybe even some codes would be nice. (:
Anyway, jsyk, you’re awesome! And I’m not just sucking up. :D Honestly! Ahhh, I ruined it, now I sound terribly suckyuppish.

tiah posted this April 03 * # Reply
The random script was done using this tutorial — instead of image tags, Jess just used text (remember to escape properly; there’s a note about it at the end of the tutorial). :)

Sumaiya posted this April 03 * # Reply
Thank you so much! (’:
Ahhh, I’m so excited. :‘D
THANKYOU THANKYOU THANKYOU!!!
Pahaha, you’re going right into the inspiration section on my website. Including the new domain that I’m going to purchase this weekend.

Tiah posted this April 03 * # Reply
Oh, and I forgot to mention: the other bit, where you edit and the change is reflected on all pages, is simply using an include. Here’s a tutorial on PHP includes--of course, your host must allow PHP in order for you to use them, as well as the random script. :)

Thanks for all the compliments, although I don’t really think I deserve them! :P

Sumaiya posted this April 04 * # Reply
Everything sounds good so far. I’m definitely looking forward to all of the things you mentioned in the bullet list! I have nothing more I can think of right now, but I will be looking out for the upcoming stuff!

PS. I thought of something :] Coding for comment pages, like my Wordpress. If you look at my site, the words are so close to the gravatar (in my comments) and I know it’s from no padding, but I cannot figure out how to fix it. That would be VERY nice!

Stephine posted this April 03 * # Reply
Ah, in your case, the issue is margin, not padding. :) Add margin-right to your gravatar image styles and you should be all set!

A quick note about margin vs. padding: padding is on the “inside” of something, while margin is for the “outside.” I think a good visual is this one — let me know if that makes sense to you. :)

Sumaiya posted this April 04 * # Reply
Hey,
how come this website doesn’t have a layout like header thing anymore?
am i the only one who can’t see it?
or is there actually not one..
someone tell mee :P
x o

Emwah posted this April 03 * # Reply
Nah, we did away with that for this layout. It’s not just you! :)

Sumaiya posted this April 03 * # Reply
I’m pretty used to all them, so none of those would be of any help to me, but I’m sure “A guide to positioning” will be of help of most people since I get allot of people asking me for tutorials on containers.
But good luck on them.

Sophie posted this April 03 * # Reply
hey Sumayma…I’d like to know how to work with galacgalleries…they want me to update the version by doing something with php files and i have no idea of wht they are talking about. Or maybe just php in general? I always work with html and some css…i have no idea of what php is.

Serenity posted this April 03 * # Reply
What gallery script/program are you using? I think I’ll be writing a bit about PHP vs. HTML/other coding, but I can’t help you with the gallery without that information.

Sumaiya posted this April 04 * # Reply
omg, i cant wait. these tutorials actually sound helpful :)

clairessa posted this April 03 * # Reply
I like the coding overview and Introduction to fancy CSS techniques.

Amanda posted this April 03 * # Reply
Actually, change in plans, I’d like to see them all. :)

Amanda posted this April 03 * # Reply
I would love to see all of those articles :) I can’t think of any additions right now but I’m sure those would be really helpful.

Harriet posted this April 03 * # Reply
I feel bad for continuously posting… But could you maybe create a tutorial on creating multiple pages for your website. I’ll explain: When you click on resources it will go to a new page. So from for example swimchick.net to swimchick.net/resources

Thanks SO much!

Amanda posted this April 04 * # Reply
I don’t think this warrants a full-on tutorial, at least for now, so I’ll just explain it here. I think what you’re talking about is just a hyperlink, which is quite simple to make. The code is as follows:

<a href=“http://your website.com/blah.html”>linking text</a>

This would output the following:
linking text

All you have to do is make sure that the page you’re linking to exists; if this is to a page on your own website, just make a new page called blah.html and the link will work!

If that’s not what you were asking about, sorry! Ask again and I’ll try to explain whatever it is.

Sumaiya posted this April 04 * # Reply
Actually, that isn’t what I wanted to know, and yes this question probably will not warrant a full tutorial.

This should make more sense.

I’m new at website making, since my previous one was on neopets.

Anyways. How can you make multiple pages for your site, instead of haveing all your content on one page? So for example you can have one page for resources, one for information about the site, etc.

What you explained before was something I alredy know.

Thanks SO much for your help!

Amanda posted this April 05 * # Reply
you go into your sites’s editor and hit “create file” and then add the extension of whatever type of page your creating and go from there.

Kristi posted this April 05 * # Reply
Ah, I see what you’re asking. There are two ways to do this, depending on your host.

The first (and failproof) way is to simply open up Notepad or another text/HTML editor of your choice and put in your code. Save it as an html file (File – Save As – select “All files” from the Save as Type dropdown menu and “UTF-8” from the Encoding menu, and then enter your filename with .html at the end; for example, blah.html. You can then upload the file to your web host via FTP or through whatever file manager they have.

The second way, as Kristi said, is to simply make the file directly in your file manager/control panel/whatever your host uses. With most hosts, there should be a “new file” option someplace and you can just call the file filename.html, put your code in, and you’re good to go! Some hosts may not allow you to do this, though.

Sumaiya posted this April 05 * # Reply
Thanks, that explains it!

Amanda posted this April 07 * # Reply
Amanda, are you serious? O.o

Sam posted this April 04 * # Reply
my heart kind of stopped when I read that, too. o_o but we all have to start somewhere. i actully asked that question four years ago, but it was about linking myspace blogs.

oh, what a circle we beasts make.
pfft, rotflmao. i got all poetic.

tiah posted this April 04 * # Reply
I’m sorry that you find my asking questions offensive, but when you have coded and made graphics for three years on Neopets, where you cannot have multiple pages, you need to know these things. I wish you could be more considerate to people like me. It’s actually quite rude to be like that.

Amanda posted this April 05 * # Reply
I didn’t find your question offensive? And I don’t possibly see how you could have been offended by me expressing my empathy with you. And if you are referring to my statement “pfft, rotflmao” I was laughing at MYSELF, simply because I had said, “Oh what a circle we beasts make.” because I thought what I said was overly-complex for commenting a blog. I find it hard to comprehend how I was being mean in any way, shape, or form. I understand what it’s like to be in similar situations like you’re in, now.

As I stated, I asked that same question before… And I’m asking questions now, still, years and years later. I’m not perfect, I didn’t claim to be. I apologize if I came off the wrong way. And I also apologize to Sumaiya for continuing an unrelated discussion in the blog.

tiah posted this April 05 * # Reply
I wasn’t talking about you, but the girl before… sorry about the comment on your site, i thought you were the other girl…
:( I apoligize again…

Amanda posted this April 05 * # Reply
I’m really greatful for the help Sumaiya is giving us. I’ve joined message boards to gain help, but was always put down or “laughed” at for the littlest things. So yeah, thanks again Sumaiya!!

Melissa posted this April 04 * # Reply
I agree with you, and thanks SO much for your help Sumaiya, but people even laugh at you for things you ask here, for example my post above. People can be really rude nowadays… :(

Amanda posted this April 05 * # Reply
HAHA! Love the quote:

“Don’t make me whip out my copy of Elements of Style. – Sumaiya”

Jamie posted this April 04 * # Reply
I think a coding overview would be good, but for goodness sake don’t just write a few paragraphs and end it with a list of links. Summarize what’s important in those sites then add the links at the bottom for those who are looking for more in depth answers.

A guide to positioning sounds really good though, very interesting

Brittany posted this April 04 * # Reply
I’m not sure that the two options you posed are mutually exclusive. :P After all, isn’t “summarize what’s important” = a couple of paragraphs and adding the links at the bottom the same as “ending with a list of links”?

Sumaiya posted this April 05 * # Reply
Please add some great quick php codes.

irina posted this April 04 * # Reply
I’m not sure what you mean, and more importantly, I’m not proficient in PHP; I can only do very simple things.

Sumaiya posted this April 05 * # Reply
wow that sounds interesting.
I wanna see how textpatterns operate swimchick thing.

Esme posted this April 05 * # Reply
Sumaiya, do you think that you’ll turn this blog into a forum? I think that you should. :) like, “Forum.Swimchick.Net” But, its really up to you, jess, and kat. :D

Oh, and I’d also like to know how it is people do those little…coding things. I think it’s called Image Mapping? I have no idea how it’s done, I think it has something to do with Photoshop, but is there any other way for it to be done manually?

If not, if it’s possible, can you tell me how its done Photoshop, and how I’d put it into my coding?

Tiah posted this April 05 * # Reply
And, also (Gosh, I am so annoying with the “OMG TEACH ME” thing) if it’s not too much trouble, and you still don’t want to kill me yet for bugging you so much…

Could there be a tutorial on how to make image pop-outs? For example, Cindy Pepper does it with her photography here: http://www.cindypepper.com/work

Tiah posted this April 05 * # Reply
The pop-out bit is done with Javascript; it’s a script called Lightbox :)

I’m not sure what you refer to with “coding things”, but image mapping is just a bit of HTML that allows you to link different parts of an image (it was used on the old Neopets sidebar, if you were on there a couple of years ago) It’s not used very often anymore, because it’s not a very accessible method (for instance, if you are browsing with images turned off, which you might be if you’re on a phone or on dial-up, the links wouldn’t show). W3Schools has an example of the code for one; here’s some more info on how to make it for different shapes. To find the coordinates, just copy your image into Paint and hover over where you want each point/corner of the linked area to be; the coordinates will show up in the bottom right of the window.

If that’s not helpful or not what you’re looking for, let me know. :)

As for a forum, that’s a lot of maintenance and such to deal with; I think it’ll be unlikely, but who knows!

Sumaiya posted this April 05 * # Reply
there’s a small portion on how to do image mapping on http://www.neopets.com/~argomgom#cfive2

it’s rlly easy, and does not require ps at allll…

Violette posted this April 06 * # Reply
I think that the CSS article would be a really cool article to read!! I always like finding out new ways to code my CSS.

Stop the Day posted this April 05 * # Reply
Sumaiya…do you have an e-mail address? I feel terrible, and I refuse to ask you another question here, so that you may maintain your sanity. xD

tiah posted this April 06 * # Reply
hey,dis is really gr8 :D…

is dere ne possibility to have live preview of mayspace layouts tutorial???

if yes…den :O it will b awesome…n itz gonna be a hit..xD

if no…awwh okay..will b waiting for dat xD

Renu posted this April 06 * # Reply
I can’t quite decipher what you’re saying exactly, but I think you’re talking about previews of MySpace layouts that actually look like the profile.

I had a really hard time asking around about that, and never got an answer, until I guess-timated it about 8 months ago.

But, all you need is a freewebs, fileave, or ftp account. After you’ve created the style sheet on MySpace, visit the profile, and if you’re using FireFox go to View >> Page source. Copy the entire code, and then go to your freewebs, fileave, or ftp account, create a new page, name it “layout1” or something, paste the code, and save it!

And Voila!! :D

I know that question wasn’t directed at me, but I had to say something, seeing as though I knew the answer. (: lol

tiah posted this April 06 * # Reply
Tiah does have one method of doing it. I just wanted to point out that you can view the source of a page in any browser (Page – View source in IE7, View – Source in Opera, for example), not just Firefox, and that you just need some method of file uploading to a webhost, whether it be on Freewebs or via FTP.

There are certainly other ways to do it as well, such as with PHP, if you had users just inputting their color/font/etc. choices and wanted them to be able to see it. As for a real live preview, that changes as you edit, I believe you’d need to use javascript or AJAX of some nature.

Sumaiya posted this April 06 * # Reply
hey Sumaiya..thanks hun for replying…

like we have in the site itself http://swimchick.net/myspace/myspace-layouts
we can preview the layout here..thats what my question is…how to do that? :D ….i know there r some scripts and layout cms….i even have one :D ..http://www.m2scripts.com/demo/turnkey/layouts/ << dis one….but i dunno if i can use it in wordpress…im just looking for a simple & easy way to preview the layouts ^_ ….hope im not bugging u :D …but it wud b gr8 if u can help by making a tutorial for it :D …. i know many people wants to know abt dis :P

Renu posted this April 07 * # Reply
hey tiah thanks for the reply :)….

i know about copying the code :D …thanks nyways sweetie…i actually have a site (under construction)..i see lots of sites uses preview thing, so im struggling for it :D…emmm….do u mean i have to make a new page for every layout?..that can be messy i guess…i read tutorial for this somewhere it says about adding a preview.php page in every layout for preview….but there were not much details..so i didnt get it… xD

n guess what im also searching for the answer from few months…still no success..but here i can hope for a bright light xD

Renu posted this April 07 * # Reply
Lol, a bright light. xD

Wait…do you mean put all of the previews together, so that there are icons/images to click to get the code? Like on: http://swimchick.net/myspace/myspace-layouts ?

I still can’t figure out EXACTLY what you’re saying/asking. xD

tiah posted this April 07 * # Reply
I have one more question, Sumaiya.
I think that this is my last one, hopefully.

How would I make commenting on all pages possible? Like the new update that Swim Chick has made?

Tiah posted this April 08 * # Reply

Commenting is closed for this article.

Â« it's april YOU FOOL!!! we're ragen! Â»