CSS Grid in Practice - Learning Web Layouts Through Figma Designs

If you’ve learned the basics of HTML/CSS/JavaScript, it’s time to bring them together into a complete website. Analyze a Figma design, implement it with HTML/CSS, then add JavaScript (jQuery) interactions, make it responsive, and deploy it—experiencing the full process of professional web publishing.

You can enhance your mobile web production skills, which are the most competitive assets for publisher employment and practical publishing work. You will be able to solidify almost all production methods and know-how required to create mobile webs as a publisher. In particular, to cover much of the design ability required of publishers and developers these days, we have provided detailed explanations of the process of working on mobile web UI design using Figma. A key strength of this mobile web publishing course is the detailed instruction on how to create HTML wireframes for every single page. Through this lecture, your ability to create HTML wireframes will improve significantly. In mobile web publishing, you will acquire practical skills comparable to real-world work by learning how to perfectly adjust layouts for mobile and tablet devices using CSS variables (Var). You will fully develop intermediate-to-advanced practical CSS skills, centered around Flex layouts.

Coding Works' self-produced HTML+CSS+FLEX+JQUERY publishing core theory textbook, which summarizes the teaching know-how accumulated over many years. The best publishing theory textbook that summarizes only the core content that is needed, without any unnecessary content. This is a PDF textbook and example file download content for publishing beginners.

Even today, as modern technologies like React have become widespread, jQuery remains a technology you will still encounter when operating and maintaining existing websites and in web publishing work. Rather than simply recreating flashy effects, you will learn the principles and fundamentals of how jQuery works, progressing step by step from events and animations to a variety of UI interactions. Complete your portfolio through hands-on practice and develop practical web publishing skills that you can apply in the workplace.

Theory is kept brief with only the essentials. Let's learn through real code, not just words! Get naturally comfortable with Flex and Grid through repetitive practice! 😎 (Direct lecture by the author of the HTML5 Self-Study White Paper and CSS3 Self-Study White Paper)

From basics to practical application, an all-in-one UI design class mastering everything with Figma! Master essential features like Auto Layout and Components, along with responsive design, efficient handoff, and collaboration skills for real-world work. Start now and upgrade your design capabilities to the next level!

All-in-one course for designers and developers! New UI3 included

In the AI era, web developers need more than coding skills—they need the ability to use AI to turn ideas into real-world results. Build your AI web development skills for practical work and portfolios by gaining hands-on experience creating UIs with Stitch and Figma Make, implementing them in React, and deploying them.

Have you taken your first steps into web development? We have a special offer for those who are just getting started with HTML, CSS, and javascript! Do you want to create a mobile website to keep up with the mobile era, but are unsure where to begin? Don’t worry. By analyzing and implementing a Figma mobile design yourself, you’ll naturally learn the fundamentals of responsive web development. Based on a sophisticated mobile design, you’ll explore everything from subtle interactions that capture users’ attention to techniques that adapt perfectly to a variety of screen sizes. We’ll share our know-how to help your website shine on every device. Shall we get started together?

This is a lecture where you can learn the concepts and usage of flex and grid, the leading CSS layout technologies.

Interactive Web Projects is a series of creative interactive examples created using CSS and JavaScript.

It’s an easy and fun click-through lesson. You can use it as a reference for the direction of your portfolio.

You will design web and app layouts for various devices using Photoshop and Adobe XD programs, and then learn simple coding techniques to implement them yourself.

We have created this so that anyone can pass the 2023 version of the Web Design Function Exam Criteria. Let's learn the 5 types and pass quickly!

We have prepared this for those who want to achieve optimal results by utilizing AI, which is essential in the AI era. In just 2 hours, you can properly learn how to utilize AI through coding.

This is a specialized practical exam lecture optimized for the Web Design & Development Craftsman (formerly Web Design Craftsman) practical exam, strictly adhering to the exam standards effective from January 1, 2025, to December 31, 2027. Coding Works' Web Design & Development Craftsman practical exam lectures, covering HTML+CSS+JQUERY publishing, are different. It includes fully produced instructional videos for all exam types (Types A, B, C, D, E, and F) for the 2026 Web Design & Development Craftsman exam.

This "Real Guide for Getting a Job as a Publisher" e-book (PDF) provides detailed information on the HTML+CSS+JQUERY publishing fundamentals essential for employment. It covers efficient publishing study methods, how to identify high-quality courses and instructors, tips for publishing like a professional even as a newcomer, desirable coding habits and principles, how to create a personal portfolio website, collaboration tips for working with designers and developers, essential websites every publisher should know, and how to improve Photoshop UI design skills. Additionally, it provides a detailed explanation of government-funded publisher training programs.

Coding Works has put its heart and soul into creating this course based on its experience of mentoring over 200 offline academy students on their new publisher job portfolios. The course on creating a publisher ‘personal portfolio website’ that will get you interviews and jobs is a thorough guide that tells you how and where to start preparing your personal portfolio website, which is essential for getting a job as a publisher. The course contains over 19 hours of content. It covers all the essential publishing requirements before creating a personal portfolio website, the publishing basics that are most important for getting a job and working in the field, jQuery and JavaScript & coding missions for getting a job, how to create portfolio results to put on your personal portfolio website, content layouts and details for each section of your personal portfolio website, how to distinguish companies to apply to, and tips for real publisher interviews.

This is a good example to practice even if it is not a certification exam. Let's slowly follow the B-3 type of web design technician practice.

To get a job, you need to go on interviews frequently. To secure those interviews, having a high-quality personal publisher portfolio website is essential. This is a premium guide (PDF) for creating a personal portfolio website, meticulously crafted by Coding Works. The content in this guide cannot be found through simple Google searches. It is a one-of-a-kind guide (PDF) for building a publisher job-search portfolio, containing detailed methods developed by Coding Works through years of experience teaching publishing theory, practical skills, and portfolio creation to over 300 students to help them get hired quickly by their desired companies.