GitHub Pages

You can have a website with GitHub Pages hosted directly from your GitHub repository. First thing you have to create this repository, and it will be named using your GitHub username + github.io. For example, my username in GitHub is DianaBaRo, so my GitHub Page is: https://dianabaro.github.io/.

They just allow one web page for user. What I did is create a table with links to all my different projects, a page that works as a kind of an index.

Your repository has to have an index.html. After adding folders with my projects to this repository I changed index.html to home.html and it didn’t work well, they ask you for the first one. Don’t change its name!

Solitaire Game

So, this is my first JS project, in which I am still working to implement most of the conditions with the drag and drop and make some sense according to the game rules.

I have used HTML, CSS and JS.

Here it is my HTML, where I have created a navigation bar and a structure made of divs to display the stack, the waste, the spades, hearts, diamonds and clubs piles and a second row with seven piles. In my first attempt I made a table with rows but it was much easier using divs when I started to modify everything with CSS.

Here it is my CSS code. I have had many problems trying to put the image I was dragging on top of another one. Everything has to say with their position, absolute and relative positions. The position property.

And finally, the fun part! All my little “monstruos”, aka my functions. There are some pertinent comments along the code.

WORK TO DO:  I am still working in all the necessary conditions to delimit the drop function according to the rules of the game. Now, you can drag and drop everywhere, you can even pick a card that it isn’t on the top of the pile!

Environment Setup for Javascript

In order to create a project I have had to setup my development environment. I used the following tools:

  1. Browser
  2. Editor

I could use any browser but I choose working with Google Chrome due to Chrome DevTools. To access them:

  • open a Chrome page
  • open the View menu at the top of your browser window
  • select Developer
  • and then select Developer Tools

As my editor I have chosen Visual Studio Code and jsfiddle.net to keep some snippets I was interested on.

Visual Studio Code is a cross-platform editor, that means you can use it with Windows, Linux and macOS. It helps you with debugging, with Git control and you can install plugins.

Visual Studio vs Visual Studio Code

The main difference is that VS Code is an Editor while VS is an IDE.  Check these two posts for more information:

 

 

Getting the Basics on Web Development

Online Education courses I have completed:

OpenClassrooms courses are concise. They are great if you want to have a general idea about the subject that is covered.

Good courses to get the fundamental info but you have to pay if you want to do a project to practise your new skills.

The Javascript part is a lot harder than the Ruby one. They explain the fundamentals and you do some exercises and some projects as a Rock Dodger using JS and a Tic Tac Toe with Ruby. I had really enjoyed this course.

Books:

WordPress.org

Here are the reasons why I have  chosen this publishing platform:

[ First: WordPress.org is not WordPress.com. Nice post about this matter. ]

  1. It is a free open-source.
  2. You own your website and can customise as wanted using PHP, CSS and MySQL.
  3. Self-hosted version. I already had my web domain and hosting with Go Daddy. It is very easy install WordPress on your Hosting Account.