Workshop taken place in my university really soon

1. HTML5, CSS3 and
Github pages
Jorge Ferreiro
Supported by:

2. Who is Jorge Ferreiro?
www.ferreiro.me
hello@ferreiro.me
● Computer Science Student.
● Full Stack Software Developer.
● Programming and music lover.

3. What are you going
to learn today?

4. Topics
HTML5 Basics.
CSS3 Basics.
Git Basics.
Make your first professional
portfolio: from design to code

5. Let’s start!

6. HTML5 basics
Welcome to the TAG World!
Titles
Paragraphs
Pics
Links

7. HTML5?
NEVER HEARD OF IT!!

8. <h1>

9. Close the
tag dude!

10. </h1>

11. Your first Title
<h1>Welcome to the workshop!
You’ll learn a lot today (I hope so)
</h1>
Example code | index.html

12. <p>

13. I told you...

14. ...Close the
tag!

15. </p>

16. Your first Paragraph
<p>Hey! I think this is the most
awesome text you have ever seen.
Right???</p>
Example code | index.html

17. Cats pics…?

18. Like...

19. This?

20. Sure!
<img src=””>

21. Your first cat pic
<img src=”awesome_cat.jpg”/>
Example code | index.html

22. <a href=””></a>

23. Your first link!
<a href=”http://www.google.es”>
Google it!
</a>
Example code | index.html

24. CSS3 BASICS
Making your website looks
pretty awesome.
Color
Background
Fonts

25. color:blue;

26. background:blue;

27. font-family:Lobster;

28. GIT BASICS
Versions everywhere!
Clone
Add
Commit
Push

29. Git?
Source code management
system for software
development
https://en.wikipedia.org/wiki/Git_(software)

31. git clone <url>

32. git add -A

33. git commit -m “Title”

34. git push origin master

35. Congratulations!
You are now a git beginner :)

36. Github?
Web based Git repository
Hosting Service
www.github.com d

37. Your first professional portfolio
What are you going to make?
Tools
Github pages
Let’s start coding!

38. I prepare this design for
the workshop --->

41. Tools

42. atom.io sublimetext.com
Atom / Sublime

43. Google Chrome
- or -
Firefox Dev Edition

44. Github Pages
pages.github.com

45. Let’s start coding!
From Design to code

46. Questions?

47. Thank you
hello@ferreiro.me
www.ferreiro.me