Jump start your way to understanding Responsive Web Design with HTML5, CSS3, JavaScritpt, BootStrap and Wordpress

1. Responsive
Web Design
HTML5, CSS3, JavaScript, jQuery, Bootstrap,
September 14, 2014 Disclaimer: this presentation is for educational purposes only, I took almost all images from google therefore use of graphics and other materials are reserved from its respective owner.

2. Outline

3. Why responsive design?
Internet is a place w/c can be access by anyone (means any device or
platform), anytime (24/7) and anywhere (ain’t gonna happen)
Webpages/Websites are the medium that provide information in the
Internet
Screen resolution varies depending on devices

4. Why responsive design?

5. Why not develop a mobile website
and a full website?

6. Why not develop a mobile website
and a full website?
Maintenance
Storage
Cost

7. Mobile First
We design based on the assumption that whoever is accessing
our page he’s using a mobile device

8. Mobile Last vs Mobile First

9. HTML5
Links Pages CSS and Scripts

10. CSS3

12. Angular.js
YouTube on PS3
www.jobs.cz

13. Layout

14. Fixed
Components have
a fixed width
which means the
container is made
not to move or be
resized
Any visitor will
experience the
same width
regardless of their
resolution.

15. Fluid
Components
width are built
using
percentage
making columns
relative to one
another
View is adjusted
for each user

16. Adaptive
Not necessarily
built on a fluid
grid
Can use fixed
grid or media
queries to target
specific device

17. Responsive
Built in fluid
grids
Uses media
queries to
control designs
and content

18. Grid

19. Flexible images
img
{
width: 100%;
}
img
{
width: 231px;
}

20. Media Queries
a CSS3 module allowing content rendering to adapt to
conditions such as screen resolution (e.g. smartphone screen
vs. computer screen). It became a W3C recommended
standard in June 2012. And is a cornerstone technology of
Responsive web design.
wikipedia

21. Media query and a viewport
<meta name="viewport" content="width=device-width">

22. Media query and a viewport

23. Media Queries

24. Break points

25. Breakpoints

26. Navigation

27. • HTML5, CSS3, JavaScript, jQuery, Bootstrap,
September 14, 2014 Disclaimer: this presentation is for educational purposes only, use of graphics and other materials are reserved from its respective owner.

28. Bootstrap
• Bootstrap
• Grid System
• Glyphicons
• Carousel

29. Bootstrap
a sleek, intuitive, and powerful mobile first
front-end framework for faster and easier
web development

30. Grid System

31. Glyphicons

32. Carousel

33. WordPress
• HTML5, CSS3, JavaScript, jQuery, Bootstrap,
September 14, 2014 Disclaimer: this presentation is for educational purposes only, use of graphics and other materials are reserved from its respective owner.

34. WordPress
• Content Management System (CMS) that create and manage (insert,
modify, update, delete) contents of a website
• Other alternative technologies: Joomla, Drupal,

35. Starting XAMPP

36. Starting XAMPP

38. WordPress
• WordPress website example
• Setting Up WordPress in your local machine
• Other options is to Get Hosting sites and a Domain Name
• Install the theme
• Add pages
• Change the homepage
• Get a Logo

39. Setup the Database

40. Select “phpMyAdmin”

41. Select Databases Tab

42. Provide the name of the database then name
then press create button

43. You will be prompt once database is
successfully created

44. Proceed to your website via localhost

45. You will be asked to provide the info of your
database
Note: if you have not provide any username or password when you set-up MySql the default is ‘root’
and blank password

46. Run to install your settings

47. Provide the Information of your website

48. Log in to your newly created website

49. You can now proceed to your dashboard

50. Embedding Google Map

54. Making the Map adapt to browser resize
width = “100%”

55. Adding a Contact Form

56. Removing Comments Section

57. Adding Embedded YouTube page

58. Share > Embed > Copy

60. Adding/Customizing Menu
Note: Menu won’t change unless you change header menu on
Manage Location Tab

61. Customize Home Page

62. Customizing Widget

63. Adding YouTube subscribe button

65. Adding Facebook like box

69. Thank You! Have a Nice Day!