プロになる基礎から実践まで!WebデザインからHTML5・CSS3(Sass)でのコーディングを全て学べる講座

Learn the complete process of website creation, from initial planning to a finished product! This course takes you through the entire workflow, covering design, prototyping, and coding to build a modern, responsive website.

思考編 (Thinking/Planning)

• Understand the crucial considerations before you start building a website.
• Develop a strong foundation for your project.
• Practical application: Create a wireframe – the blueprint for your site.

デザイン編 (Design)

• Transform your wireframe into a visually appealing design using Adobe XD.
• Learn to create professional website designs.
• Explore modern design trends, including web font usage and engaging animations.
• Practice creating a complete website design.

コーディング編 (Coding)

• Master HTML5 and Sass (SCSS) to bring your design to life.
• Build a functional self-introduction page from scratch.
• All code is responsive, ensuring your website looks great on any device.

Practical Application: Full Workflow

This course replicates my actual work process, providing a comprehensive understanding of the entire website development lifecycle. We'll cover:

• Prototyping with Adobe XD.
• How to effectively gather and incorporate design feedback.
• Implementation of current design trends.

Project Deliverables:

You'll build a fully functional website with:

• Blog Top Page
• Article Listing Page
• Article Detail Page

Technologies Used:

• Languages: HTML5, CSS3, Sass, jQuery
• Tools: Photoshop, Adobe XD, Atom, Google Chrome
• External Services: Google Fonts (including early access to Japanese fonts!), Font Awesome, ress

System Requirements:

The course demonstrates workflows on both Mac (macOS High Sierra) and Windows (Windows 10). While the initial part of the course uses macOS, the workflow seamlessly transitions to Windows. The interface differences are minimal, making it accessible for both Mac and Windows users.

Who is this course for?

This course is perfect for:

• Anyone wanting to learn the complete website development process.
• Those interested in focusing on either coding or design.
• Individuals looking to build a modern, responsive website.