Tiny CSS Projects / Крошечные CSS-проекты Год издания: 2023 Автор: Gearon Michael, Dowden Martine / Гирон Майкл, Дауден Мартина Издательство: Manning Publications ISBN: 978-1633-4398-3-2 Язык: Английский Формат: PDF Качество: Издательский макет или текст (eBook) Интерактивное оглавление: Да Количество страниц: 392 Описание: CSS is a must-know tool for all web developers. In this practical book, you’ll explore numerous techniques to improve the way you write CSS as you build 12 tiny projects. In Tiny CSS Projects you’ll build twelve exciting and useful web projects including: A loading screen created by styling SVG graphics A responsive newspaper layout with multi-columns Animating social media buttons with pseudo-elements Designing layouts using CSS grids Summary cards that utilize hover interactions Styling forms to make them more appealing to your users The projects may be tiny, but the CSS skills you’ll learn are huge! Tiny CSS Projects teaches you how to make beautiful websites and applications by gilding you through a dozen fun coding challenges. You’ll learn important skills through hands-on practice as you tinker with your own code and make real creative decisions about the projects you’re building. You’ll rapidly master the basics and then press on into CSS’s exciting layout features including grid and flexbox, animations, transitions, and media queries. One of the hard parts of learning a new language or skill is extrapolating the individual skills learned into the thing we’re trying to build. Although we may know the mechanics of grid or understand how flex works, learning which to choose and when (or how) to achieve a specific end that we’re envisioning can be challenging. Rather than start with the theory and then apply it to our projects, in this book we took the opposite approach. We started with the project and then looked at which skills and techniques are necessary to achieve our end. But why talk about CSS? We can write an entire application using nothing but browser-provided defaults, but it wouldn’t have much personality, now, would it? With CSS, we can achieve a lot for both our users and our business needs. For everything from brand recognition to guiding users with consistent styles and design paradigms to making the project eye-catching, CSS is an important tool in our toolbox. Regardless of libraries, preprocessors, or frameworks, the underlying technology that drives how our applications and websites look is CSS. With that in mind, so as not to get sidetracked by the individual quirks and functionality of libraries and frameworks, we chose to go back to the basics, writing this book in plain old vanilla CSS because, if we understand CSS, applying it to any other tech stack or environment becomes much easier down the line. about the technology Cascading Style Sheets (CSS) make the web beautiful. Where HTML structures a page and jаvascript gives it additional functionality, CSS handles colors, layouts, and typography—everything that your users love about your site. While CSS is an established tool used in almost all production websites, it’s also evolving to include new features. about the book Tiny CSS Projects develops your CSS skills through 12 delightfully creative mini-projects. Each project sets you up with a premade HTML skeleton for you to use as a foundation for your work. You’ll build up your portfolio of common and useful web designs, including a loading screen, an eCommerce checkout, and animated social media buttons. As you tackle each tiny project, you’ll learn about animation, transitions, layout, styling forms, and even typography. All the skills you master are easy to transfer to full-size applications! Who should read this book? Tiny CSS Projects is for readers who know the basics of HTML and frontend development. No experience in CSS is required. Both beginners and experienced coders will develop a deeper understanding of CSS through this book. Rather than present a theoretical view of CSS, each chapter applies a different part of CSS to a project to demonstrate in practice how CSS works. CSS - это обязательный инструмент для всех веб-разработчиков. В этой практической книге вы познакомитесь с многочисленными техниками, позволяющими улучшить написание CSS при создании 12 крошечных проектов. В Крошечных CSS-проектах вы создадите двенадцать интересных и полезных веб-проектов, включая: Загрузочный экран, созданный с помощью стилизации SVG-графики Адаптивный макет газеты с несколькими колонками Анимация кнопок социальных сетей с помощью псевдоэлементов Разработка макетов с использованием CSS-сеток Сводные карточки, использующие взаимодействие при наведении курсора мыши Стилизуйте формы, чтобы сделать их более привлекательными для ваших пользователей Проекты могут быть крошечными, но навыки работы с CSS, которым вы научитесь, огромны! Tiny CSS Projects научит вас создавать красивые веб-сайты и приложения, пройдя через дюжину увлекательных задач по кодированию. Вы овладеете важными навыками на практике, работая со своим собственным кодом и принимая по-настоящему творческие решения в отношении создаваемых вами проектов. Вы быстро освоите основы, а затем перейдете к захватывающим функциям верстки CSS, включая grid и flexbox, анимацию, переходы и медиа-запросы. Одна из самых сложных частей изучения нового языка или навыка - это экстраполирование приобретенных индивидуальных навыков в то, что мы пытаемся создать. Хотя мы можем знать механику grid или понимать, как работает flex, изучение того, что выбрать и когда (или как) достичь конкретной цели, которую мы себе представляем, может оказаться непростой задачей. Вместо того чтобы начинать с теории, а затем применять ее к нашим проектам, в этой книге мы использовали противоположный подход. Мы начали с проекта, а затем посмотрели, какие навыки и техники необходимы для достижения нашей цели. Но зачем говорить о CSS? Мы можем написать целое приложение, не используя ничего, кроме настроек по умолчанию, предоставляемых браузером, но в нем не будет особой индивидуальности, не так ли? С помощью CSS мы можем многого добиться как для наших пользователей, так и для нашего бизнеса. CSS является важным инструментом в нашем наборе инструментов для всего - от узнаваемости бренда до ориентирования пользователей на согласованные стили и парадигмы дизайна и придания проекту привлекательности. Независимо от библиотек, препроцессоров или фреймворков, базовой технологией, определяющей внешний вид наших приложений и веб-сайтов, является CSS. Имея это в виду, чтобы не отвлекаться на индивидуальные особенности и функциональность библиотек и фреймворков, мы решили вернуться к основам, написав эту книгу на старом простом vanilla CSS, потому что, если мы понимаем CSS, применять его к любому другому технологическому стеку или среде становится намного проще в дальнейшем. линия. О технологии Каскадные таблицы стилей (CSS) делают Веб красивым. Там, где HTML структурирует страницу, а javascript придает ей дополнительную функциональность, CSS обрабатывает цвета, макеты и типографику — все, что нравится вашим пользователям на вашем сайте. Хотя CSS является устоявшимся инструментом, используемым почти на всех производственных веб-сайтах, он также развивается и включает в себя новые функции. О книге Крошечные CSS-проекты развивает ваши навыки работы с CSS с помощью 12 восхитительно креативных мини-проектов. Каждый проект предоставляет вам готовый HTML-каркас, который вы можете использовать в качестве основы для своей работы. Вы создадите свое портфолио распространенных и полезных веб-дизайнов, включая загрузочный экран, оформление заказа в электронной коммерции и анимированные кнопки социальных сетей. Занимаясь каждым крошечным проектом, вы узнаете об анимации, переходах, макете, стилевых формах и даже типографике. Все навыки, которыми вы овладеете, легко перенести в полноразмерные приложения! Кому следует прочитать эту книгу? Крошечные CSS-проекты предназначен для читателей, которые знакомы с основами HTML и разработки интерфейса. Никакого опыта работы с CSS не требуется. Благодаря этой книге как начинающие, так и опытные программисты получат более глубокое понимание CSS. Вместо того чтобы излагать теоретический взгляд на CSS, каждая глава применяет различные части CSS к проекту, чтобы продемонстрировать на практике, как работает CSS.
Примеры страниц
Оглавление
1 CSS introduction 1 2 Designing a layout using CSS Grid 37 3 Creating a responsive animated loading screen 60 4 Creating a responsive web newspaper layout 91 5 Summary cards with hover interactions 121 6 Creating a profile card 146 7 Harnessing the full power of float 176 8 Designing a checkout cart 196 9 Creating a virtual credit card 236 10 Styling forms 271 11 Animated social media share links 308 12 Using preprocessors 330
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum You cannot attach files in this forum You can download files in this forum
![[Quote]](./templates/default/images/lang/en/icon_quote.gif "Reply with quote"){kind=icon}
![[Profile]](./templates/default/images/lang/en/icon_profile.gif "View user's profile"){kind=icon}
![[PM]](./templates/default/images/lang/en/icon_pm.gif "Send private message"){kind=icon}
