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.

    Responsive Web Design with HTML5 and CSS3 - Second Edition
    Responsive Web Design with HTML5 and CSS3 - Second Edition
    Responsive Web Design with HTML5 and CSS3 - Second Edition
    Ebook665 pages5 hours

    Responsive Web Design with HTML5 and CSS3 - Second Edition

    By Ben Frain

    4/5

    ()

    Read preview

    About this ebook

    Learn the HTML5 and CSS3 you need to help you design responsive and future-proof websites that meet the demands of modern web users

    About This Book
    • Learn and explore how to harness the latest features of HTML5 in the context of responsive web design
    • Learn to wield the new Flexbox layout mechanism, code responsive images, and understand how to implement SVGs in a responsive project
    • Make your pages interactive by using CSS animations, transformations, and transitions
    Who This Book Is For

    Are you writing two websites – one for mobile and one for larger displays? Or perhaps you've already implemented your first RWD' but are struggling bring it all together? If so, Responsive Web Design with HTML5 and CSS3, Second Edition gives you everything you need to take your web sites to the next level.

    You'll need some HTML and CSS knowledge to follow along, but everything you need to know about Responsive Design and making great websites is included in the book!

    What You Will Learn
    • Understand what responsive design is, and why it's vital for modern web development
    • HTML5 markup is cleaner, faster, and more semantically rich than anything that has come before - learn how to use it and its latest features
    • Integrate CSS3 media queries into your designs to use different styles for different media. You'll also learn about future media queries which are evolving in CSS4.
    • Responsive images allow different images to be presented in different scenarios. We'll cover how to load different sets of images depending upon screen size or resolution and how to display different images in different contexts.
    • Conquer forms! Add validation and useful interface elements like date pickers and range sliders with HTML5 markup alone.
    • Implement SVGs into your responsive designs to provide resolution independent images, and learn how to adapt and animate them
    • Learn how to use the latest features of CSS including custom fonts, nth-child selectors (and some CSS4 selectors), CSS custom properties (variables), and CSS calc
    In Detail

    Desktop-only websites just aren't good enough anymore. With mobile internet usage still rising, and tablets changing internet consumption habits, you need to know how to build websites that will just work', regardless of the devices used to access them. This second edition of Responsive Web Design with HTML5 and CSS3 explains all the key approaches necessary to create and maintain a modern responsive design.

    The changing way in which we access the web means that there has never been a greater range of screen sizes and associated user experiences to consider. With these recent trends driving changes in design, typical desktop-only websites fail to meet even minimum expectations when it comes to style and usability, which can be vital when your website is central to yours or your client's brand. Responsive Web Design with HTML5 and CSS3, Second Edition is an updated and improved guide that responds to the latest challenges and trends in web design, giving you access to the most effective approaches to modern responsive design.

    Learn how to build websites with a “responsive and mobile first” methodology, allowing a website to display effortlessly on every device that accesses it. Packed with examples, and a thorough explanation of modern techniques and syntax, Responsive Web Design with HTML5 and CSS3, Second Edition provides a comprehensive resource for all things responsive'.

    This updated new edition covers all the most up-to-date techniques and tools needed to build great responsive designs, ensuring that your projects won't just be built right' for today, but in the future too.

    Chapter example code is all hosted on rwd.education, a dedicated site for the book, built by the author, using the approaches and techniques championed throughout.

    Style and approach
    LanguageEnglish
    PublisherPackt Publishing
    Release dateAug 24, 2015
    ISBN9781784398262
    Responsive Web Design with HTML5 and CSS3 - Second Edition
    Author

    Ben Frain

    Ben Frain has been a web designer/developer since 1996. He is currently employed as a Senior Front-end Developer at Bet365. Before the web, he worked as an underrated (and modest) TV actor and technology journalist, having graduated from Salford University with a degree in Media and Performance. He has written four equally underrated (his opinion) screenplays and still harbors the (fading) belief he might sell one. Outside of work, he enjoys simple pleasures. Playing indoor football while his body and wife still allow it, and wrestling with his two sons. His other book, Sass and Compass for Designers is available now. Visit Ben online at www.benfrain.com and follow him on Twitter at twitter.com/benfrain.

    Read more from Ben Frain

    Related to Responsive Web Design with HTML5 and CSS3 - Second Edition

    Related ebooks

    Programming For You

    View More
    View More

    Related podcast episodes

    Related articles

    • Article

      FLASK Web Frameworks

      Jun 4, 2019

      The main focus of Python has always been to get you cracking on with your coding – the language was never made for web programming. However, this has just made it more interesting to extend the language for the web, or to create an interface to web-b

      9 min read

    • Article

      DJANGO Create A Database-driven Website

      Jun 4, 2019

      The Django web framework was named after the famous guitarist Django Reinhardt and was first created by web developers at a small newspaper in Kansas. The main goals of Django is to enable fast development of complex websites with database needs. It

      7 min read

    • Article

      Browser Wars 2020

      May 26, 2020

      Browser Wars 2020
      8 min read

    • Article

      Scan And Scrape Websites Using Python

      Nov 14, 2023

      David Bolton once accidentally boosted the traffic for his firm’s website by 25% in one day by running a web scraper on it. Luckily, they never found out! Ever since the web made an appearance back in the mid-’90s, programmers have been writing softw

      6 min read

    • Article

      Browser wars 2020

      Nov 2, 2020

      Browser wars 2020
      8 min read

    • Article

      Browser Wars 2020

      Jun 30, 2020

      Browser Wars 2020
      8 min read

    • Article

      Code An Admin Back-end In Django

      Dec 13, 2022

      Credit: www.djangoproject.com OUR EXPERT Matt Holder has been a fan of the open source methodology for over two decades and uses Linux and other tools where possible. More featurepacked source code for this project can be downloaded from https://

      6 min read

    • Article

      Browser Wars 2020

      Aug 24, 2020

      Browser Wars 2020
      8 min read

    • Article

      Whisk

      Jul 21, 2020

      Whisk
      2 min read

    • Article

      Code A Cataloguing Application In Python

      Nov 15, 2022

      Credit: www.djangoproject.com Matt Holder has been a fan of the open source methodology for over two decades and uses Linux and other tools where possible. More featurepacked source code for this project can be downloaded from https://github.com/mat

      8 min read

    • Article

      Superposition

      Oct 21, 2019

      Superposition
      2 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

      Flux 7

      Jul 12, 2017

      Flux 7
      1 min read

    • Article

      Chaos Cosmos

      Apr 26, 2022

      PRICE Free | COMPANY Chaos | WEBSITE cosmos.chaos.com In recent years there has been an increasing trend in the 3D industry to utilise and take full advantage of off-the-shelf assets, with developers providing new tools that make it easier than ever

      3 min read

    • Article

      Create Smaller Sized Apps With React

      Nov 19, 2019

      You may not be surprised that some developers have criticised Electron (see tutorials LXF256), mostly regarding the memory usage of its final binaries. The initial binary is over 100MB, because a major chunk of code from Chrome is embedded. When you

      6 min read

    • Article

      It’s Collabora time!

      May 2, 2023

      It’s Collabora time!
      8 min read

    • Article

      Clarisse 4.0

      Apr 17, 2019

      PRICE Studio: $2,299 / Indie: $999 | DEVELOPER Isotropix | WEBSITE www.isotropix.com AUTHOR PROFILE Cirstyn Bech-Yagher Cirstyn has moved from Radeon’s ProRender to the RizomUV team, where she does product management as well as modelling, UV mapping

      3 min read

    • Article

      How To Use Mojolicious For Web Scraping

      Mar 8, 2022

      Part One Don’t miss next issue! Subscribe on page 16 Mark Gardner is a software developer and blogger with over 25 years of IT experience. You can reach him at www.phoenixtrap.com and @markjgardner. The map function is designed to transform a list or

      5 min read

    • Article

      How To Use Mojolicious For Web Scraping

      Mar 8, 2022

      Part One Don’t miss next issue! Subscribe on page 16 Mark Gardner is a software developer and blogger with over 25 years of IT experience. You can reach him at www.phoenixtrap.com and @markjgardner. The map function is designed to transform a list or

      5 min read

    • Article

      Letter

      Aug 26, 2019

      Letter
      2 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

    Related categories

    Reviews for Responsive Web Design with HTML5 and CSS3 - Second Edition

    4/5

    1 rating0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      Responsive Web Design with HTML5 and CSS3 - Second Edition - Ben Frain

      b ^book_preview_excerpt.html}rH`~Lˎ %/p,y/jI.GHI2KD&n};/ѯ1MI@J$R=?lI$r;y ^rMm+5ubɉ-]6.yuzuWUtF',9,deeUfR~ؒ&L\m{RkzЍ=v3čI\$Df`4~X{~$aV`I!&W *IUNd 2JagH;LI\o&حjC_t4$ZHe)"#dW({$~Uӎkg-7Fj|[*R}Yd]V$ WC2uڲp΋H̒]ogvYnIeƱVKBLWEHtbߦiET۬M*ԙEN*E `9͖^9V7`5zȤOR Gw* qO;r6oc ^=ŖG\s6 !1|Ԫ6:IN7ĪtadG1ᨑ*Ql9yF8e6t Y~~B-JҪd[cfG'. z4riqI-+qM~(έsɼ۸}JWcK6^-QUB豭ӀcU,+8 7&)@@/@bCg`q8ҹ%ʗSPݨ2%Frhg~)8KNw0es@"X,.amAyMJ(8&Zn4%@ #L+UQ CrETT<;nXH{].ܔbׄ0\>,bI =Fy-pr@Î"̦ͺEУ츀 4ngm3nW:%U0E-TY1]]cʨrIΨsϊXl\tKer&zzY I< \ϫB~Nhq86|3T7á3f7ph(j84AйYyx?RUm93MN8WG٘yXu`(@g%j(UtaD d%DƇb8dcؐ/3l46>oŲt$ԎU3MmQ@ 1mwR2,ӨN3Z;>_@˘MJ<4' *=  CecU[]SӐblɶV9j6cʈeg`Hpc'b#}Lh b~v )?C0z<Ȉi_U+f2I(oeC̺`Sw#^ w1mǬ20uv"ߔE"2z7d.jd&ƒV4U.1XwcENWe;>f@,Ys+2V\5$zMvt4*B*o3ё8øpw`Uxe]TpW.٧Ojb>7l?`Po^>ddjY {e4 它o Ha"?w!Tn8^E撎گd+/ 1:4e c¤bF1T- _\L&oLHIrS9:.&Oq$U'gug|g'f*P>/ԘBؕIٟ7dyoϔ! a $螷_aqG Mb Χۼ+r8Pl|u}^DJ 2!-2n:/@$P8j2ܺq٧ 򥊟ObM=J(2Q]鵤4"#L\j̠~FS'lnɡCȷTJ(e#fi/:ؔ/^\hϧ{{KFo{f't>cvy`v86yx,.rp=|=tTx"ˆ )aYʨS7JҰ9DPhL7p'QYsiKTMYDq^a .^ *RU4fs"I:x`ÇGF{&ar؈q@@Gq,+Ba4CnSGiSӽaEp?H|C`3  -(Xk (oY̷T͏IqEjErh|u|q`ɻ[ Ƽ !/v¶+8kPIU9Rp`XLEkM=EȜ}AsFh$mc9EZVSV۰0|uLֱIǞ*P"6 6!Kt5ulm{iUMb{,*fr*j&2ojY,(l9]i=~Q\Dk6<˩˸߅#ÞJ+w=7:= >sY׿9?}rLtYzxOZ*rgID7T#-/$:"ju]YA()g,T[ ՊdZ;m%(jjӬ'S!?gwqp;H oq } =| ItNE0Nx 0o$&,UHp5. :t+ߌ04mLt~lf|կw%{[/\[Ԅb<4]Q1~Zj3I~tc\ 7k:弉{LI_GpLGg$YH }4> j/zPE+9'ĊR]5AvʱKM>)6_MĝjTw w E o xUantjzƔ)о 7@j'wyrN]β+U!sa/1Srr}qcx7HFX{|JTŽ%iI 8-r3%Tçyg? 5b5[}?wwaJY[{'3 J6#3ۻqI!ζ?BX$ 22dlJV}bpP^XFL1ha34]4 3nɳgOoTv l>&\B??w7qI^ŏ?MN/?x>n㯤!M@$wp3zW_İG\{3evdY#Lm$!b}O%5#9)vb"jH,71ؽ[xyv,#n%ia@)YzkxΖ6yV pAD;E09ι2d!721i活nw?b&TT%K&pZ%.|+\f|v^KɝSsϷ>c'ҸgO&3Ƭ՞{9hA?28L>Ys[|CykiC,S _G8 i?TP^H!D^vb$!8RPHFD5<T[WطfrD 4fߜtU9(Q^x|iI3~Ҝ>MT[nH0s:,nm3:Z(J\I^iD\LMEC0YܣY&6jK#-=F P,0?"[I!|9E9&[L]p9Q{ѳDxx݉ GZFl@1^F!oF`r. ͧu޳mP<O^ 1Ɣ-~9gs~mA^gܞh"bQ&Ś ]s<}OܕRLokSVU|M&অlʁ+9OUrcZ%$=< EܭC*t.# c:,Pkଙxxe~:;oVPiIFo)snly.Bk;e7aGWvSCP'땤n%g8U|H}KswmO8aVٴ\+> ڶ @@9mh[nςdŰ d}8$l˼ m%W E VrV(h"Q/ˍo $b3g/^^%gP L(q…m w_21 n(ft^x 3:}OH/$>|о֛do'ݞ'HOj-zq.}kf9odaC/ XMϧeakS(LtZx*pA&sA ͐|H!)E^x p\twou],?)~bim5n4$ {Du4ˣ#؅|̂R1ЙNa+D[4D*LYBT^ٚ׊ɚx `JS+jF,Zr(b,$Ά7rF7%rpfgfRPa'I NxH ,>n!ibЗQ%iz Eogұ-TqkP7{,Q\[-mNT` LW7,)F6_O[sF ȍJ X${~M2"f60;$'Lu,iپᣬZqW\vKڰ*ݥ^gȊl#vAJRUVDBrn+}-c, ϡq)[Ob&\}vI˥ _-"EPlX5h(D=mx4@&P+fBSJ]xIrygss_qLs_*6ȉeӵ~p PвYP%\Jw`c2HŜHAQ=M!r o ߇ xV'Ph@AaAQAT` ^p\:(:X<Ň5Y6'66GP34V\IaQ}&Rt5å+F?L.6e2fMl}=EЦf _78Tqn"&J+|^-S+*:gV_1 7֎0R5d;ɭ)ZsKȀx ^D}"KB0l?+\MΎ?`8/sYkM;?&;;hί`^_ W2o{34E-)qږ]iv1۟ Lvr~wipKQNN7ϝ@MQI޿b͐,j\@9X(:€eQʫ^m|JF=mo1N e] \|^[a}"gp$VU-}' [[Cjtrc+GroDO7s"mDx#1)zf9m/i @d}"G ~3HeFZV5oA2_'c]J HV0|Edw޽[<ـ@Ҟ>7Ų@98L9rL!j_`kL|{ 93Z*nXiE)B FJr,FaHc3]Iq|.)+w&_Dnd"9*؄G-_+K޾fߥA ̽s4L2q̥E' &CW1*H)i)+2bF$w6Ӄ7l Ô#1.Kؙ?%JtBnjeB :$Ef[ p'Z~ՍȗΊ_9],@%Ͼ0kppaL4N.7Xl1db.I{.IZi!{OpdޓWW"m}z#LB =#y/ f[ +t!]) xffb7! 9wȕU:֗!V5ŞϤM l +,p+ p+o1DV[lDn<~>GKfzJ􉾛 V_y_p1/ә9TMm=]7^3 f}Zt+[aӥ FoGC{? ؃gM5kނ"AL25Zeo|x,ͱo1`']B6pQ] 6z<8 ?jX03If}oo%-NPٯtWosO#ni kN2Ϗ?n'l*7]YFc FߝL 9Coy[5=qCJQAHVF²ٍۅ۳ӳݕi]t8V*(m`F rC^IZ9@pJKi>D !f[RtyElvTI:;sZYDݲ]eC2.ާBj[ P[wO.$łi;f'Da)FhW{ krj6:P!.;륋y38/ɗ^Vaū: ~p􀱜cMM7)E!7nDz9V腁ߡ5СJBqR! vPX87TY-u`" h+w-$ \K ,nלԏa('FwAelwXQG{P1r'hq۽$:XJZp M9.T@}e'ki$D۞p;G++/"b:Q"ﲶ(׋;HrHGJsIwse^+*7)fQwd4UWGr6qԎ_6Ǝhv~r?'GnV$f?ӋI  e;=3C$+grZtpPpkqıZ'>D h8T)H[:n)Tc u cȯK./Ẁ*?f W5t +r1L{+?LAr(ɥ+(!EK!BmD _*8Mq wR=ʛ?ވiهw^]+\+GZHB13Z߆3Bg!H E ..a7JDH6 An;1` w rLfQa!r<R\ 3'b;Qw'gS yγ*wJJߓ&1>K%Ow'=AbYry_f@yۓ9fJu=+j(8C_dB>zPd67wiaxNݲx&;aEqG$ 6U+ 1?g|t8'߃0^#/֕@ =\ys?G?xݗ;);V|ޢEir$h|)SziMpF")Wv] ONPk trzPRm0_Ԛ1;DZmow #l.|[P$&&fݭ*,Y 8Mql$ Pj(Pk *J:(*'&GZ05AfK }8ZqAl+'$S7_"[Apm{m`;r=z?sR9n HA`{d&a ZNMG5aJ+A6U*UH+i$s4L+Q w~,kxw=4 4A_ՍXwagk9L};|ߙp8CxK9]t[0Š{*sg in2v'y*3`*_gJXH$w4 NxM־ipw#n<Yybg'}jz'oJ<=aOyA}˂;]+`3L7(qSA,C /%gr»IZIJp~:f9Īn9cdŞ*7MLMqN-JNFYWSՋTX{9N&*Cac|/ mMBP!勃PaK)'4TR3%zx%7aSܲٓ'?NLl@sv5-'0sx7[siҶʻL&hbL%$9 w4HPi8~o{ >W|,ᾄ^97ٓOa)HJj2nKO?`쏇O%ucrydStA6<}G.1-!`KLjiߴU
      Enjoying the preview?
      Page 1 of 1