Creating a Responsive Landing Page on WordPress from A to Z

Creating a Responsive Landing Page on WordPress from A to Z


Design

Creating a Responsive Landing Page on WordPress from A to Z

HabraHabr user Alexey (wdmaster) recorded a video course on creating a Responsive Landing Page on WordPress, consisting of 13 lessons.

Creating a Responsive Landing Page on WordPress from A to Z

New video course on creating a responsive one-page website and landing on CMS WordPress. During the training, such points as designing the interface, creating a sketch, adaptive layout and connecting Front-End plugins, landing on WordPress and creating template options were considered. When developing the template, the possibility of distribution and distribution of the theme was taken into account.

Materials on GitHub: https://github.com/agragregra/wordpress-landing-page-lesson
Frontend demo: http://dev.webdesign-master.ru/_wp_html/

Video course

First lesson

Second lesson

Third lesson

Fourth lesson

Fifth lesson

Sixth lesson

Seventh lesson

Eighth lesson

Ninth lesson

Tenth lesson

Eleventh lesson

Twelfth lesson

Final lesson

What was used

  • ru.wordpress.org – In person
  • elementary.io – Thanks for the logo 🙂
  • getbootstrap.com – Responsive Grid
  • jquery.com – Popular javaScript Framework
  • stocksnap.io – Service of high-quality free photos for web design
  • wireframe.cc – Great sketching service
  • gist.github.com – Service for storing useful code
  • inkscape.org – Vector SVG Editor
  • linea.io – Thin vector icons
  • fortawesome.github.io – Vector icons. Used for social. networks
  • codepen.io – Lots of cool code. Thanks for Sandwich 🙂
  • pixelcog.github.io/parallax.js – Parallax effect
  • dimsemenov.com/plugins/magnific-popup – Responsive popup manager
  • github.com/malihu/page-scroll-to-id – Landing Page Navigation Plugin
  • imakewebthings.com/waypoints – Scroll trigger
  • daneden.github.io/animate.css – Animating elements on a page
  • mixitup.kunkalabs.com – Resilient Animated Tiles in Portfolio
  • bourbon.io – Collection of mixins for SASS
  • sass-lang.com – SASS preprocessor
  • koala-app.com – Compiler for preprocessors
  • fontsquirrel.com/fonts/raleway – Free font for our theme
  • sublimetext.com – Front-end editor
  • jetbrains.com/phpstorm – Back-end editor
  • formspree.io – Sending applications from the site