Skip to content

Instantly share code, notes, and snippets.

@wmyers
Created December 7, 2015 09:27
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wmyers/37bf1714e2d8390f8446 to your computer and use it in GitHub Desktop.
Save wmyers/37bf1714e2d8390f8446 to your computer and use it in GitHub Desktop.
A refresher for FEWD Week 1

##GitHub##

For those of you still baffled by GitHub:

GitHub keeps your files in repositories (folders). Each repositiory can exist locally (on your computer) and remotely (on github.com). They keep in sync with each other.

So there are essentially two GitHubs, the main one is on the web at github.com where you are logged in. The other one is installed on your computer - GitHub Desktop. GitHub Desktop works like an extension of github.com, but running locally on your computer. It allows you to create local repositories and publish them to github.com later. It also allows you to clone remote repositories on github.com so that you have a local copy on your computer.

GitHub Desktop is doing the following with your local repository:

  • tracking your files and showing you which files you have changed
  • letting you commit these changes (take a snapshot)
  • publishing (saving) these commits (shapshots) on github.com
  • synching any changes made independently on github.com with your local repository version

You can contact me on github.com by creating an issue and then writing a comment with my GitHub name in the text preceded by @ (as a seperate word) - @wmyers

You can also contact each other the same way :)

##HTML Structure##

  • HTML is the content (text, images etc) and structure (paragraphs, links etc) of your webpage
  • Some HTML tags have an opening tag and closing tag <p>blah blah blah</p>
  • Other HTML tags just have an opening tag <img src="kitten.png">
  • HTML tags can have attributes which are name="value" definitions inside the opening tag

##CSS Decoration##

  • CSS is the presentation and styling of your content
  • It should be kept separate from the HTML content and structure, and linked in the <head>
  • You select HTML elements and write rules containing declarations
p {
  color: #FF0000;
}
  • You can select elements directly or use multiple . class selectors or unique # id selectors
.some-class {
  color: rgb(0, 255, 0);
}
#one-id {
  color: blue;
}

##Don't Forget##

Use Google to look things up, and look up everything you are not sure about (i.e. everything).

The two most commonly searched websites for documentation on HTML and CSS are W3 Schools and Mozilla Developer Network (MDN). W3 Schools is easier and MDN is better, so use W3 Schools at first and eventually just use MDN.

Try to use HTML5 semantic tags (<header>, <nav>, <article> etc) as much as possible. It will make building web pages easier. We will discuss this more next week.

##Don't Despair##

There is a lot to take in at first, especially if you are completely new to web development, and we realise that some of you have come to the class with more experience than others. We will do lots of group exercises so everyone can help everyone else.

Once you get the hang of the basics it will start to be fun, and frustrating! But part of the fun is understanding the problem, finding the solution, and feeling pleased with yourself. Remember that it just takes practice.

@wmyers
Copy link
Author

wmyers commented Dec 7, 2015

Hi @menaka1510 @djmac26 @sheik323 @toxinotion @hforhappyfarm @alansim79 @xhxhx @rockysecrets @koffeekingkong @nickmarkham @iyharini @suhailagit @rachlim90

Here's a brief refresher from Saturday's class

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment