Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    Only $11.99/month after trial. Cancel anytime.

    Tiny CSS Projects
    Tiny CSS Projects
    Tiny CSS Projects
    Ebook728 pages5 hours

    Tiny CSS Projects

    By Martine Dowden and Michael Gearon

    ()

    Read preview

    About this ebook

    CSS is a must-know language 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 multiple 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 guiding 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.

    About the Technology

    Don’t settle for boring web pages! With Cascading Style Sheets you can control color, layout, and typography to make your sites both functional and beautiful. CSS is a essential skill for web developers and designers. This book will help you get started the right way.

    About the Book

    Tiny CSS Projects builds your CSS skills by guiding you through 12 creative mini-projects. Each interesting challenge starts with a downloadable HTML skeleton. As you flesh it out with your own design ideas, you’ll master CSS concepts like transitions, layout, and styling forms, and explore powerful features including Flexbox and Grid. All the skills you’ll learn are easy to transfer to full-size applications. When you finish, you’ll have an exciting portfolio of designs ready to go for your next project.

    What's Inside

    • Transitions and animations using keyframes
    • Layout techniques including Grid and Flexbox
    • Styling form elements including radio buttons
    • Embedding fonts and typography-related styles
    • Conditional styling using pseudo-elements and media queries

    About the reader

    For readers who know the basics of HTML and frontend development. No previous experience with CSS is required.

    About the author

    Martine Dowden is an author, speaker, and award-winning CTO. Michael Gearon is a user experience designer and frontend developer who has worked with many well-known brands.

    Table of Contents

    1 CSS introduction
    2 Designing a layout using CSS Grid
    3 Creating a responsive animated loading screen
    4 Creating a responsive web newspaper layout
    5 Summary cards with hover interactions
    6 Creating a profile card
    7 Harnessing the full power of float
    8 Designing a checkout cart
    9 Creating a virtual credit card
    10 Styling forms
    11 Animated social media share links
    12 Using preprocessors
    LanguageEnglish
    PublisherManning
    Release dateSep 5, 2023
    ISBN9781638352075
    Tiny CSS Projects
    Author

    Martine Dowden

    An award winning CTO, UX/UI designer and developer, international speaker, and author, Martine Dowden focuses on web interfaces that are beautiful, functional, accessible, and usable. She has worked as an developer, artist, educator, and consultant since 2005. Martine has been awarded the Microsoft MVP award and Google Developer Expert in both the Web Technologies and Angular categories.

    Read more from Martine Dowden

    Related to Tiny CSS Projects

    Related ebooks

    Internet & Web For You

    View More
    View More

    Related podcast episodes

    Related articles

    • Article

      Create Your First Photobook

      Feb 22, 2018

      Create Your First Photobook
      8 min read

    • Article

      Build A Cloud-based Documentation Site

      Jul 27, 2021

      Docusaurus is an open source documentation application developed by Facebook. It’s one of a growing number of JAMstack static site generators that uses a blend of JavaScript, React and markdown to make it easy for you to deploy clean, professional-lo

      8 min read

    • Article

      So You Wanna Fly Scale?

      Aug 4, 2020

      So You Wanna Fly Scale?
      7 min read

    • Article

      Clinton Filen And Dave Kay

      Nov 17, 2020

      Name: Clinton Filen Job title: Brand/Design Director Years in the industry: 17 Proudest professional moment: There are a few key product breakthroughs, but ultimately developing the products that powered kitesurfers Alex Pastor and Bruna Kajiya to th

      7 min read

    • Article

      The Dom Is In The Detail

      Jun 30, 2020

      D3.js has a large API and looks complex at first, but it’s really not. This assumption comes from the fact that D3 is not a graphics library but a JavaScript library that can manipulate the DOM tree. Therefore, its core elements are not circles, line

      1 min read

    • Article

      Win 1 of 3 Corel Painter 2022

      Jul 28, 2021

      The 2022 version of Corel Painter, designed for Windows 10 and macOS, adds enhancements that accelerate workflows, boost brush performance, and improve layer productivity The popular brushes are now more versatile than ever. You can change the shape

      1 min read

    • Article

      How To Design An Oak Frame Home

      Feb 3, 2022

      How To Design An Oak Frame Home
      7 min read

    • Article

      AWS vs Azure

      Aug 22, 2023

      AWS vs Azure
      9 min read

    • Article

      Covering Up

      Aug 5, 2021

      We might not judge a book by its cover, but we all jump to certain conclusions when we see one. Book covers work hard. Not only must they convey the title and author, but also whether our book is fiction or non-fiction, its genre, and if it’s part of

      6 min read

    • Article

      Advanced Balsa Carving

      Nov 3, 2020

      Advanced Balsa Carving
      2 min read

    • Article

      Embed An Excel File On Your Site

      Jul 20, 2022

      When you need to share data in an Excel spreadsheet, you could choose to extract it and then send it to members. An easier way is to embed it on your site for everyone to see. In our example, our local history club wants to share details of its yearl

      2 min read

    • Article

      Ceramic Design with Artificial Intelligence

      Sep 29, 2023

      Technology determines design in different phases of time, and must adapt to corresponding methods and media. With the continuous development of science and technology, traditional ceramic technology and culture faces on-going transformation and upgra

      8 min read

    • Article

      Design And Publish Your Very Own EBooks

      Jun 30, 2020

      Ever wanted to become a self-published author? Looking for a simple way to create a digital publication – whether book or magazine – that can be read on a variety of devices? The solution lies in creating your book in EPUB format, which formats your

      9 min read

    • Article

      Swift Publisher 5

      Jul 12, 2017

      Swift Publisher 5
      1 min read

    Related categories

    Reviews for Tiny CSS Projects

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      Tiny CSS Projects - Martine Dowden

      Kudbook_preview_excerpt.html}KH_L@RdDs*,(%?a}b;}{%k)Y,E?2$9mƧgOS~UhA_QbL==A'׬E/..ϥ$u{ }:+LnSSDqFd):=}:'@o~vn4E0yg\E%᰼2m]ˑmiu憞ޔ6mCWU}]fWڬ't6Q]E1(kC?G&J`dɄ+H96!ڤ lLU۬2h+Ѧm%hcuVU|Q([rsʖbh+*.ES@͕sMƲ91CVF BkLTqi [O:./Y04V{kƛ `'‰qK[,CꤿU|E .j-'Y *OMƹg$vYd?3ciƖu\$F(?nWqMTu.~߈,md2Tn+HJ0$KЏ1`kl|LUGfATԀD!q^YN o'<ˉG|F%tiiIP2l2xr}PbQdHV9DwXn Nf[ZywG޽wgѐ?3ňK5W5 XA9FN7tY\vK[uίs !f/ _M7ri?N4'@`P䆶Otvӟ@fL! 4(*\%MޘoL ^C\X BL*)M?tWH!x`Ozx r3~~`oDznҔ;4暈 s:T$bmh#i 1(ϙn3f |g?wU8Uk:>*#EGCQݿiʒވzp90seNI"U";7r8I75qޘcA*xYAС(|K@w,? ='".J YEGPgP/Y^Ev}SfugY{OZ,/.ZF7S"/f)y炠uVh=Ƽ?.nKq REy5Eֿg}#4kB? xh{Xؚb9 x}YƛqgKYLF T]y=2Pd^.U뻍t6D72ql?$k!yOn6&7gߟ- d~ A nz9a#?_HMrtw"!/Aɪ3rO+H7;"k'Bݥj$!Rby2z6Dgij|n ۏ0/ۿQ[0"$]Ŕ Wӵ_] {\5/V%RsrHvpY7Oc tkY=Vf\*em׸750J,&:2 R|m`,hY!1CV5k28e3T0F֦>ޚAv+2 iGvpXd׷5 K4"y;ݖ_U9픘Ȳ9~!q7["%̇t$ބ9'"ZpΦREZ} s6jt|/"..E [ &?68aL`ʒ!Ɂk=7Ā<`Nغ: Y(*%&Y bPmV7K:s*QOYJe>bFcp`>xEYHÌ˴C[;өl~;59x0/h$}o(*އ6r~P+rIUؕIђOL߬Gɬ9x1P9>;*AU]a.w. (r!L /lTSP[v;_߃=O]v: (!5Gބ@bf' cvNώ{Ч)J7Q._溵xt/)jFW&hȈatݬo}4K/›ܗ5Ql:@wstnEz;:{G;A *S; xYÙ Vtf4+Mr+cs\K0ܖd٣C튄÷a*UYHs ÿYXEu]C2ˆcc"]sL FsI?Az8]oZJw^1%Г(d= [% cЦO©Ur6Dxh!;uٴSg/ZCz%u0!}G}bn sw|'#N\/0-6JZ'>y6@Q?rmFz7 >n'X暑WYYgCSY}VWWnFM3,+ڳ5|q}7kԙ㕇ꦰW>s ~A¸[еs@KwUpɨ'M(jִ۫>1wcARpʦY,X(ۊ; "N7س[ f%ӹ93*-؞95Htjc>NzS҂C3v?߸jzWghk:C.;]hd|AV9c2$wy ;b퍎 UQ>긓|OUBNV;AB-V0t/xDxIV_ oe+$ ø'LYztaP݃{_FK?f9DȃK,8"DImPXN*:C0hIvsskrY= =9cGNres0;=G0^{(^% tG?b\bAshIs~")+O"n4 eu",bԌDN;wk [elɁ"G.͘ӧkՇ>ZrFX@bO'JF;}-a3e^ƃ^Ӂ%JمsxعC\q84aCA(tOJLd=L/vGQ@ic|-m5@zv@E,3up>r"@bٗ<Yu"ج65 MͪfΜW5tԁL | Ct 3`}ή3).+Iү𧿃cJbQvxv@GS2m ;'ADU_ ﲅ`7'_gCF=WEG]F/IHK_tC*3W0QYsKLfKjRl E.eHE'% 恿6~JB֐ʉR8F;3Aw|*y`8F変nWLcNd_reE.y]'` Te2F<DžKۛY?x_It>_e?|w [+5>69gdvK9)d'$U|I*b|S %7/}VE{n_5) Z!-H栂sA8ד%X%.頓 ٝto3 דu K0, x[b*2>4B5:YtAWݻI} sӽcGS"_~pVAC.']uDLչxJFR4օ#h٩aO12xss1CHBAo!,'lW-E:2{$˃j GP{{9~Io*X10;fz'y"b\ 㸝\[_S'+5j ZxOvfֵ]f: T"I(#i up9-}HpB Ύe^^wsN$]bO]wu pCa+<1 Xi)O͵leu]5c/aO>wܘ2AT W{Nbx vN[D"C3 =\@(fp 1'+|#Վ4aE 2Aպe mTāp$oE#w匴rUefz_ .hJPfk aARc*Sh¥`.Iq.5v-*pnnI{^"]ϩ /$ ˛*3ve m7{$MY9ktw%TONN)h#z/N4ik,zVi\z^<  ͽuP#s7Uk~<+x:`Jh9pK vx졧l#}B f=|>}bi8]4F OtI6-ݦpQfg543!ꐛpuI읜|.Y6%2jW V+X*З1A ;ZVCBB`Q&1-1nm`YB.Sm|⎝2/\y-B$9Lj.ˤp횓B &ɘel7p|]OC=8j"Yôؐ{ysKHP"n :ǞEo箨vɊa9DPxu D1nމ@ ViJXUg!|p\Kt1(=1xWp<(bXtŃZ;UrP30<. g7kBrՓI_Sn\<%[U;}$@kU5qq=$8'E'N.D#mv_1$ . $}&G-18Rjb8&0hRQhk$Ch$ʅy%: W{L˭qB9P7⢈"h"Dud,Ru!6bQbT n:х}q,ܬBڇ32s2b~TXevlpM-LIݺ3+CԒO)AӜ"ui .mQ[-TM U$] RYD*ZgUXEۂr#DEK*2鞇a7!U;rg&d$}|_p{6j9Wi렁X8D_nq^$tfK+,$;.2r/-s {FCġ8\VϔyW@qMsEYgΝ;)äP!dKq$#ψSzq l7j-PFqfq^sJbK(4jErfOr\ݤ?{۝zwExB`z? uy.9IWm^gVi?6iuH$Zʫ> i~_w3TY2:[}}}7lPQ˒M%n'm ^,Hk,JD$sQk!,]D6tpy*/^sa!#> &Hc7̓Cj ibFnJ_N(BH&ZO&$58q, >O ɷN"*לYM4ħTAIG.-[U-Os9O!⥦ D,L_@ RܚCt CQ|"/ q"}zΚLQ+4En;CZ6x 5Fɛ8–"&oa)#y$: NZ Ok 9 V2T]aGE}\"5eK '^0غhb Izp45l\;cH} wj&<{XJ>b&|gyh-C6+=CI`[M z"vyq'nN8AADd\Ԕ2Ur )_ƯNV⍶8Mi:BS2KsHm{'UAߛ  [AbD<Ү*)- ;|j6>qux؃LhG2z7zyђ+DmG,/YnF}P#G//CqZ(jiv?,{moDSn JԵ6u[[ x[Fa'B>YF,z+2{dghMz܅%#ʒD9sY V񶻕3a'^iaw WTmqUG?9n 2;~i9P8#;suv)0T y\#OPE,9(Le$ щ橼tRatItS6q5&?-ja&>-y V6@MRkY8X9w4\5H#=}d[sqW.+Wgw<`-c'X X=L-BiOk8ټQR'>Vcwo|rc9_Crm8gWNZ 1,muI6A %ŷSmryNkSY#(i.$s*>+HUZRAED>t<7~B;4 hfY1No-I'h0,Pn;PSڔn߾DS־7 vګ^>ͫ|f ^=)QVnRjcJ_xQ7({? x@ſp8s~"-=~'`CBκX?ky*Rj!^7G}id\7f˂ΟfST-WX0AeɌӃ(]uco9 F.e3x;CD-Nοbpd7I v[x͙ x:-WAbhٔ!ud*HsJ0GT` ! 'HAkЌD0r:pHg|vw5̻Ԏ+b9ѤÜ,.BL9#:ëtGī@&Zq[ wmq|> 7+ O6k6*8Sx;b$h9buwuikEjJ[콒Gf?i`vA_e F+͵zX$ж!޾U17}_h X:ha? |v{zͧs Yux۽$6vL`sNN_ '6/GI W>8zzKY ^E*0ĥ+F[L? v FʩKH~ 86dD3Aiw9ީu! Q7]{` ֠]v=xzM#@FkbB됁4H]ߔAo*u0\mEi)Z$hOgM>A1Hǖ7?=RIZ'ONڙ~M{OOd8VtC/5[\&0;e߳ L[9N$]q2㛇%k7O(y0Ͼ?$|dv=Al9F|hSvbޟ޹?=}>~r!Ep6 jg#=6:6U ^!ɐl64#~͍l{Λt Cy7#-wzaM~xh[%I }y'Bu-y# |zb{fn;fKK/}lQ֢AB7{TTOn*E|llJꡢ]e_$=Ġz,jr?yjDC=JB]c~-9 p($ֱ79nZt_%7JlnJ;N/ѪDQr v;d=Onh9>c-* h21?=GCaK#bMI f؆d\>?{';1]izn8VJHլWirrqovqZk~Ն"̩ɜ pI:\ `ṶV<ۘf.Tj ʧA]RfO`&%'gf٣dž,ů6zt6 tr[ba <(z'> Lo{JX
      Enjoying the preview?
      Page 1 of 1