Overview Build your very own eCommerce store or professional website using this best-selling course for absolute beginners. In this Modern …
( 10 Reviews )
70 Students
Build your very own eCommerce store or professional website using this best-selling course for absolute beginners. In this Modern Web Designing course, you will acquire the most in-demand skills to kickstart a successful career in web design or web development, taking you through the fundamentals of WordPress, Invision and Balsamiq. It includes step-by-step guidance on how to organise your design projects, create mockup designs, produce your first prototype, and gather project information from your clients.
Gain an insight into the exciting world of web design and the diverse role of a web developer, as you learn how to customise and monetise your site. By the end of the course, you will have the experience, confidence and knowledge to work with different typographic scales, generate your own grids, and much, much more.
The course is delivered through our online learning platform, accessible through any internet-connected device. There are no formal deadlines or teaching schedules, meaning you are free to study the course at your own pace.
You are taught through a combination of
Upon successful completion of the Modern Web Designing course, learners can obtain both a PDF certificate and a Hard copy certificate for completely FREE. The Hard copy certificate is available for a nominal fee of £3.99, which covers the delivery charge within the United Kingdom. Additional delivery charges may apply for orders outside the United Kingdom.
The Modern Web Designing Course is open to all, with no formal entry requirements. All you need is a passion for learning, a good understanding of the English language, numeracy and IT, and to be over the age of 16.
This course is for aspiring web designers and developers who are just starting out in this field and wish to gain the relevant skills and knowledge to improve their job prospects. It is also for anyone who wants to design their own website or eCommerce store. To provide you with ease of access, this course is designed for both part-time and full-time students.
Once you have successfully completed the course, you will be able to apply your skills and knowledge to fast track a successful career in the following professions:
An outstanding online course with clear explanations and practical examples. I could study at my own pace and still feel fully supported throughout. It’s truly boosted my confidence and career prospects
The course was well-structured, engaging, and easy to follow. The flexibility made it perfect alongside my full-time job. I’ve gained valuable, real-world skills that I can apply immediately.
Excellent learning experience from start to finish. The content was professional, up-to-date, and highly relevant. I would highly recommend it to anyone looking to upskill online.
| Introduction | |||
| 0.1 Promo-Workflow | 00:03:00 | ||
| 0.2 What we will cover in this course | 00:03:00 | ||
| Requirements to take this course | |||
| 1.1 Skills-and-apps-you-need-to-take-this-course auto generated | 00:02:00 | ||
| 1.2. Photoshop Extensions We Need | 00:07:00 | ||
| Organizing your Web Design Project | |||
| 2.1 How To Organize A Design Project | 00:05:00 | ||
| 2.2 Client’s Sketches | 00:04:00 | ||
| 2.2 Naming Psd layers and Groups | 00:06:00 | ||
| 2.3.Naming Conventions To Help Developers | 00:03:00 | ||
| Gathering project information from client | |||
| 3.1 Design Briefs | 00:10:00 | ||
| 3.3 Getting More Info On Project | 00:05:00 | ||
| 3.4 Content Template For Gathering Information | 00:03:00 | ||
| Sketching, Wireframing, Atomic Design & 8point Grid system | |||
| 4.1 Mood boards | 00:06:00 | ||
| 4.2 Ideation Phase | 00:05:00 | ||
| 4.3 Introduction To Balsamiq | 00:10:00 | ||
| 4.4 Desining Wireframes Part 1 | 00:08:00 | ||
| 4.5 Desining Wireframes Part 2 | 00:14:00 | ||
| 4.6 Atomic Design | 00:08:00 | ||
| 4.7 8pt Grid | 00:09:00 | ||
| Style Guides, colors and typographics scales | |||
| 5.1 Typeface And Color Combinations | 00:04:00 | ||
| 5.2 Ui Style Guides | 00:07:00 | ||
| 5.3 Examples Of Ui Style Guides | 00:03:00 | ||
| 5.4 How I Created My Style Guide | 00:07:00 | ||
| 5.5 Style Guide-Type Scale Explained | 00:03:00 | ||
| 5.6 Style Guide-Assignment | 00:01:00 | ||
| Designing for Desktop/Large View (Wstudio Web Design Project) | |||
| 6.1 Online Tools For Grid Calculations | 00:13:00 | ||
| 6.2 Planning Your Grid | 00:05:00 | ||
| 6.3 White Space Plan | 00:06:00 | ||
| 6.4 Setting Up Artboard For Desktop Design | 00:07:00 | ||
| 6.5 Designing Header And Hero Part 1 | 00:12:00 | ||
| 6.6 Designing Header And Hero Part 2 | 00:09:00 | ||
| 6.7 Designing Steps Area Part 1 | 00:10:00 | ||
| 6.8 Designing Step Area Part 2 | 00:09:00 | ||
| 6.9. User Reviews Area Design | 00:09:00 | ||
| 6.10 Adjusting White Space And Vertical Rhythem | 00:06:00 | ||
| 6.11 Desining Team Part 1 | 00:11:00 | ||
| 6.12 Desining Team Part 2 | 00:07:00 | ||
| 6.13 Footer Design Part 1 | 00:08:00 | ||
| 6.14 Footer Design Part 2 | 00:11:00 | ||
| Planning Responsive Web Design | |||
| 7.1 Responsive Design Considerations Part 1 | 00:06:00 | ||
| 7.2 Responsive Design Considerations Part 2 | 00:06:00 | ||
| Designing for Tablet/Medium View (Wstudio Web Design Project) | |||
| 7.3.Establishing Grid For Tablets | 00:07:00 | ||
| 7.4.Header Area For Tablet View | 00:11:00 | ||
| 7.5.Section how it work – steps | 00:10:00 | ||
| 7.6.Section team Tablet View | 00:09:00 | ||
| 7.7 footer Design | 00:09:00 | ||
| Designing for Mobile/Small View (Wstudio Web Design Project) | |||
| 8.1.mobile Artboard And Grids | 00:04:00 | ||
| 8.2.header Mobile View | 00:11:00 | ||
| 8.3.steps Section-mobile | 00:09:00 | ||
| 8.4.section 2 Team Members For Mobile | 00:09:00 | ||
| 8.5.footer And Final Adjustments | 00:08:00 | ||
| Designing for Developers | |||
| 9.1.what Developes Needs To Know | 00:05:00 | ||
| 9.2.Red Line Document with Ink 1 | 00:10:00 | ||
| 9.3.Red Line Document with Ink 2 | 00:06:00 | ||
| 9.4.which layer styles you can use photoshop | 00:08:00 | ||
| 9.5.installing Using Zeplin | 00:10:00 | ||
| 9.6.style Guides With Zeplin | 00:14:00 | ||
| 9.7.tools-zeplin-avocode-1 | 00:04:00 | ||
| 9.8.avocode And Sympli | 00:06:00 | ||
| Prototyping with Invision app | |||
| 10.1. What Are Prototypes | 00:04:00 | ||
| 10.2.getting Familiar With Invision App For Prototyping | 00:07:00 | ||
| 10.3.creating First Prototype With Invision App | 00:06:00 | ||
| SVGs and Icon Fonts in Web Design | |||
| 11.1 using iconmoon app to create custom icon fonts set | 00:08:00 | ||
| 11.2 Using SVG in Web design | 00:11:00 | ||
Yes, Discover Training provides accredited and CPD-certified courses, ensuring learners receive recognised qualifications that support career progression and professional compliance.
Anyone can enrol, including students, professionals, job seekers, career changers, and organisations. Most courses do not require previous experience, making them accessible to learners at all levels.
Discover Training offers courses across multiple sectors, including business, health and safety, compliance, leadership, IT, personal development, and professional skills training.
You will have 14 days to revoke your Course purchase from your purchase date. Regrettably, refunds are not allowed after your purchase have been approved, and materials have been posted to the student’s dashboard or accessed.
Yes, learners receive a downloadable digital certificate upon successful completion, suitable for CPD records, CVs, and professional portfolios.
14-Day Money-Back Guarantee
COPYRIGHT © 2026 Discover Training