techLab - 2nd Lesson
Hello.
Today, we are gonna create something like this:
Let's see how.
A website is defined by HTML. HTML is the standard markup language for creating web pages and web applications. Let'see an example.
Tags can do different things. In here we see "h1", defining a header. Try to change the 1 to 2, 3, and so on.
p-tags allow us to define paragraphs
a-tags allow us to define links.
div-tags define a specific area in our web page.
img-tags allow us to import an image.
I am an image!
hr-tags delineate an area with a border.
I am enclosed in two "hrs!"
Alright. This looks awful, though.
And that's because we haven't used Bootstrap yet.
What's Bootstrap?
Bootstrap is a CSS Framework that saves us time in formatting the design of our web page.
Try to remove the link-tag in the header and see what happens!
Bootstrap allows us to change the "class" of a tag to give it a modern and responsive design.
So we got the design. Now what?
Now, we can set up our website. We are going to use GitHub for that!
First of all, create an account and confirm your email
Now, create a new repo.
Then, name it YOURGITHUBUSERNAME.github.io
Once the repo is created, scroll down to the bottom of the page and select "import code"
When it prompts you to input a repo, type "https://github.com/mrcolo/firstwebsiteTemplate.git"
OPTIONAL After it uploaded the code, go to settings and check if GitHub Pages was initiated.
Look up the URL "YOURUSERNAME.github.io"
All done. Did it hurt?
This is what we learnt, so far, today.
- How to write beautiful HTML.
- How to make it even better with bootstrap.
- How to copy a repo from GitHub
- How to create your first website.
Take Away Project 🌮🌮
Play with the template that you created to personalize your website.