Download as PDF, PPTX
Uploaded bySarah Moyer
Learning by Doing: 10 Lessons in Pushing your WordPress Development Skills
The document outlines ten lessons from Sarah Moyer about improving skills in web design and development, particularly focusing on creating custom sliders with the Slick carousel. Key lessons include the importance of research, testing components individually, utilizing community resources for help, and ensuring user-friendly admin layouts through advanced custom fields. The document emphasizes continuous learning, problem-solving, and iterative testing in the web development process.
More Related Content
Similar to Learning by Doing: 10 Lessons in Pushing your WordPress Development Skills
![[BROCHURE] Italy Tour Project | @SlideON](https://cdn.slidesharecdn.com/ss_thumbnails/brochure8-251215152319-2805af68-thumbnail.jpg?width=640&height=640&fit=bounds)
Learning by Doing: 10 Lessons in Pushing your WordPress Development Skills
- 1. Sarah Moyer LEARNING BY DOING 10 Lessonsin Pushing Your Skills @ayellowdaisy · sarah-moyer.com
- 2. ➤ WP designer/ developer ➤ Prefer Genesis Framework ➤ Love to learn new things (like running a circular saw) about me SARAH-MOYER.COM
- 3.
- 4. Custom Slider fromDesign File
- 5.
- 6.
- 7.
- 8.
- 9. customize CSS (styling) changeHTML (plugin code) customize JS (animation) For the custom slider, I can:
- 10.
- 11. Reach out andask Lesson
- 12. WP.org Forums Colleagues /Co-working Spaces Wordcamps / Local WP Meetups Theme and Plugin Forums Places to get help:
- 13. Can you buildthis? Dear Colleague,
- 14. How does thiswork? Dear Designer,
- 15.
- 16.
- 17. continous loop arrows (notauto-slide) link to page (not post) unique styling (for edge slides) mobile responsive Slider Features:
- 18. continous loop arrows (notauto-slide) link to page (not post) unique styling (for edge slides) mobile responsive Dear colleague, Can you build this?
- 19.
- 20.
- 21.
- 23. continous loop arrows (notauto-slide) link to page (not post) unique styling (for edge slides) mobile responsive Slider Features:
- 24.
- 25. Read other people’scode Lesson
- 26. Slick Carousel code: ➤add HTML ➤ add CSS ➤ add JS
- 27. The slider didn’twork!
- 28.
- 29. Lesson Test each pieceseparately
- 30. Test each piecebefore combining Lesson
- 31.
- 32. HTML Copy code fromSlick website
- 33. HTML Paste code intotheme file
- 34.
- 35.
- 36. CSS File structure inFTPCopy Slick files and add to website
- 37. CSS Add CSS fromSlick
- 38. CSS Call the CSSin theme file
- 39.
- 40.
- 41. Compare code ifbroken Lesson
- 42. Compare using ChromeInspector or Firebug for Firefox CSS
- 43. CSS Chrome Inspector Codeinto theme file
- 44.
- 45.
- 46. JS Add JS fromSlick
- 47. Call the JSin theme file JS
- 48.
- 49. Compare demo towebsite JS
- 50.
- 51.
- 52.
- 53. Take breaks to renewinspiration Lesson
- 54. Take breaks to renewinspiration Lesson
- 55. Take breaks to renewinspiration Lesson
- 56. Match Design Slick onWordPress Photoshop Design File
- 57.
- 58. Match Design CSS from Chrome Inspectorto style.css
- 59. Match Design Slick onWordPress Photoshop Design File
- 60. Add Slick toWP Match Design Build user friendly admin
- 61.
- 62. Advanced Custom Fields plugin Builduser friendly admin
- 64. Advanced Custom Fields- Repeater User-friendly layout Instead of code layout
- 65. Pull ACF datainto slider
- 66.
- 67. Search the CodexLesson
- 68. Pull ACF datainto slider
- 69.
- 70. Comment your codeLesson
- 71.
- 72. If at firstyou don’t succeed
- 73.
- 74. and again andagain.
- 75. Sarah Moyer Questions? Thanks for listening! @ayellowdaisy· sarah-moyer.com Photo credits at sarah-moyer.com/slides LEARNING BY DOING