Modern Web Design with Photoshop and Bootstrap 5 is a course in designing web pages in Photoshop with artboards and grids that match Bootstrap, preparing and exporting images for the web, then building real pages with Bootstrap 5.3, custom CSS and dark mode. It suits designers who work in Photoshop, UX/UI designers and developers, and you leave with a responsive landing page.
Modern web design is not judged on looks alone. Pages must work well on phones, tablets and computers, load quickly and be usable by everyone. Many designers already lay out pages in Photoshop, but when the design is built as a real site, spacing, colours and type sizes often drift. Structuring the design around Bootstrap's grid from the start makes it faster and more accurate to build.
This course takes learners through designing web pages in Photoshop 2026 with artboards for each screen size, a 12-column grid and smart objects, preparing images with AI tools within sensible limits, and exporting images for the web. Learners then build the design as a web page with Bootstrap 5.3, using the grid, utilities, navbar, carousel, cards, modals and forms, customise the look with their own CSS and dark mode, and finish with a workshop that turns a Photoshop landing page into a responsive web page. (1 day, 6 hours, Beginner level.)
Course Details
This is the 2026 edition of the Modern Web Design with Photoshop and Bootstrap 5 course. It runs for 1 day, 6 hours (09:00-16:00), as lectures with labs, at Beginner level. The design side is updated for Photoshop 2026 with artboards, smart objects, Export As and image tools such as the Remove Tool and Generative Fill. The code side is updated for Bootstrap 5.3, which uses CSS variables and supports dark mode, loaded from a CDN so you can start straight away. Learners use Photoshop from their own Creative Cloud plan or a trial, and take home the course handbook, sample PSD files and solution code for every lab.
Day 1: From Photoshop to a Real Website with Bootstrap 5.3
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
Use RGB colour mode with pixels as the unit, create separate artboards for each screen size such as mobile, tablet and desktop, and set a 12-column guide layout that matches Bootstrap's container and gutters so the coded layout lines up. Name layers and group them by page section, such as header, content and footer, use the same character styles and colours throughout, and make repeated parts into smart objects.
Select the layer or artboard and use Export As, choosing JPG for photos and PNG where you need transparency. Adjust size and quality to keep files small, and export a double-size version for high-resolution screens. For smaller WebP files, use Save a Copy and choose WebP, and for frequent exports use Quick Export with your saved settings. Then place the files in your project's image folder.
Create your own CSS file and load it after Bootstrap's, then set Bootstrap's CSS variables, such as the page background and fonts, and component-level variables such as button colours. Add your own classes rather than editing the original files, so you can upgrade later, and use data-bs-theme, supported in Bootstrap 5.3, for dark mode. This course writes custom CSS to match designs made in Photoshop.
It suits designers who work in Photoshop, UX/UI designers, developers who turn PSD files into web pages, and corporate website maintainers. No coding experience is required, but you should have used Photoshop at a basic level, such as layers and text, and have Photoshop from your own Creative Cloud plan or a trial.
You will be able to set up Photoshop artboards and grids that match Bootstrap, lay out web pages, prepare and export images for the web, build pages in Bootstrap 5.3 with menus, carousels, cards, forms and modals without jQuery, customise the look with CSS and dark mode, and check page speed with Lighthouse. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.
Yes. IT Genius Institute runs in-house training for design and web development teams, with examples adapted to your own work, such as building web pages from design files your team already has. Sessions can be held onsite or online. Contact the institute for details and a quotation.
Articles are published in Thai.
A good web page needs a sound structure, works well on both phones and computers, and looks appealing. HTML5 and CSS can do more on their own than many people expect, from forms that check their own input and videos with captions to gradients, shadows and…
Websites today must look good on phones, tablets and desktops, and writing fully responsive CSS from scratch takes a long time to learn. Bootstrap 5 is a CSS framework that makes responsive layouts quick with its grid system, utility classes and ready-made…
A dashboard brings data from many sources onto one page, so managers and teams can see key figures, trends and the status of their work at a glance. A good dashboard is more than attractive charts: it has to order information so it is easy to read, display…
