Workshop html5, css3 & github
Download as PPTX, PDF0 likes374 views
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.
Workshop html5, css3 & github
- 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>
- 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...
- 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?
- 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;
- 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
- 45. Let’s start coding! From Design to code
- 46. Questions?