{"product_id":"138706","title":"Interactive Web Animation for Front-End Developers ","description":"\u003ccenter\u003e\u003cdiv style=\"text-align:center\"\u003e\u003cimg src=\"https:\/\/tmgdisk01.cafe24.com\/images\/vs\/4172\/sv\/3jXPCfBVw5Yn7JvnxyrZ4eLVrTVTBH.png?v=1765066996\" style=\"max-width:100%;max-height:10px\"\u003e\u003c\/div\u003e\u003c\/center\u003e\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\u003ccenter\u003e\n\n\u003cdiv style=\"width:95%\"\u003e\n\n\u003cdiv style=\"text-align:center;font-size:30px;font-weight:bolder;line-height:1.6em\"\u003e Interactive Web Animation for Front-End Developers \u003c\/div\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003cdiv style=\"border-bottom:1px;border-bottom-style:dotted;border-color:;padding-bottom:20px\"\u003e\u003ccenter\u003e\u003ctable align=\"center\" width=\"100%\"\u003e\u003ctbody style=\"border:0px\"\u003e\n\n\u003ctr\u003e\u003ctd align=\"center\" style=\"line-height:1.2em;text-align:center;font-size:18px;color:black;font-weight:bold;padding-bottom:20px;\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\n\n\u003ctr\u003e\u003ctd style=\"text-align:center\"\u003e\u003cimg src=\"https:\/\/image.yes24.com\/goods\/148062602\/XL\" style=\"max-width:100%;height:auto\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\n\n\n\u003c\/tbody\u003e\u003c\/table\u003e\u003c\/center\u003e\u003c\/div\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003cdiv style=\"width:95%;{split_style6}padding-top:20px;padding-bottom:20px\"\u003e\n\n\u003cdiv style=\"text-align:left;font-size:16px;font-weight:bold;padding-bottom:20px\"\u003e Description \u003c\/div\u003e\n\n\u003cdiv style=\"text-align:left;word-break:break-all;font-size:14px;line-height:1.6em;\"\u003e\n\n\u003cdiv\u003e\u003ch5\u003e \u003cb\u003eBook Introduction\u003c\/b\u003e\n\u003c\/h5\u003e\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cdiv\u003e\u003cdiv\u003e \u003cb\u003eFrom web developers to designers,\u003cbr\u003e A practical guide to web interactive use for everyone!\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e \"Interactive Web Animation for Front-End Developers\" is one of the most practical web development books available.\u003cbr\u003e By implementing animation effects that are actually used, you can learn technical understanding along with implementation methods.\u003cbr\u003e Additionally, the book focuses on user experience (UX) and explains how to apply animations and improve the user experience. \u003cbr\u003eThis content is very useful and helpful not only for web developers, but also for UX designers, designers, planners, and anyone else who builds web services.\u003cbr\u003e\u003cbr\u003e This book is largely divided into 12 chapters.\u003cbr\u003e Chapters 1 through 5 cover the basic concepts of HTML, CSS, and JavaScript before moving on to interactive web practice.\u003cbr\u003e In detail, Chapter 1 covers setting up an environment for front-end web development, Chapter 2 covers basic HTML concepts, Chapter 3 covers basic CSS concepts, and Chapter 4 covers additional knowledge for interactive web.\u003cbr\u003e Chapter 5 supplements the basic concepts of JavaScript, and from Chapter 6 onwards, we will implement and practice various interactive web applications used in actual work.\u003cbr\u003e Starting in Chapter 11, you'll learn how to create advanced interactive web content and web games using the React framework and the Three.js library. \u003cbr\u003eWith a hands-on approach, you can immediately apply the completed code to your portfolio, making this book ideal for readers who want to understand interactive web development.\u003cbr\u003e\n\n\u003c\/div\u003e\u003c\/div\u003e\n\u003cdiv\u003e\u003cul\u003e\u003cli\u003e You can preview some of the book's contents.\u003cbr\u003e \u003cspan\u003ePreview\u003c\/span\u003e\n\n\u003c\/li\u003e\u003c\/ul\u003e\u003c\/div\u003e\n\u003c\/div\u003e \",\"\u003cdiv\u003e\u003ch5\u003e \u003cb\u003eindex\u003c\/b\u003e\n\u003c\/h5\u003e\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cdiv\u003e Chapter 1: Web Front-End Development: Preparing for Your Work Environment\u003cbr\u003e 1-1 Front-end Development Onboarding\u003cbr\u003e 1-2 Setting up your working environment - browser, Node.js\u003cbr\u003e 1-3 Configuring the working environment - IDE\u003cbr\u003e 1-4 Configuring Your Work Environment - Installing and Setting Up VS Code Extensions\u003cbr\u003e\u003cbr\u003e Chapter 2: Learning HTML Grammar\u003cbr\u003e 2-1 HTML (Hyper Text Markup Language)\u003cbr\u003e 2-2 The 〈meta〉 tag and how browsers work\u003cbr\u003e 2-3 Types of HTML elements and HTML debugging\u003cbr\u003e 2-4 Learn commonly used HTML basic elements\u003cbr\u003e\u003cbr\u003e Chapter 3: Learning CSS Grammar\u003cbr\u003e 3-1 CSS files and basic settings\u003cbr\u003e 3-2 Using CSS selectors\u003cbr\u003e 3-3 CSS Layout\u003cbr\u003e 3-4 Using web page resources\u003cbr\u003e\u003cbr\u003e Chapter 4: Adding UI and UX to the Web\u003cbr\u003e 4-1 What is the Interactive Web? \u003cbr\u003e4-2 Make the layout gradually exposed\u003cbr\u003e Animation from the 4-3 card list\u003cbr\u003e 4-4 Using SVG\u003cbr\u003e 4-5 Responsive Web\u003cbr\u003e\u003cbr\u003e Chapter 5: Learning JavaScript Grammar\u003cbr\u003e 5-1 Creating a JavaScript File\u003cbr\u003e 5-2 Setting up JavaScript\u003cbr\u003e 5-3 Using the JavaScript DOM\u003cbr\u003e 5-4 JavaScript Events\u003cbr\u003e 5-5 JavaScript functions\u003cbr\u003e 5-6 Asynchronous processing\u003cbr\u003e\u003cbr\u003e Chapter 6: Creating a Responsive Card Layout Loading UI\u003cbr\u003e 6-1 Responsive Card Layout and Spinner UI\u003cbr\u003e 6-2 SVG Loading UI\u003cbr\u003e 6-3 Skeleton UI\u003cbr\u003e\u003cbr\u003e Chapter 7: Eye-Catching Interactive Login\u003cbr\u003e 7-1 Login Form Layout\u003cbr\u003e 7-2 Implementing an eye that follows the input field\u003cbr\u003e\u003cbr\u003e Chapter 8: Responsive Dashboards Using Grid Layout and Dynamic UI\u003cbr\u003e 8-1 Creating a Dashboard Using Grid\u003cbr\u003e 8-2 Creating a Card UI and a List UI with a Single HTML\u003cbr\u003e 8-3 Creating a mobile menu (position fixed)\u003cbr\u003e 8-4 Dark Mode and Light Mode\u003cbr\u003e Implementing the 8-5 Like feature\u003cbr\u003e 8-6 Saving state when leaving a web page\u003cbr\u003e 8-7 Creating a search function\u003cbr\u003e \u003cbr\u003eChapter 9: Creating a Landing Page That Converts Pages\u003cbr\u003e 9-1 Markup with SEO in mind\u003cbr\u003e 9-2 FullPage Animation Using Scroll-Snap-Type and Animation-Timeline\u003cbr\u003e 9-3 Minimizing Media Query Work for Responsive Environments\u003cbr\u003e 9-4 Using the @supports keyword for unsupported browsers\u003cbr\u003e 9-5 Theme Management Using setProperty in JavaScript\u003cbr\u003e 9-6 State Management Using Proxies and Observers\u003cbr\u003e 9-7 Backward function, rendering optimization, and smooth content exposure\u003cbr\u003e\u003cbr\u003e Chapter 10: Weather Application Using External APIs\u003cbr\u003e 10-1 What is a REST API?\u003cbr\u003e 10-2 Issuing API KEY\u003cbr\u003e 10-3 Weather Application Markup\u003cbr\u003e 10-4 Weather Application Styling\u003cbr\u003e 10-5 Learning JavaScript Class Grammar\u003cbr\u003e 10-6 Get and display weather information\u003cbr\u003e 10-7 Change weather units\u003cbr\u003e 10-8 Create a video transition effect based on the weather\u003cbr\u003e 10-9 Creating a Weather Search Function\u003cbr\u003e\u003cbr\u003e Chapter 11 Rotating Donut Along the Scroll (R3F)\u003cbr\u003e 11-1 React and Three.js\u003cbr\u003e 11-2 Setting up a React development environment using Vite \u003cbr\u003e11-3 Setting up a Three.js development environment using R3F\u003cbr\u003e 11-4 Creating a box that rotates according to the scroll\u003cbr\u003e 11-5 Applying the GSAP Library\u003cbr\u003e 11-6 Creating a Donut That Rotates with the Scroll\u003cbr\u003e 11-7 Creating a Scroll Donut Landing Page\u003cbr\u003e\u003cbr\u003e Chapter 12: Creating Web Games Using WebGL\u003cbr\u003e 12-1 Creating a Game Project and Setting Up Basic Settings\u003cbr\u003e 12-2 Loading 3D characters using useGLTF\u003cbr\u003e 12-3 Creating environmental and directional lighting\u003cbr\u003e 12-4 Configuring Camera Position and Movement\u003cbr\u003e 12-5 Creating a floor using TextureLoader\u003cbr\u003e 12-6 Character size adjustment and animation application\u003cbr\u003e 12-7 Implementing character movement with mouse interaction\u003cbr\u003e Implementing character jumps with 12-8 keyboard interactions\u003cbr\u003e Implementing soccer ball exposure through the 12-9 event\u003c\/div\u003e\n\u003cdiv\u003e\u003c\/div\u003e\n\u003c\/div\u003e \",\"\u003cdiv\u003e\u003ch5\u003e \u003cb\u003eDetailed image\u003c\/b\u003e \u003c\/h5\u003e\u003c\/div\u003e\n\u003cdiv\u003e\u003cdiv\u003e\u003cimg src=\"https:\/\/image.yes24.com\/momo\/TopCate5388\/MidCate007\/538763036.png\" border=\"0\" alt=\"Detailed Image 1\"\u003e\u003c\/div\u003e\u003c\/div\u003e \",\"\u003cdiv\u003e\u003ch5\u003e \u003cb\u003ePublisher's Review\u003c\/b\u003e\n\u003c\/h5\u003e\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cdiv\u003e We will help you thoroughly prepare for web front-end development.\u003cbr\u003e We will teach you HTML, CSS, and JavaScript grammar that you must know before learning front-end in earnest. \u003cbr\u003eSo even people who don't know anything about the web can start with this book.\u003cbr\u003e\u003cbr\u003e Implement a website UI\u003cbr\u003e This book goes beyond simply learning grammar; it teaches you the concepts of animation by implementing frequently used UI components, such as loading screens, card lists, and responsive layouts, that are actually applied to websites.\u003cbr\u003e\u003cbr\u003e Create interactive web experiences that respond to user behavior.\u003cbr\u003e You'll learn a variety of techniques for creating dynamic web pages that engage users, such as content appearing naturally based on scroll position and animations that begin when certain elements enter the screen.\u003cbr\u003e\u003cbr\u003e Implementing animation features linked to data\u003cbr\u003e We create web apps that link real-time data, such as weather APIs and fine dust APIs, and whose UI changes based on current weather or environmental information. \u003cbr\u003eYou can practice UI design that considers both functional data processing and visual responses, thereby developing a sense for service planning.\u003cbr\u003e\u003cbr\u003e Learning support through the author's YouTube lectures, GitHub, etc.\u003cbr\u003e Please practice the book thoroughly through the author's direct lecture videos on Youngjin.com's IT YouTube lectures.\u003cbr\u003e Youngjin.com IT YouTube Channel: https:\/\/www.youtube.com\/@IT-Youngjin\u003cbr\u003e GitHub address: https:\/\/github.com\/Youngjin-com\/interactive_web\u003cbr\u003e\u003cbr\u003e Learn the fundamentals and structure of web front-ends, complete web UI, and implement interactive, user-focused web experiences.\u003cbr\u003e\u003cbr\u003e \u003cb\u003e【 Target Readership 】\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e - Beginners and junior developers who are unfamiliar with implementing UI animations\u003cbr\u003e - Web planners and designers who want to deeply understand UI\/UX\u003cbr\u003e - Job seekers who want to add a high-quality project to their portfolio\u003cbr\u003e\u003cbr\u003e \u003cb\u003eAuthor's Note\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e This is truly the era of AI. \u003cbr\u003eWe stand at a huge turning point, where artificial intelligence is rapidly replacing human occupations and we are moving towards a future no one has ever seen before.\u003cbr\u003e In this day and age, you might be wondering if it's even necessary to learn the fundamentals of front-end development. AI can write code, suggest designs, and even contribute to the implementation of entire services.\u003cbr\u003e\u003cbr\u003e However, I dare to assert through this book that there are core values ​​of front-end development that will remain unchanged—if not, even become even more important—in the AI ​​era. AI is merely a tool, and it remains our responsibility as human developers to utilize it to deliver the best possible experience to users.\u003cbr\u003e The ability to accurately understand a planner's intent, translate a designer's vision into code, and identify and improve even subtle user inconveniences is a realm that AI cannot easily surpass.\u003cbr\u003e \u003cbr\u003eThis book goes beyond simply slapping together code, and aims to expose you to the inherent fun and creative possibilities of web front-end development.\u003cbr\u003e Rather than complex theories, we've structured it in a friendly and intuitive way so that you can gain hands-on experience and insight while creating an actual website.\u003cbr\u003e\u003cbr\u003e In Chapter 1, you'll build a solid working environment for development, and in Chapters 2 and 3, you'll learn the grammar of HTML, the backbone of the web, and CSS, which dresses it up.\u003cbr\u003e In Chapter 4, you'll learn how to integrate UI\/UX elements that enhance the user experience into the web, and Chapter 5 delves into the JavaScript syntax that makes the web dynamic.\u003cbr\u003e\u003cbr\u003e And based on all this knowledge, we will create an actual project starting from Chapter 6. \u003cbr\u003eYou'll experience the joy of front-end development by implementing a variety of web components you'll see in real-world services, including responsive card layouts, interactive logins, dynamic dashboards, and page transition landing pages.\u003cbr\u003e Beyond that, there are a variety of projects waiting to spark your imagination, from weather applications utilizing external APIs, scroll interactions, and even web games using WebGL.\u003cbr\u003e\u003cbr\u003e I sincerely hope that through this book, you will go beyond simply acquiring skills and grow into a front-end developer who can freely implement your own ideas on the web and deliver value to users.\u003cbr\u003e\n\n\u003c\/div\u003e\n\u003cdiv\u003e\u003c\/div\u003e\n\u003c\/div\u003e \"]\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003cdiv style=\"width:95%;padding-top:20px;padding-bottom:20px\"\u003e\n\n\u003cdiv style=\"text-align:left;font-size:16px;font-weight:bold;padding-bottom:20px\"\u003e GOODS SPECIFICS \u003c\/div\u003e\n\n\u003cdiv style=\"text-align:left;font-size:14px;line-height:1.6em;\"\u003e\n\n\u003cdiv style=\"width:100%;margin-bottom:5px;line-height:1.6em;font-size:14px\"\u003e - \u003cstrong\u003eDate of issue:\u003c\/strong\u003e July 1, 2025\u003c\/div\u003e\n\n\u003cdiv style=\"width:100%;margin-bottom:5px;line-height:1.6em;font-size:14px\"\u003e - \u003cstrong\u003ePage count, weight, size:\u003c\/strong\u003e 816 pages | 1,662g | 189*257*32mm\u003c\/div\u003e\n\n\u003cdiv style=\"width:100%;margin-bottom:5px;line-height:1.6em;font-size:14px\"\u003e - \u003cstrong\u003eISBN13:\u003c\/strong\u003e 9788931479393 \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003ccenter\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003cspan\u003e\u003c\/span\u003e\n\n\u003c\/center\u003e\n\n\n\u003c\/center\u003e","brand":"LIBRAIRIE COREENNE","offers":[{"title":"Default Title","offer_id":43893275492394,"sku":"138706","price":58.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0683\/2750\/5962\/files\/075ab68cba8b99c6bacf2a8c1a46aa36.jpg?v=1765395224","url":"https:\/\/librairie.coreenne.fr\/en\/products\/138706","provider":"LIBRAIRIE COREENNE","version":"1.0","type":"link"}