A detailed course that will tell you about all the stages of creating a website: from design in Photoshop, ending with its layout and CMS implementation.

These lessons will be useful for novice designers: they will help to understand not only the principles of “clean” design, but also the nuances of preparing a layout for layout.

Lesson # 1: Sketch

Lesson # 2: Sketch (Continued)

Lesson # 3: Finishing the sketch

Lesson # 4: Header Design

Lesson # 5: Designing the first section

Lesson # 6: Designing the Second Section

Lesson # 7: Designing the Third Section

Lesson # 8: Designing the fourth section

Lesson # 9: Designing the sixth and seventh sections

Lesson # 10: Designing the Testimonials, Contacts and Footer Sections

Lesson # 11: Preparing the Front-End Environment. We start to typeset the layout

Lesson # 12: Getting Started To Layout Your Header

Lesson # 13: Header layout

Lesson # 14: Layout. Responsive header + responsive menu

Lesson # 15: Layout. Streak of advantages

Lesson # 16: Layout. Section “Our profile”

Lesson # 17: Layout. Smooth pop-up gallery (Magnific-Popup)

Lesson # 18: Layout. animateNumber + “Directions” section layout

Lesson # 19: Layout. Section “Our Works” + Pop-up

Lesson # 20: Layout. Section “Supplied equipment”. Carousel

Lesson # 21: Layout. Sections “Discounts” and “Managers”

Lesson # 22: Layout. Carousel of brands

Lesson # 23: Layout. Testimonials

Lesson # 24: Layout. Contacts

Lesson # 25: Updating the Front-End Gulp Environment

Lesson # 26: Layout. Footer, pop-up forms, “Top” button

Lesson # 27. MODx + Gulp: Integrating and Configuring the Gulp Environment

Lesson # 28. Let’s start landing HTML layout on MODx. Templates and chunks

Lesson # 29. Landing HTML header layout on MODx

Lesson # 30. Landing the teaser section on MODx

Cover photo: ShutterStock