Jorge Ferreiro teaches an introductory workshop on HTML5, CSS3, and Git/GitHub pages to help students build their first professional portfolio website. The workshop covers basics of HTML5 tags for titles, paragraphs, images and links. It then discusses CSS3 for styling websites with color, background, and fonts. Finally, it introduces version control with Git, cloning repositories, adding/committing changes, and pushing to GitHub pages to host the finished site.

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