workshop html5, css3 & github

HTML5, CSS3 and Github pages

Jorge FerreiroSupported by:

Who is Jorge Ferreiro?

www.ferreiro.mehello@ferreiro.me

● Computer Science Student.● Full Stack Software

Developer.● Programming and music

lover.

What are you going to learn today?

TopicsHTML5 Basics.CSS3 Basics.Git Basics.Make your first professional portfolio: from design to code

Publish your website on Github

Let’s start!

HTML5 basicsWelcome to the TAG World!

TitlesParagraphsPicsLinks

HTML5?

NEVER HEARD OF IT!!

<h1>

Close the tag dude!

</h1>

Your first Title<h1>Welcome to the workshop! You’ll learn a lot today (I hope so)</h1>

Example code | index.html

<p>

I told you...

...Close the tag!

</p>

Your first Paragraph

<p>Hey! I think this is the most awesome text you have ever seen. Right???</p>

Example code | index.html

Cats pics…?

Like...

This?

Sure!<img

src=””>

Your first cat pic<img src=”awesome_cat.jpg”/>

Example code | index.html

<a href=””></a>

Your first link!<a href=”http://www.google.es”>

Google it!</a>

Example code | index.html

CSS3 BASICSMaking your website looks pretty awesome.ColorBackgroundFonts

color:blue;

background:blue;

font-family:Lobster;

GIT BASICSVersions everywhere!

CloneAddCommitPushGithub

Git?Source code management

system for software development

https://en.wikipedia.org/wiki/Git_(software)

git clone <url>

git add -A

git commit -m “Title”

git push origin master

Congratulations!You are now a git beginner :)

Github?Web based Git repository

Hosting Servicewww.github.com d

Your first professional portfolioWhat are you going to

make?ToolsGithub pagesLet’s start coding!

I prepare this design for the workshop ---

>

Tools

atom.io sublimetext.com

Atom / Sublime

Google Chrome- or -

Firefox Dev Edition

Github Pages

pages.github.com

Let’s start coding!From Design to code

Questions?

Thank youhello@ferreiro.mewww.ferreiro.me