This is the P2PU Archive. If you want the current site, go to www.p2pu.org!

From GIMP to xHTML and CSS

This course is complete. Subscribe to the announcement list for updates.

From GIMP to xHTML and CSS

Wouter Cox's picture
Course organiser: Wouter Cox
No of Seats: 
80
Course Status: 
Completed

Members

mcsweenyjm's picture
mcswe
Marcos Hernandez's picture
Marco
Michael  McGinn's picture
Micha
mihneawalker's picture
mihne
Javier Ramallo's picture
Javie
Ben Hengefeld's picture
Ben H
Allen Hsu's picture
Allen
Noel Gomez's picture
Noel
Owen Rossi's picture
Owen
Michael Davies's picture
Micha
Carlos C's picture
Carlo
Travis Starnes's picture
Travi
Randi Miller's picture
Randi
Arash Dave's picture
Arash
Raul Brito's picture
Raul
Riyaz Mohammmed's picture
Riyaz
Robin Martin's picture
Robin
roccomicciche's picture
rocco
Rodney Weis's picture
Rodne
roopesh vaddepally's picture
roope
Richard Swallow's picture
Richa
Troy Sand's picture
Troy
Sébastien Vigneau's picture
Sébas
Scott Prindle's picture
Scott
Yasmin Oplado's picture
Yasmi
Create a website in xHTML and css: make a design in GIMP, slice it, code it.

Summary

Contents
 

A. Create a rough sketch of the design

B. Page layout and color scheme

C. Creating the design 

D. Slicing the design

E. Coding the webpage


Planning (subject to change)

Day 1: creating the assets (youtube videos 1 - 6, see Course Material)
Day 2: creating the design (youtube videos 7-12, Course Material)
Day 3: coding the design: structuring it
Day 4: coding the design: styling it - without the images
Day 5: styling it: applying the images to the design
Day 6: Using Web fonts from the Fontsquirrel library
Day 7: Answering questions and Course Review

Schedule/Syllabus

Comments

I just pasted the code if

Randi Miller's picture
Randi Miller
Thu, 2011-01-13 08:45

I just pasted the code if that is alright. I did not see a way to upload the files...

I ran into the same problem.

Carlos C's picture
Carlos C
Thu, 2011-01-13 08:57

I ran into the same problem. I zipped my directory and uploaded it to a third party then just pasted the URL to the file. Hope this helps.

Me too.. i just uploaded my

zeus camua's picture
zeus camua
Thu, 2011-01-13 10:03

Me too.. i just uploaded my zipped folder and just pasted the link of the file.. well i think Mr. Wouter Cox was able to received the file XD

Hi, you can send me a mail

Wouter Cox's picture
Wouter Cox
Thu, 2011-01-13 11:25

Hi,

you can send me a mail with the files at wouter.cox@gmail.com, preferrably in a zip file. Or if you have web hosting somewhere, you can post the link.

Hello there, I just sent my

David George's picture
David George
Thu, 2011-01-13 16:57

Hello there, I just sent my sign-up task through the apply form. I did receive an acceptance email. Just wondering if I need to do anything else. I could put the files up on my web server if you need them. Thanks again... looking forward to working with you all.

Well, I guess that means I

Nicholas Matlaga's picture
Nicholas Matlaga
Thu, 2011-01-13 19:49

Well, I guess that means I was accepted. So, hi everybody! I look forward to working with all of you, especially our friend Wouter Cox. Speaking of which: I used HTML strict in the signup task, as opposed to xHTML. That was OK, I presume?

There's not a huge huge

adam davis's picture
adam davis
Thu, 2011-01-13 19:56

There's not a huge huge difference between xhtml and xml:

http://www.w3schools.com/xhtml/xhtml_html.asp

it's good to know the differences though.

(and hi everybody!!)

Yeah, i know, not much of a

Nicholas Matlaga's picture
Nicholas Matlaga
Fri, 2011-01-14 00:02

Yeah, i know, not much of a difference. But hey, figured I should make sure it was OK.

You can find the template in

Wouter Cox's picture
Wouter Cox
Thu, 2011-01-13 20:00

You can find the template in the Syllabus/Course Documents, under "Basic Template we will use". Or get at: http://www.webstandards.org/learn/reference/templates/xhtml10s/

I applied on the form and

Alias Tagami's picture
Alias Tagami
Thu, 2011-01-13 22:22

I applied on the form and sent my files to wouter.cox@gmail.com. hopefully I have applied correctly. I was somewhat confused on the application form. I hope I applied properly and that I'm admitted.

Hello, everyone... er... world.

You can use a free host

Yamit's picture
Yamit
Tue, 2011-01-18 21:55

You can use a free host service for uploading. I used 110mb.com.

I don't understand why you

Arturo Farfan's picture
Arturo Farfan
Thu, 2011-01-20 00:32

I don't understand why you ask for things about CSS if there is no way to upload files directly.

Hi, if you mean for the Sign

Wouter Cox's picture
Wouter Cox
Thu, 2011-01-20 17:36

Hi,

if you mean for the Sign Up task and/or course, it's true that you can't upload files. You are all encouraged to choose your own way of working. You can keep the files on your hard disk and mail them to me when finished, or you can use an online website/service to put them, there are a few (Dropbox, Google Docs, ...) that are free. I know it's not perfect and at times inconvenient, but there should be enough places where you can put your files online.

Wouter

Wouter, Thanks. This is the

Emeka Nwankwo's picture
Emeka Nwankwo
Sat, 2011-01-22 21:00

Wouter, Thanks. This is the course I need to improve my web skill set.

I coded each page (.css and

Elisha Bird's picture
Elisha Bird
Sun, 2011-01-23 01:50

I coded each page (.css and XHTML) and pasted them into the editor, but for the image, I had to upload it to photobucket.com and then paste the copied url into the text editor's 'image' input tool. I also e-mailed the files to the instructor. Hope it all works.

I am having hard time with

Emeka Nwankwo's picture
Emeka Nwankwo
Tue, 2011-01-25 14:45

I am having hard time with Paste as and New Pattern. It tried severally times , it never worked with my GIMP 2.6 on Windows box... The script-fu popup didn't even come up at all. What is it that I am doing wrong?

- check if you have a

Wouter Cox's picture
Wouter Cox
Tue, 2011-01-25 15:09

- check if you have a selection active and are on the right layer
- copy (I believe it's under Edit->Copy)
- Now do 'paste as pattern'

I'll try to take a look this evening (currently it's a little past noon here).

Hi Emeka, I find this is hard

Wouter Cox's picture
Wouter Cox
Tue, 2011-01-25 18:46

Hi Emeka,

I find this is hard to explain in words, so made a quick video explaining (one way) how to use 'Paste as Pattern' in GIMP: http://www.youtube.com/watch?v=VBB9ttNvBhg

Hope this helps!

Hi Emeka, I had the same

Andre's picture
Andre
Tue, 2011-01-25 19:52

Hi Emeka,

I had the same problem when I was watching video 4 (4-header-image.mkv). I realized that the video forgot to mention to copy the selection. Just hit ctrl c and then try pasting as a new pattern. Hope that helps.

Let me introduce myself to

Emeka Nwankwo's picture
Emeka Nwankwo
Tue, 2011-01-25 14:55

Let me introduce myself to this class... I am Emeka Nwankwo from Nigeria. I write programs using Clojure/Python however I am an aspiring web programmer. Why am I here? To learn from my follow students and instructor.

Hello there, another note

David George's picture
David George
Tue, 2011-01-25 21:08

Hello there, another note about video 4. After I inverted the selection I wasn't able to just hit the delete key to delete the unwanted part of the layer. So, what I did was cut (edit --> Cut) the selection or control x on the mac. That worked!