Part 1 - Creating an HTML page
Bit by bit you will get there.
1. Start with an introduction on web technologies given by coach.
2. Inspect an HTML file.
- together with your coach, have a look at: about.html (source)
- discuss about general structure, different tags and their purpose
3. Write your own HTML file, using the one above as guide
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:
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:
Here are some more tags for extra inspiration, but you don’t have to use them:
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!
4. Style your own page
- 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