| layout | title | permalink |
|---|---|---|
default |
Part 1 |
/part_1/ |
Bit by bit you will get there.
- together with your coach, have a look at: about.html (source)
- discuss about general structure, different tags and their purpose
First of all, do not copy-paste the content. Write each line yourself as it will greatly help you in the long run.
But before creating our file, let us create a folder for this project, in order to keep track of all the files we create. Open your console and type the following commands:
{% highlight bash %}
$ mkdir railsgirls # mkdir is equivalent to "make directory railsgirls"
$ cd railsgirls # we 'enter' the new directory using command 'cd'
$ touch about.html # command 'touch' creates a new file called as indicated
{% endhighlight %}
Open your newly created file about.html in your Sublime editor. Start editing the file with information about yourself.
What is important to add in your HTML file, which will be for further use, are the following elements:
- your name in h1 tag
- 2 lists (your hobbies and your languages for example)
- add a picture of yourself
- write today's date somewhere on the page
Be sure to put the following tags into your page:
{% highlight html %}
{% endhighlight %}
Here are some more tags for extra inspiration, but you don't have to use them:
{% highlight html %}
Now that we have created our own page, let us see how the browser sees it. Go to your railsgirls folder, where your about.html file is, right click on it and click tab Open with and then select your preferred browser.
It's cool to see your page up there, but at the same time, it seems rather dull and not really colourful. Let's do something about this!
- use simple (inline) css to color some text
- add spacing to some elements
- play with font's size
Ask the coach to show you how!
Be sure to try out the following css tags: color, font-size, font-family, background, border
For the more adventurous check out border-radius, text-decoration, text-align
-
understand the structure, what is the HTML part, the CSS part and the JS part
-
understand what Bootstrap is and how we can use it in our file
-
go to: http://getbootstrap.com/ and find some classes to use