We have released a course where you can learn the basics of web design using no-code tools even if you have no experience! You can learn the skills of a professional web designer at lightning speed using STUDIO. ====== Thank you for watching the video. We are providing beginners with tips and techniques on how to use the god tools that are currently popular. We would be very happy if you could like, comment, and subscribe to our channel. [⬇️Subscribe to our channel⬇️] @SaaSpark [⬇️STUDIO School has opened⬇️] https://nocode-gym.com 💻NoCode GYM No-code web production for beginners starts on April 6th! [Receive STUDIO template] https://s.lmes.jp/landing-qr/16611221... ◆━━━━━━━━━━━━━━━━━◆ ✅40 pages of STUDIO template✅ ⬇︎ Distributed on Shishigami's official LINE ⬇︎ ◆━━━━━━━━━━━━━━━━━◆ ・News/blog etc... ・Event announcement/management・Document distribution/Lead acquisition・Responsive・40 pages in total Templates worth 20,000 yen elsewhere are being distributed for free for a limited time only! ◆━━━━━━━━━━━━━━━━━━◆ ✅[Profile] Shishigami I usually work in production/development while posting information about IT services on SNS. ・App & site design/development・Video production & SNS marketing・Business efficiency using AI tools etc... Recently, I have been entrusted with a wide range of digital work. *78,000 followers on TikTok [⬇️Click here to request work⬇️] [email protected] ◆━━━━━━━━━━━━━━━━━◆ ✅Table of Contents1-1. 00:04:28 Learn how to layout a web page00:05:06 1-1-1. Learn layout (columns) from actual sites1-2. 00:06:00 Learn how to arrange boxes horizontally00:06:50 1-2-1. Create a box in STUDIO00:11:01 1-2-2. Arrange boxes intuitively by dragging and dropping00:14:39 1-2-3. Arrange groups and boxes horizontally00:17:25 1-2-4. Set the width of a box00:21:38 1-2-5. Practicing by arranging another box side by side00:25:28 1-2-6. Try changing the number of boxes arranged00:28:03 1-2-7. Try arranging three boxes evenly1-3. 00:29:30 Dividing (adding) a box and laying it out00:30:00 1-3-1. Preparing a box in STUDIO00:31:37 1-3-2. Dividing (adding) a box within a box00:33:31 1-3-3. Arranging the divided (added) boxes side by side00:35:47 1-3-4. Dividing (adding) a box further1-4. 00:37:21 Specifying the width of a box and laying it out00:37:59 1-4-1. Arranging the boxes in a 6:4 ratio00:40:42 1-4-2. Learn what to do when the box width exceeds 100%00:44:28 1-4-3. Try specifying the box width using something other than "%"00:46:48 1-4-4. Fix the box size on one side *Incorrect: 1-4-51-5. 00:49:07 Advanced: Learn how to use the reverse arrow00:50:30 1-5-1. Understand the order of documents and images00:52:43 1-5-2. Arrange with left-facing arrows instead of right-facing arrows00:54:10 1-5-3. Change the order between PC and smartphone1-6. 00:57:22 Try responsive design00:57:58 1-6-1. Create a layout to be displayed on a PC01:01:54 1-6-2. Make the PC layout compatible with smartphones01:07:34 1-6-3. Adjusting the layout for a tablet ① 01:08:50 1-6-4. Adjusting the layout for a tablet ② 01:11:20 1-6-5. Freely Layout with Absolute Positioning2. Prepare the necessary parts for a blog site2-1. 01:14:40 Set the text size and color and create the necessary parts01:15:12 2-1-1. Add a page in STUDIO01:15:54 2-1-2. Decide the colors to use on the site01:19:33 2-1-3. Decide the type of font to use01:22:46 2-1-4. Decide the font size01:28:50 2-1-5. Set the general layout01:32:33 2-1-6. Advanced: Rich text to use in CMS01:34:12 2-1-7. Create global navigation01:38:56 2-1-8. Adjusting the appearance of the navigation 01:41:55 2-1-9. Learning about STUDIO's list function 01:45:49 2-1-10. Adjusting spacing with the Gap function 01:47:44 2-1-11. Setting links to text 01:49:51 2-1-12. Setting hover for links 01:52:02 2-1-13. Adjusting the appearance of the navigation 01:55:04 2-1-14. Optimizing the navigation for smartphones 2-2. 01:58:18 Basic settings for the site in STUDIO 01:58:20 2-2-1. Setting the overall settings for the site 02:02:25 2-2-2. Setting the optimal tags for each part 02:04:31 2-2-3. Advanced: Turning on the CMS functions 3. Creating a blog site from scratch 3-1. 02:06:29 Create the basic framework of the layout 02:06:29 3-1-1. Check the finished site 02:08:25 3-1-2. Understand the six work processes 02:09:43 3-1-3. Create the general layout 02:14:19 3-1-4. Responsive 3-2. 02:16:01 Add content to the layout 02:16:16 3-2-1. Add a logo to the header 02:18:16 3-2-2. Add navigation 02:22:29 3-2-3. Set a smartphone design for the navigation 02:23:26 3-2-4. Create category labels for articles 02:26:04 3-2-5. Create article titles and dates 02:29:34 3-2-6. Create thumbnail images 02:30:15 3-2-7. Create an article summary 02:31:13 3-2-8. Create an H2 heading and body text 02:33:39 3-2-9. Adjust the layout (margins) in detail 02:37:37 3-2-10. Create an article list in the sidebar ① 02:45:23 3-2-11. Create an article list in the sidebar ② 02:49:41 3-2-12. Create an article list in the sidebar ③ 02:56:20 3-2-13. Create a copyright in the footer 3-3. 02:58:25 Let's adjust the width layout 02:58:54 3-3-1. Let's check the completed width 02:59:55 3-3-2. Create a box to fix the width 03:01:42 3-3-3. Set margins above and below the inner box 03:02:26 3-3-4. Fixing the width of the header and footer 03:02:26 3-3-5. Setting hover for navigation 03:06:50 3-3-6. Setting (in) hover for sidebar 03:09:27 3-3-7. Learn about STUDIO's in hover function 3-4. 03:11:11 Set up a responsive design 03:11:28 3-4-1. Check the current responsiveness 03:12:26 3-4-2. Let's add a breakpoint 03:13:53 3-4-3. Responsive support for tablets ① 03:20:06 3-4-4. Responsive support for tablets ② 03:23:21 3-4-5. Responsive support for smartphones (mobile) 03:27:43 3-4-6. Responsive support for smartphones (mini) 03:33:13 3-4-7. How to check responsive settings 3-5. 03:35:50 Let's add the remaining parts 03:36:25 3-5-1. Let's create SNS buttons 03:41:09 3-5-2. Set SNS buttons to be responsive 03:43:34 3-5-3. Set SNS sharing 03:47:29 3-5-4. Create a related article area 03:51:54 3-5-5. Set related articles to be responsive 3-6. 03:53:58 Let's set an irregular width 03:54:01 3-6-1. Adjust the width of the global navigation 03:56:43 3-6-2. Let's double-check the completed page 4. 03:58:27 Create the homepage of your blog site03:59:37 4-1-1. Prepare the base of the homepage04:00:41 4-1-2. Set the base for the main article section04:03:00 4-1-3. Adjust the design of the main article section①04:06:18 4-1-4. Adjust the design of the main article section②04:09:02 4-1-5. Create the sub-article section04:12:39 4-1-6. Deal with differences in height when displayed on a PC04:14:19 4-1-7. Make it compatible with tablets and mobile devices04:16:08 4-1-8. Make it compatible with smartphones (mini)04:17:49 4-1-9. Check the whole picture, make fine adjustments, and finish it off✅ List of social media accounts [TikTok] / yoshi_web [Twitter] / yshirou [Instagram] / shishigami_web