workshop html5, css3 & github
TRANSCRIPT
HTML5, CSS3 and Github pages
Jorge FerreiroSupported by:
Who is Jorge Ferreiro?
● 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 :)
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?
