{"product_id":"154468","title":"My first HTML \u0026amp; CSS web design ","description":"\u003ccenter\u003e\u003cdiv style=\"text-align:center\"\u003e\u003cimg src=\"https:\/\/tmgdisk01.cafe24.com\/images\/vs\/4172\/sv\/3jYDPL20NSC8rtOCTGAXrn3p80QtST.png?v=1765080247\" 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 My first HTML \u0026amp; CSS web design \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\/122494314\/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\u003ctable\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003e\u003cdiv\u003e\u003cdiv\u003e \u003cb\u003eI've been waiting for a web design book this easy.\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e Even if you know nothing about web development, you can learn the basics of HTML and CSS with just this one book.\u003cbr\u003e Cute cartoons and rich illustrations add to the fun of viewing.\u003cbr\u003e Learn the basics, as well as Flexbox layout, CSS grid layout, responsive web design, and CSS animation, by following the steps of creating a collection of social media links, a blog site, a web invitation site, and a restaurant site with a stunning web design. \u003cbr\u003eThe appendix provides information on how to publish a website, a collection of recommended sites to help you build it, a cheat sheet, and sample design XD data for the site.\u003cbr\u003e\u003cbr\u003e\n\u003c\/div\u003e\u003c\/div\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/tbody\u003e\u003c\/table\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\n\u003cbr\u003e\u003cdiv\u003e\u003ch5\u003e \u003cb\u003eindex\u003c\/b\u003e\n\u003c\/h5\u003e\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cdiv\u003e Translator's Preface x\u003cbr\u003e Beta Reader Review xii\u003cbr\u003e Introduction xiii\u003cbr\u003e How to Read This Book xv\u003cbr\u003e Learning Points for Each Part xvi\u003cbr\u003e Sites to be created in this book xvii\u003cbr\u003e Download training data xxi\u003cbr\u003e Download the four appendices xxii\u003cbr\u003e Prologue comic xxvi\u003cbr\u003e\u003cbr\u003e \u003cb\u003ePART 1 Writing HTML\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e CHAPTER 1 Before You Begin\u003cbr\u003e SECTION 1 Before You Begin Learning 2\u003cbr\u003e SECTION 2 Understanding the Structure of a Website 3\u003cbr\u003e SECTION 3 Installing Required Applications 4\u003cbr\u003e SECTION 4 Learning Effectively 9\u003cbr\u003e SECTION 5 Warming Up with a Super-Simple Example 12\u003cbr\u003e\u003cbr\u003e CHAPTER 2 HTML Basics\u003cbr\u003e SECTION 1 Why Markup Matters 14\u003cbr\u003e SECTION 2: Summarizing the Love Letter Contents 16\u003cbr\u003e SECTION 3: Taking Your First Steps with HTML 20\u003cbr\u003e SECTION 4 Marking Up Your Love Letter 24 \u003cbr\u003eSECTION 5: Writing Readable Code 38\u003cbr\u003e\u003cbr\u003e \u003cb\u003ePART 2 Creating a SNS Link Collection Page\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e Sites to be created in this part → SNS link collection site 42\u003cbr\u003e\u003cbr\u003e CHAPTER 3 CSS Basics\u003cbr\u003e SECTION 1: Getting Started with CSS 44\u003cbr\u003e SECTION 2 USING DEVELOPER TOOLS 46\u003cbr\u003e SECTION 3 Connecting HTML and CSS 48\u003cbr\u003e SECTION 4 Resetting the Browser's Default Styles 52\u003cbr\u003e SECTION 5 Understanding the Box Model 54\u003cbr\u003e\u003cbr\u003e CHAPTER 4 Writing CSS for SNS Link Collections\u003cbr\u003e SECTION 1 Writing CSS 56\u003cbr\u003e\u003cbr\u003e \u003cb\u003ePART 3 Creating a Two-Column Page\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e Site to be created in this part → 2-column layout design 74\u003cbr\u003e\u003cbr\u003e CHAPTER 5: Writing HTML for Your Blog Site\u003cbr\u003e SECTION 1 Distinguishing Website Areas 76\u003cbr\u003e SECTION 2 Marking Up Your Blog's Document Structure 78\u003cbr\u003e SECTION 3 Understanding Outlines and Sections 83\u003cbr\u003e SECTION 4 Learning Other New HTML Tags 86\u003cbr\u003e\u003cbr\u003e CHAPTER 6 Writing CSS for Your Blog Site\u003cbr\u003e SECTION 1 Understanding Flexbox Layout 90\u003cbr\u003e SECTION 2 Writing CSS for the entire page and header 94 \u003cbr\u003eSECTION 3 Writing CSS for the Main Area and Sidebar 100\u003cbr\u003e SECTION 4 Writing CSS for the Article Area and Footer 110\u003cbr\u003e\u003cbr\u003e \u003cb\u003ePART 4 ​​Creating a 1-column page\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e Site to be created in this part → 1-column layout design 120\u003cbr\u003e\u003cbr\u003e CHAPTER 7: Writing HTML for a Web Invitation Site\u003cbr\u003e SECTION 1 Understanding HTML Structure 122\u003cbr\u003e SECTION 2 Inserting Internal Links on Page 124\u003cbr\u003e SECTION 3 Marking Up Forms 125\u003cbr\u003e\u003cbr\u003e CHAPTER 8: Writing CSS for a Web Invitation Site\u003cbr\u003e SECTION 1 CSS Writing Order 132\u003cbr\u003e SECTION 2 How to Use Web Fonts 134\u003cbr\u003e SECTION 3 Writing Font-Related CSS 136\u003cbr\u003e SECTION 4 Writing Layout-Related CSS 137\u003cbr\u003e SECTION 5 Writing Common Design CSS 139\u003cbr\u003e SECTION 6 Writing Header CSS 140\u003cbr\u003e SECTION 7 Writing CSS for the msg Section 149\u003cbr\u003e SECTION 8 Writing CSS for the Date Section 153\u003cbr\u003e SECTION 9 Writing CSS for the form section 157\u003cbr\u003e SECTION 10 Writing CSS Footer and Parallax Effects 162\u003cbr\u003e\u003cbr\u003e CHAPTER 9 Adding CSS Animations\u003cbr\u003e SECTION 1 CSS Animation Basics 164\u003cbr\u003e \u003cbr\u003eCHAPTER 10 Supporting Responsive Web Design\u003cbr\u003e SECTION 1 Basics of Multi-Device Support 170\u003cbr\u003e SECTION 2 Preparing for Responsive Web Design 172\u003cbr\u003e SECTION 3 Placing Each Part on the Screen 177\u003cbr\u003e SECTION 4 Adjusting the design of each part 180\u003cbr\u003e SECTION 5 Creating Images for High-Resolution Displays 184\u003cbr\u003e\u003cbr\u003e \u003cb\u003ePART 5: CREATING A MULTI-PAGE SITE\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e Site to be created in this part → Multi-page site 188\u003cbr\u003e\u003cbr\u003e CHAPTER 11: The Basics of Website Creation and Web Design\u003cbr\u003e SECTION 1 Website Creation Process 190\u003cbr\u003e SECTION 2 Web Design Overview 193\u003cbr\u003e SECTION 3 Web Design Fundamentals 194\u003cbr\u003e\u003cbr\u003e CHAPTER 12: Writing CSS for a Restaurant Site (Mobile)\u003cbr\u003e SECTION 1: Points for Creating a Multi-Page Site 198\u003cbr\u003e SECTION 2 Writing CSS for the TOP Page 200\u003cbr\u003e SECTION 3 CONCEPT Writing Page CSS 208\u003cbr\u003e SECTION 4 Writing CSS for the MENU Page 220\u003cbr\u003e SECTION 5 Writing CSS for the INFO Page 224\u003cbr\u003e\u003cbr\u003e CHAPTER 13: Writing CSS for a Restaurant Site (PC)\u003cbr\u003e SECTION 1 Writing CSS for the TOP Page (PC) 234 \u003cbr\u003eSECTION 2: Writing CSS for the CONCEPT Page (PC) 240\u003cbr\u003e SECTION 3 Writing CSS for the MENU Page (PC) 246\u003cbr\u003e SECTION 4 Writing CSS for the INFO Page (PC) 248\u003cbr\u003e\u003cbr\u003e CHAPTER 14 Learning How to Use Reference Sites\u003cbr\u003e SECTION 1 Using Information on the Web 250\u003cbr\u003e SECTION 2 Embedding Sample Code into Your Site 252\u003cbr\u003e\u003cbr\u003e CHAPTER 15 Preparing Your Website for Public Release\u003cbr\u003e SECTION 1 Setting a Favicon 254\u003cbr\u003e SECTION 2 Setting Up OGP 256\u003cbr\u003e\u003cbr\u003e Study Methods After Reading This Book 258\u003c\/div\u003e\n\u003cdiv\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cbr\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\/TopCate4296\/MidCate006\/429557820(1).jpg\" border=\"0\" alt=\"Detailed Image 1\"\u003e\u003c\/div\u003e\u003c\/div\u003e\n\u003cbr\u003e\u003cdiv\u003e\u003ch5\u003e \u003cb\u003eInto the book\u003c\/b\u003e\n\u003c\/h5\u003e\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cdiv\u003e\n\u003cdiv\u003e CSS is an acronym for Cascading Style Sheets.\u003cbr\u003e 'Cascading' is a word that means a waterfall in the shape of steps, and it came to mean flowing (inheriting) from top to bottom like that shape.\u003cbr\u003e \/ As explained earlier, HTML is made up of a nested structure of elements (page 23).\u003cbr\u003e Inheritance refers to the property whereby child elements inherit the CSS specified in the parent element. \u003cbr\u003e\/ Remember that not all CSS is inherited, but any CSS you specify on a parent element will by default be applied to its child elements.\u003cbr\u003e\u003cbr\u003e --- p.44\u003cbr\u003e\u003cbr\u003e HTML documents only contain semantic information and do not dictate visual effects such as changing the font size or line breaks.\u003cbr\u003e \/ The text marked as a title becomes larger and line-wrapped in the browser because the browser applies its own style to the title element.\u003cbr\u003e \/ These styles are called 'browser default styles'.\u003cbr\u003e The official name is User Agent Stylesheet.\u003cbr\u003e Because there is no unified specification for basic CSS, different styles may be applied depending on the browser.\u003cbr\u003e\u003cbr\u003e --- p.52\u003cbr\u003e \u003cbr\u003eThe margin-bottom:40px; specified in STEP1 and the margin-top:80px; specified in STEP2 specify margins in the same area, but it does not result in a margin of 40px + 80px = 120px.\u003cbr\u003e \/ This is a phenomenon that occurs when specifying the vertical margins of adjacent elements, and is called margin collapsing.\u003cbr\u003e \/\u003cbr\u003e When a margin offset occurs, the larger value of the margin applies.\u003cbr\u003e --- p.151\u003cbr\u003e\u003cbr\u003e Mobile First is a way of thinking that optimizes a site for the characteristics of mobile devices when designing it.\u003cbr\u003e For example, consider the characteristics of small screen size, limited communication data, and intermittent viewing while on the move.\u003cbr\u003e \/ Please note that this is not simply a work order of 'starting with the mobile version'.\u003cbr\u003e\u003cbr\u003e --- p.191\u003cbr\u003e \u003cbr\u003eDesign is often understood as something that makes the appearance beautiful, but the etymology of the word design (designare) contains the meaning of designing.\u003cbr\u003e \/ As seen in the production flow, there are several processes to create a design draft, and web design is established after all of these processes have been completed.\u003cbr\u003e \/ In other words, web design is not just about making the appearance beautiful, but it is also designed to suit the target users or the purpose of the site.\u003cbr\u003e \/ As the target or purpose changes, the definition of good design also changes.\u003cbr\u003e --- p.193\u003cbr\u003e\u003cbr\u003e There are times when the aspect ratio of images used on PCs with horizontal screens is different from that of smartphones with vertical screens.\u003cbr\u003e You can prepare multiple images and swap them out depending on the device, but you can support various devices with a single image by using the object-fit property. \u003cbr\u003e\/ The object-fit property specifies how the image is displayed within the area occupied by the element.\u003cbr\u003e objectposition\u003cbr\u003e When used together, you can also specify which part of the image to display.\u003cbr\u003e\n\n\u003c\/div\u003e\n\u003cdiv\u003e --- p.218\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cbr\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 \u003cb\u003eMy first web design book: easy to learn, fun, and with stunning results.\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e Everyone has probably dreamed of having their own website at least once.\u003cbr\u003e The editor of this book also created a website as soon as he learned to code.\u003cbr\u003e I tried to make it somehow using a template, but I had no idea how to make it look better.\u003cbr\u003e As I was editing this book, I realized that this was exactly the beginner's web design book I had been looking for.\u003cbr\u003e When we open the book, the cute capybara character 'Capyjou' greets us. \u003cbr\u003eCopyzoo creates a website collecting social media links to ask Copyko out on dates, and a business blog site to promote his carrot farm.\u003cbr\u003e Copyzou, who decided to marry Kapiko, also creates a web invitation site and opens a restaurant, creating a restaurant site.\u003cbr\u003e By following Copyzoo's life, you will be able to create four different types of amazing websites of your own.\u003cbr\u003e The explanations of the 'human' web designers and markup designers that appear here and there are easy to understand and cover the core of web design.\u003cbr\u003e We teach you step by step from the basics, so even those who start with no relevant knowledge will have no problem.\u003cbr\u003e There are four appendices in total.\u003cbr\u003e 'How to Make Your Website Public' teaches you how to make your 'own website' public, and 'Recommended Sites' introduces 47 sites that the author (or translator) actually uses in his\/her work. \u003cbr\u003e'Sample Design XD Data' can be used for practice, such as image cropping or color extraction, and can be used as a reference when creating design files.\u003cbr\u003e The most useful appendix, the 'cheat sheet', can be referenced not only while studying but also as you create and manage your website in the future.\u003cbr\u003e Highly recommended for beginners who want to learn how to build a website from scratch, and for those who want to become a web designer.\u003cbr\u003e\u003cbr\u003e Key Contents\u003cbr\u003e - HTML \u0026amp; CSS Basics\u003cbr\u003e -SNS link collection site\u003cbr\u003e -Blog site\u003cbr\u003e -Web invitation site\u003cbr\u003e -CSS animation\u003cbr\u003e -Responsive web design\u003cbr\u003e -Restaurant site\u003cbr\u003e -How to make your website public \u003c\/div\u003e\n\u003cdiv\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\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 October 6, 2023\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 288 pages | 188*245*20mm\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 9791192987149\u003c\/div\u003e\n\n\u003cdiv style=\"width:100%;margin-bottom:5px;line-height:1.6em;font-size:14px\"\u003e - \u003cstrong\u003eISBN10:\u003c\/strong\u003e 1192987144 \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":43893429108778,"sku":"154468","price":34.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0683\/2750\/5962\/files\/7d090b594d81de4b41f4d305fb03ec0f.jpg?v=1765401621","url":"https:\/\/librairie.coreenne.fr\/en\/products\/154468","provider":"LIBRAIRIE COREENNE","version":"1.0","type":"link"}