benbrignell / sign-up-template

Hello Kyra.

You were asking about building a sign up page for something, this is a quick guide on what to do as one of your learning to code excercises.

What you are learning

• HTML
• CSS

(These are the things needed to present and format content.)

What software you need

You won't need to install ruby or anything to edit these but a text editor like Coda http://panic.com/coda/ would be ideal. There are free ones too - happy to recommend some but Coda has a free trial. You can technically edit your html/css with any text editor - so even TextEdit on your Mac will be suitable for your first try.

What files you're going to edit

• Index.html This the page with all the content and html markup. Headings, paragraphs, links to images and layout elements all sit in here. Preview this by navigating to the index.html in your browser and hit refresh every time you make a change. Or you can use Coda's preview tool.

• main.css This is the css file. This is the stylesheet where you add colours, borders, sizes and control the style of your html page. If you scroll down inside the file you will see an area I made you where you can add/edit css styles. Currently no colour or styling has been applied to the template.

There's plenty of resources around to help but always feel free to ask - even on twitter you'll get the answer.

• Images You only need to worry about editing the above two files for the time being. However if you want to add any images/logos you can link to them in your html file and they should be stored in the /img/ directory.

• Comments: Html html comments start with <!-- and end with --> For example: <!-- Edit the element below --> CSS css comments start with /* and end with */ For example: /* hello kyra */

Comments won't affect the design or behavior, they're there for your refecence but some of them you may want to remove as they can be visible if somebody looks at the source code. Most of them can stay apart form the ones I specifically put there for you :)

• Form: Sign up to Campaign Monitor and create a free account. There will be a form snippet which you can copy and paste to replace my form field (which is just a dummy one)

If you get stuck, just shout