| S1 | S2 | S3 | S4 | S5 | S6 | S7 | S8 |
|---|
Session outline:
- Completing session 6 & 7 tutorials
- Introduction to the flexible box
- Flex-box game
- Introduction to Github pages
- Tutorial for publishing content with Github pages
- Questions
Session 6 was all about linking our knowledge of HTML with CSS in a project that we built from scratch! We then moved on to learning more about HTML and CSS when we introduced Bootstrap, a framework that makes it easier for us to work with CSS and HTML.
For those of you that haven't had the chance to complete the tutorials, please feel free to do so before moving on to the next section.
This is a new area in CSS that we haven't come across yet. Before CSS3, we had to use the block model with floats (covered in Session 5). The flexible block is arguably an easier to use alternative to floats when it comes to positioning elements in a page. This also makes it easier to position child elements within a div.
Understandably, positioning in CSS could be quite annoying and this is why we're learning about this new topic!
In order for us to get up to speed and learn how to use the flexible box, we're going to play a really fun game. If you have ever played the addictive Frogger game, you're definitely going to enjoy this! Visit this website and complete all 24 levels before moving on to the next section. Good luck 🐸🐸🐸
BONUS: If you enjoyed the game, then checkout this tower defense game that will also teach you how to use flex box.
As this is our last session, it's about time to introduce a great feature that is provided by this website, Github. For those of you that don't know, Github is a git repository hosting service that allows developers to collaborate on projects together. Think of it as a Google Drive for your code, well sort of... We are not going to go into how to use it or how to use the technology that it relies on, git, as this is outside the scope of this course. However, I would recommend that you learn how to use git and Github, because it is a very important skill to have by any software developer. Checkout this tutorial if you are interested in learning more about git.
Moving on to the important bit. As previously mentioned, Github provides many features that are beloved by the open source community because they are provided for free. The one feature that we will be exploring today is the Github Pages.
Github pages allows you to host your "static" website straight from a repository on Github! In other words, we can have a website live in minutes for free! Quite neat, eh?
Another cool thing about Github pages is that you can create as many websites as you want.
Here are a few of the thousands of websites that are hosted on Github pages:
It is also worth pointing out that with Github pages, you get access to a great and expansive Content Delivery Network (CDN). Which means your content will be loaded much faster anywhere in the world.
To host our project on Github, we first need to have some HTML and CSS files that we have previously created, ready for uploading. You can use any of the projects that you have built in any of the previous sessions.
After you have decided on which files you would like to use, open a new Chrome tab and visit github.com. Please follow these steps carefully 😊
-
Sign in to you Github account
-
Click on the plus (+) button in the top-right corner and select "New repository"
-
Fill in a name for your new repo
-
Click on the "Initialize this repository with a README"
-
Then, click on "Create repository"
-
You will then be taken to a page that looks like this:
-
It can be confusing to look at this page for the first time. Don't worry, we are only concerned with a few buttons on this page.
-
Please click on the "Branch:master" button, like so:
-
This will show a text area, in which you can type the name of a new branch. In this case, we want to create a branch called "gh-pages". Then, click on the "Create branch: gh-pages" button.
-
As simple as that, we now have a page that is live on the following URL:
yourgithubusername.github.io/repositoryname. Obviously, that page is not going to show anything because we still have not added any HTML or CSS. -
Also, notice that our branch is not
masteranymore, it is nowgh-pages, as shown in red:
-
Next up, click on "New File". This will bring up:
-
Make sure to name your main HTML file as
index.html! Then proceed to paste the code from your project that you would like to publish.
-
After pasting your HTML into the big text area, scroll to the bottom of the page and type in a commit message. You could simply type the suggested message, and then click on the green "Commit new file" button.
-
After you commit, wait for 20 seconds and then visit
yourgithubusername.github.io/repositoryname, and appropriately place your username and repository name inside this URL. When I visit the URL for my project, this is what I see:
-
You should see the HTML outline of you page
-
Go back to the repository and add a new file. This time we are adding the CSS. Same thing with the "commit" at the bottom 👇
-
And don't forget to link your HTML and CSS together
-
After Adding the HTML, CSS and linking them together, visit your live page to see the changes. You can open this website on any device :)
Important Information:
- If you want to make any changes to your website, you should simply edit the file and then make sure you commit your changes!
- It would be a good idea to change your default branch to
gh-pagesfrom the repo's settings. Under the branches tab, changes the default togh-pagesand then update it. - This is the "easy" way to make use of Github Pages. If you would like to learn how to properly use
gitand the command line, let me know and I'll point you in the right direction.
I hope you enjoyed the course! Thank you all so much for being a part of this!
Please don't hesitate to ask me any questions you have, even if the course is over, I'll still be on Slack. On a closing note, I truly hope that you will continue to code and I look forward to seeing all the crazy stuff that you will build!
Thanks for being amazing!
Zaid and Fadi