1.
#WorkshopFDI

2.
Your first professional
website from scratch
Jorge Ferreiro
Sponsored by:

3.
Special Thanks
● Github for the sponsorship.
● Borja (Gueim) for helping me with the
logistic stuff.

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

5.
What are you going
to learn today?

6.
Topics
1. HTML5/CSS3 Basics.
2. Javascript (Jquery).
3. Git Basics.
4. From design to code
5. Publish your website

7.
Before start...

8.
Let’s start!

9.
HTML5 basics
Welcome to the TAG World!
1. Titles
2. Paragraphs
3. Pics
4. Links

10.
HTML
Hypertext Markup Language
(aka Tag World)

11.
<h1>

12.
Close the
tag dude!

13.
</h1>

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

15.
<p>

16.
Again…
Close the tag!

17.
</p>

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

19.
Cats
pics…?

20.
Like...

21.
This?

22.
Or this?

23.
Sure!
<img src=””>

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

25.
Links?

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

27.
Your first link!
<a href=”http://www.ferreiro.me”>
This is not Spam Link. Isn’t it? :P
</a>
Example code | index.html

28.
CSS3 basics
Making your website looks pretty awesome.
1. Selectors and Classes
2. Color
3. Background
4. Fonts

29.
Selector { … }
.myClass { … }

30.
color:blue;

31.
background:blue;

32.
font-family:Lobster;

33.
GIT basics
Versions everywhere!
1. Clone
2. Add
3. Commit
4. Push
5. Github

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

35.
git clone <url>

36.
git add -A

37.
git status

38.
git commit -m “Title”

39.
git push origin master

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

41.
Git GUI Clients
Github Desktop
https://desktop.github.com/
Source Tree
https://sourcetreeapp.com/
download/

42.
Second chances...

43.
Let’s Work on the portfolio!
Your first professional website
1. What we’re making?
2. Tools
3. Github pages
4. Let’s start coding!

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

45.
Tools

46.
atom.io sublimetext.com
Atom / Sublime

47.
Google Chrome
- or -
Firefox Dev Edition

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

49.
(Mandatory slide :P)

50.
Github Pages
pages.github.com

51.
Let’s start coding!
Man, close the slides and do some
hacking. Show me the code!! :)

52.
Swap screen mode :)

53.
Extra
Questions?

54.
Thank you
www.ferreiro.me
jorge@ferreiro.me