Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#WorkshopFDI
Your first professional
website from scratch
Jorge Ferreiro
Sponsored by:
Special Thanks
● Github for the sponsorship.
● Borja (Gueim) for helping me with the
logistic stuff.
Who is Jorge Ferreiro?
www.ferreiro.me

jorge@ferreiro.me
● Computer Science Student.
● Full Stack Software Developer.
● P...
What are you going 

to learn today?
Topics
1. HTML5/CSS3 Basics.
2. Javascript (Jquery).
3. Git Basics.
4. From design to code
5. Publish your website
Before start...
Let’s start!
HTML5 basics
Welcome to the TAG World!
1. Titles
2. Paragraphs
3. Pics
4. Links
HTML
Hypertext Markup Language
(aka Tag World)
<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>
Again…

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.h...
Cats
pics…?
Like...
This?
Or this?
Sure!
<img src=””>
Your first cat pic
<img src=”awesome_cat.jpg”/>
Example code | index.html
Links?
<a href=””></a>
Your first link!
<a href=”http://www.ferreiro.me”>

This is not Spam Link. Isn’t it? :P

</a>
Example code | index.html
CSS3 basics
Making your website looks pretty awesome.
1. Selectors and Classes
2. Color
3. Background
4. Fonts
Selector { … }
.myClass { … }
color:blue;
background:blue;
font-family:Lobster;
GIT basics
Versions everywhere!
1. Clone
2. Add
3. Commit
4. Push
5. Github
Git?
Source code
management system
https://en.wikipedia.org/wiki/Git_(software)
git clone <url>
git add -A
git status
git commit -m “Title”
git push origin master
Congratulations!
You are now a git beginner :)
Git GUI Clients
Github Desktop
https://desktop.github.com/
Source Tree
https://sourcetreeapp.com/

download/
Second chances...
Let’s Work on the portfolio!
Your first professional website
1. What we’re making?
2. Tools
3. Github pages
4. Let’s start...
I prepare this design for
the workshop --->
Tools
atom.io sublimetext.com
Atom / Sublime
Google Chrome
- or -
Firefox Dev Edition
www.github.com d
Github?
Web based Git repository
Hosting Service
(Mandatory slide :P)
Github Pages
pages.github.com
Let’s start coding!
Man, close the slides and do some
hacking. Show me the code!! :)
Swap screen mode :)
Extra
Questions?
Thank you
www.ferreiro.me

jorge@ferreiro.me
Workshop: Your first professional Website
Workshop: Your first professional Website
Workshop: Your first professional Website
Workshop: Your first professional Website
Workshop: Your first professional Website
Workshop: Your first professional Website
Upcoming SlideShare
Loading in …5
×

Workshop: Your first professional Website

365 views

Published on

HTML, CSS3, GIT and Javascript.
Live workshop sponsored by Github.
Place: University of Computer Science (UCM).

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Workshop: Your first professional Website

  1. 1. #WorkshopFDI
  2. 2. Your first professional website from scratch Jorge Ferreiro Sponsored by:
  3. 3. Special Thanks ● Github for the sponsorship. ● Borja (Gueim) for helping me with the logistic stuff.
  4. 4. Who is Jorge Ferreiro? www.ferreiro.me
 jorge@ferreiro.me ● Computer Science Student. ● Full Stack Software Developer. ● Programming and music lover.
  5. 5. What are you going 
 to learn today?
  6. 6. Topics 1. HTML5/CSS3 Basics. 2. Javascript (Jquery). 3. Git Basics. 4. From design to code 5. Publish your website
  7. 7. Before start...
  8. 8. Let’s start!
  9. 9. HTML5 basics Welcome to the TAG World! 1. Titles 2. Paragraphs 3. Pics 4. Links
  10. 10. HTML Hypertext Markup Language (aka Tag World)
  11. 11. <h1>
  12. 12. Close the tag dude!
  13. 13. </h1>
  14. 14. Your first Title <h1>Welcome to the workshop! You’ll learn a lot today (I hope so)
 </h1> Example code | index.html
  15. 15. <p>
  16. 16. Again…
 Close the tag!
  17. 17. </p>
  18. 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. 19. Cats pics…?
  20. 20. Like...
  21. 21. This?
  22. 22. Or this?
  23. 23. Sure! <img src=””>
  24. 24. Your first cat pic <img src=”awesome_cat.jpg”/> Example code | index.html
  25. 25. Links?
  26. 26. <a href=””></a>
  27. 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. 28. CSS3 basics Making your website looks pretty awesome. 1. Selectors and Classes 2. Color 3. Background 4. Fonts
  29. 29. Selector { … } .myClass { … }
  30. 30. color:blue;
  31. 31. background:blue;
  32. 32. font-family:Lobster;
  33. 33. GIT basics Versions everywhere! 1. Clone 2. Add 3. Commit 4. Push 5. Github
  34. 34. Git? Source code management system https://en.wikipedia.org/wiki/Git_(software)
  35. 35. git clone <url>
  36. 36. git add -A
  37. 37. git status
  38. 38. git commit -m “Title”
  39. 39. git push origin master
  40. 40. Congratulations! You are now a git beginner :)
  41. 41. Git GUI Clients Github Desktop https://desktop.github.com/ Source Tree https://sourcetreeapp.com/
 download/
  42. 42. Second chances...
  43. 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. 44. I prepare this design for the workshop --->
  45. 45. Tools
  46. 46. atom.io sublimetext.com Atom / Sublime
  47. 47. Google Chrome - or - Firefox Dev Edition
  48. 48. www.github.com d Github? Web based Git repository Hosting Service
  49. 49. (Mandatory slide :P)
  50. 50. Github Pages pages.github.com
  51. 51. Let’s start coding! Man, close the slides and do some hacking. Show me the code!! :)
  52. 52. Swap screen mode :)
  53. 53. Extra Questions?
  54. 54. Thank you www.ferreiro.me
 jorge@ferreiro.me

×