Responsive web design by example:
Gespeichert in:
| 1. Verfasser: | |
|---|---|
| Format: | Buch |
| Sprache: | English |
| Veröffentlicht: |
Birmingham
Packt
December 2017
|
| Schlagworte: | |
| Online-Zugang: | Inhaltsverzeichnis Klappentext |
| Beschreibung: | Auf dem Cover: "Embrace responsive design with HTML5, CSS3, JavaScript, jQuery, and Bootstrap 4" |
| Beschreibung: | vi, 277 Seiten Illustrationen |
| ISBN: | 9781787287068 |
Internformat
MARC
| LEADER | 00000nam a2200000 c 4500 | ||
|---|---|---|---|
| 001 | BV044715359 | ||
| 003 | DE-604 | ||
| 005 | 20180228 | ||
| 007 | t | ||
| 008 | 180116s2017 a||| |||| 00||| eng d | ||
| 020 | |a 9781787287068 |9 978-1-78728-706-8 | ||
| 035 | |a (OCoLC)1027163043 | ||
| 035 | |a (DE-599)BVBBV044715359 | ||
| 040 | |a DE-604 |b ger |e rda | ||
| 041 | 0 | |a eng | |
| 049 | |a DE-355 | ||
| 084 | |a ST 252 |0 (DE-625)143627: |2 rvk | ||
| 100 | 1 | |a Hussain, Frahaan |e Verfasser |4 aut | |
| 245 | 1 | 0 | |a Responsive web design by example |c Frahaan Hussain |
| 264 | 1 | |a Birmingham |b Packt |c December 2017 | |
| 300 | |a vi, 277 Seiten |b Illustrationen | ||
| 336 | |b txt |2 rdacontent | ||
| 337 | |b n |2 rdamedia | ||
| 338 | |b nc |2 rdacarrier | ||
| 500 | |a Auf dem Cover: "Embrace responsive design with HTML5, CSS3, JavaScript, jQuery, and Bootstrap 4" | ||
| 650 | 0 | 7 | |a Responsive Webdesign |0 (DE-588)1035443651 |2 gnd |9 rswk-swf |
| 689 | 0 | 0 | |a Responsive Webdesign |0 (DE-588)1035443651 |D s |
| 689 | 0 | |5 DE-604 | |
| 856 | 4 | 2 | |m Digitalisierung UB Regensburg - ADAM Catalogue Enrichment |q application/pdf |u http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=030111796&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA |3 Inhaltsverzeichnis |
| 856 | 4 | 2 | |m Digitalisierung UB Regensburg - ADAM Catalogue Enrichment |q application/pdf |u http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=030111796&sequence=000002&line_number=0002&func_code=DB_RECORDS&service_type=MEDIA |3 Klappentext |
| 999 | |a oai:aleph.bib-bvb.de:BVB01-030111796 | ||
Datensatz im Suchindex
| _version_ | 1804178198612672512 |
|---|---|
| adam_text | Table of Contents
Preface_________________________________________________________________________i
Chapter 1: What is Responsive Web Design?_______________________________________7
Responsive design philosophy 8
Responsive design principles 9
Responsive versus adaptive 9
Breakpoints 10
Relative units 11
Maximum and minimum values 11
Nested objects 12
Mobile or desktop first 12
Bitmaps versus vectors 13
Responsive grids and columns 14
Summary 16
Chapter 2: What is Bootstrap, Why Do We Use It?________________________________17
Brief history of Bootstrap 17
Why use Bootstrap? 18
Why Bootstrap? 19
Bootstrap s grid system 20
Basics 21
Usage and examples 22
Equal width columns example 23
Multi-row, equal-width columns example 24
Multi-row, equal-width columns without multiple rows example 25
Differently sized columns 25
Differently sized columns with screen size restrictions 26
Mixing and matching 27
Vertical alignment 30
Horizontal alignment 32
Column offsetting 33
Grid wrap up 34
Bootstrap components 34
Summary 35
Chapter 3: Reusable Project Template___________________________________________37
What is a reusable project template? 37
Development environment prerequisites 41
Table of Contents
Creating our reusable project template 42
Simple Bootstrap example 42
Abstraction 44
Extending the header 46
Extending the footer 48
Extending the main body 51
Troubleshooting 52
PHP errors 52
CSS not applying 52
Summary 52
Chapter 4: Creating the Introduction Section______________________________________53
What is a single-page website? 53
Single-page examples 54
Android KitKat promotional homepage 54
GoldSquare 55
Anthony Designer 56
Richman 57
Implementing our introduction section 57
What is a jumbotron? 57
Implementing a basic jumbotron 59
Adding an image to the jumbotron 61
Combining text and images in a jumbotron 66
Anchoring a section to the navigation bar 70
Animating our navigation bar anchor 72
Fixing footer visibility and the location problem 77
Placing the header on top 78
Changing the current button selected 80
Common pitfalls 82
Navigation bar height variance on mobile devices 82
Navigation bar button anchoring 82
Summary 83
Chapter 5: Creating a Generic Reusable Single Page Section______________________ 85
Different sections in single page websites 85
Single page section examples 86
Contact form 86
About us 88
Projects/work 89
Opening times 90
Implementing our generic reusable single page section 90
What will the Our Team section contain? 91
Table of Contents
Creating the Our Team section container 92
Anchoring the Team section to the navigation bar 93
Adding the team s pictures 95
Team member info text 105
Team member social links 107
Summary 110
Chapter 6: Creating a Contact Us Section____________________________________111
Contact Us examples for single page websites 111
Richman 112
Bueno 113
This also 114
Design museum 115
Choice screening 116
Implementing the Contact Us section 117
What will the Contact Us section contain? 117
Creating the Contact Us section container 117
Anchoring the Contact Us section to the navigation bar 120
Adding the contact form 121
Summary 127
Chapter 7: Creating the Blog Posts Home Page________________________________129
Blog examples 129
TechCrunch 130
Gawker 131
Microsoft News 132
Johnny Cupcakes 133
TESCO Living 134
Setting up the base project 135
Removing all unnecessary files 135
Refactoring the index.css file 135
Refactoring the index.php file 136
Refactoring the HEADER.php snippet file 136
Refactoring the index.js file 137
What will our blog home page look like? 138
Implementing the blog home page section 138
Implementing the image slider 138
Simple image slider 138
Adding back and forward buttons to the slider 143
Carousel indicators 146
Captioning our carousel 149
------------------------------------ [ill] ------------------------------------
Table of Contents
Implementing the blog posts 150
Adding cards 152
Summary 158
Chapter 8: Creating the Blog Posts Page____________________________159
Blog post page examples 159
TechCrunch 160
Gawker 161
Microsoft News 162
Johnny Cupcakes 163
Tesco Living 164
What will our blog post page consist of? 165
What does the post content consist of? 165
What does the popular and recommended sidebar consists of? 166
Implementing the blog post page 166
Implementing the post s main content 167
Adding the blog post title and banner image 167
Adding the snapshot paragraph 170
Adding the body I72
More useful links 177
Implementing the sidebar 179
Further extending the blog 186
Summary 186
Chapter 9: Adding a Sidebar to the Social Network________________________ l8!
Social network sidebar examples I87
Facebook 188
Google+ 189
YouTube 190
Minds 191
Myspace 192
What will our social network sidebar consist of? 193
Implementing the sidebar 193
Implementing the burger button I93
Implementing the sidebar HTML side 19®
Implementing the sidebar CSS side I93
Summary 204
Chapter 10: Creating the Home page in Our Social Network______________ 205
Social network timeline examples 205
Facebook 205
Google+ 207
Table of Contents
YouTube 208
Twitter 209
Medium 210
What will our social network timeline consist of? 211
Implementing the timeline 211
Implementing the input section 212
Implementing the timeline feed section 213
Adding the user s thumbnail image 216
Adding the user s name/username 218
Adding the post s timestamp 219
Adding the post s main body 220
Going forward and extending the timeline 223
Summary 223
Chapter 11: Creating the User s Profile Page______________________________225
Social network profile examples 225
What will our social network user page consist of? 226
Implementing the jumbotron 226
Creating a basic jumbotron with a banner image 227
Adding the overlay text 232
Implementing the small cards 234
Implementing the large cards 237
Summary 239
Chapter 12: Displaying Thumbnails of Our Photos__________________________241^
Photo gallery home page examples 241
Pinterest 242
9GAG 243
Google Photos 244
GIPHY 245
Vent 246
What will our photo gallery home page consist of? 247
Implementing the thumbnails 247
Adding the home page title 247
Adding the picture thumbnails 248
Adding pagination 251
Summary 254
Chapter 13: Opening Images Using a Light Box______________________________255
Light box examples 255
Pinterest 256
----------------------------------- [v] -------------------------------------
Table of Contents
Google Photos 257
Dan Kennedy 258
Salter 259
Arild Danielsen Photographer 260
What will our light box consist of? 261
Implementing the light box 261
Adding a simple modal 261
Adding an image to the modal 266
Making the modal content appear dynamically 269
Summary 271
Index 273
[vi]
Responsive Web Design
by Example
Desktop-only websites just aren t good
enough anymore. As you enter a future of
increasingly diverse browsing methods,
you need to know how to build websites
that are presentable and will work
perfectly with the huge volume of different
device sizes and resolutions that are now
commercially available. Responsive web
design is an answer to the problem of
modern web development.
By following the detailed step-by-step
instructions, previews, and examples
mentioned in this book, you will learn how
to build engaging responsive websites and
upgrade your skills as a web designer.
With coverage of Responsive Grid System
and Bootstrap you will learn about the
most powerful frameworks in responsive
web design.
In this book, you will learn how to create
a crisp blog page, a beautiful portfolio
site, a cool social networking page, and a
fun photo gallery. Through each of these
projects, you ll learn how to build various
elements of a modern responsive website,
and also find out which framework works
best for your project s specifications.
By the end of the book, you will have
gained the practical skills you need to build
real-world websites that are professional,
creative, and truly responsive.
Things you will learn:
• Understand what responsive
design is, and why it s vital for
modern web development
• Customize and extend responsive
design frameworks
• Create adaptable templates for all
future projects
• Build a semantic website structure
with HTML5 elements
• Determine a responsive website s
persona with CSS3
• Learn how to decide which framework
best suits your project specification
• Implement a plethora of Bootstrap
features in your websites
|
| any_adam_object | 1 |
| author | Hussain, Frahaan |
| author_facet | Hussain, Frahaan |
| author_role | aut |
| author_sort | Hussain, Frahaan |
| author_variant | f h fh |
| building | Verbundindex |
| bvnumber | BV044715359 |
| classification_rvk | ST 252 |
| ctrlnum | (OCoLC)1027163043 (DE-599)BVBBV044715359 |
| discipline | Informatik |
| format | Book |
| fullrecord | <?xml version="1.0" encoding="UTF-8"?><collection xmlns="http://www.loc.gov/MARC21/slim"><record><leader>01592nam a2200337 c 4500</leader><controlfield tag="001">BV044715359</controlfield><controlfield tag="003">DE-604</controlfield><controlfield tag="005">20180228 </controlfield><controlfield tag="007">t</controlfield><controlfield tag="008">180116s2017 a||| |||| 00||| eng d</controlfield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">9781787287068</subfield><subfield code="9">978-1-78728-706-8</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(OCoLC)1027163043</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(DE-599)BVBBV044715359</subfield></datafield><datafield tag="040" ind1=" " ind2=" "><subfield code="a">DE-604</subfield><subfield code="b">ger</subfield><subfield code="e">rda</subfield></datafield><datafield tag="041" ind1="0" ind2=" "><subfield code="a">eng</subfield></datafield><datafield tag="049" ind1=" " ind2=" "><subfield code="a">DE-355</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 252</subfield><subfield code="0">(DE-625)143627:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="100" ind1="1" ind2=" "><subfield code="a">Hussain, Frahaan</subfield><subfield code="e">Verfasser</subfield><subfield code="4">aut</subfield></datafield><datafield tag="245" ind1="1" ind2="0"><subfield code="a">Responsive web design by example</subfield><subfield code="c">Frahaan Hussain</subfield></datafield><datafield tag="264" ind1=" " ind2="1"><subfield code="a">Birmingham</subfield><subfield code="b">Packt</subfield><subfield code="c">December 2017</subfield></datafield><datafield tag="300" ind1=" " ind2=" "><subfield code="a">vi, 277 Seiten</subfield><subfield code="b">Illustrationen</subfield></datafield><datafield tag="336" ind1=" " ind2=" "><subfield code="b">txt</subfield><subfield code="2">rdacontent</subfield></datafield><datafield tag="337" ind1=" " ind2=" "><subfield code="b">n</subfield><subfield code="2">rdamedia</subfield></datafield><datafield tag="338" ind1=" " ind2=" "><subfield code="b">nc</subfield><subfield code="2">rdacarrier</subfield></datafield><datafield tag="500" ind1=" " ind2=" "><subfield code="a">Auf dem Cover: "Embrace responsive design with HTML5, CSS3, JavaScript, jQuery, and Bootstrap 4"</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">Responsive Webdesign</subfield><subfield code="0">(DE-588)1035443651</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="689" ind1="0" ind2="0"><subfield code="a">Responsive Webdesign</subfield><subfield code="0">(DE-588)1035443651</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2=" "><subfield code="5">DE-604</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">Digitalisierung UB Regensburg - ADAM Catalogue Enrichment</subfield><subfield code="q">application/pdf</subfield><subfield code="u">http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=030111796&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA</subfield><subfield code="3">Inhaltsverzeichnis</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">Digitalisierung UB Regensburg - ADAM Catalogue Enrichment</subfield><subfield code="q">application/pdf</subfield><subfield code="u">http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=030111796&sequence=000002&line_number=0002&func_code=DB_RECORDS&service_type=MEDIA</subfield><subfield code="3">Klappentext</subfield></datafield><datafield tag="999" ind1=" " ind2=" "><subfield code="a">oai:aleph.bib-bvb.de:BVB01-030111796</subfield></datafield></record></collection> |
| id | DE-604.BV044715359 |
| illustrated | Illustrated |
| indexdate | 2024-07-10T08:00:10Z |
| institution | BVB |
| isbn | 9781787287068 |
| language | English |
| oai_aleph_id | oai:aleph.bib-bvb.de:BVB01-030111796 |
| oclc_num | 1027163043 |
| open_access_boolean | |
| owner | DE-355 DE-BY-UBR |
| owner_facet | DE-355 DE-BY-UBR |
| physical | vi, 277 Seiten Illustrationen |
| publishDate | 2017 |
| publishDateSearch | 2017 |
| publishDateSort | 2017 |
| publisher | Packt |
| record_format | marc |
| spelling | Hussain, Frahaan Verfasser aut Responsive web design by example Frahaan Hussain Birmingham Packt December 2017 vi, 277 Seiten Illustrationen txt rdacontent n rdamedia nc rdacarrier Auf dem Cover: "Embrace responsive design with HTML5, CSS3, JavaScript, jQuery, and Bootstrap 4" Responsive Webdesign (DE-588)1035443651 gnd rswk-swf Responsive Webdesign (DE-588)1035443651 s DE-604 Digitalisierung UB Regensburg - ADAM Catalogue Enrichment application/pdf http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=030111796&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA Inhaltsverzeichnis Digitalisierung UB Regensburg - ADAM Catalogue Enrichment application/pdf http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=030111796&sequence=000002&line_number=0002&func_code=DB_RECORDS&service_type=MEDIA Klappentext |
| spellingShingle | Hussain, Frahaan Responsive web design by example Responsive Webdesign (DE-588)1035443651 gnd |
| subject_GND | (DE-588)1035443651 |
| title | Responsive web design by example |
| title_auth | Responsive web design by example |
| title_exact_search | Responsive web design by example |
| title_full | Responsive web design by example Frahaan Hussain |
| title_fullStr | Responsive web design by example Frahaan Hussain |
| title_full_unstemmed | Responsive web design by example Frahaan Hussain |
| title_short | Responsive web design by example |
| title_sort | responsive web design by example |
| topic | Responsive Webdesign (DE-588)1035443651 gnd |
| topic_facet | Responsive Webdesign |
| url | http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=030111796&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=030111796&sequence=000002&line_number=0002&func_code=DB_RECORDS&service_type=MEDIA |
| work_keys_str_mv | AT hussainfrahaan responsivewebdesignbyexample |