If you want resources offline to learn about programming and web technologies MDN is for you! and I recommend to use MDN over w3school because w3school is outdated.
Download it offline (2.1gb) at https://mdn-downloads.s3-us-west-2.amazonaws.com/developer.mozilla.org.tar.gz
Visit my blog.
git init
or
Press minus + shift + s and return to chop/fold long lines!
| <div class="container mt-3"> | |
| <div class="row justify-content-center"> | |
| <div class="col-sm-4 col-lg-3"> | |
| <img class="img-fluid rounded" src="assets/images/{{artist.shortname}}.jpg" alt="{{artist.name}} photo"> | |
| </div> | |
| <div class="col-sm-8 col-lg-4"> | |
| <h2 class="mt-3 mt-sm-0 mb-0">{{artist.name}}</h2> | |
| <h4 class="mt-0">{{artist.reknown}}</h4> | |
| <p>{{artist.bio}}</p> | |
| </div> |
| <div class="position-absolute container" style="left: 0; z-index:10"> | |
| <div class="row justify-content-center"> | |
| <div class="col-sm-10 col-md-8 col-lg-6 col-xl-5"> | |
| <div class="list-group"> | |
| <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> | |
| <div class="media"> | |
| <div class="media-body align-self-center"> | |
| <h5 class="m-0"></h5> | |
| </div><!-- media body --> | |
| </div><!-- media --> |
| [ | |
| { | |
| "name":"Barot Bellingham", | |
| "shortname":"Barot_Bellingham", | |
| "reknown":"Royal Academy of Painting and Sculpture", | |
| "bio":"Barot has just finished his final year at The Royal Academy of Painting and Sculpture, where he excelled in glass etching paintings and portraiture. Hailed as one of the most diverse artists of his generation, Barot is equally as skilled with watercolors as he is with oils, and is just as well-balanced in different subject areas. Barot's collection entitled \"The Un-Collection\" will adorn the walls of Gilbert Hall, depicting his range of skills and sensibilities - all of them, uniquely Barot, yet undeniably different" | |
| }, | |
| { | |
| "name":"Jonathan G. Ferrar II", | |
| "shortname":"Jonathan_Ferrar", |
| <div class="row justify-content-center"> | |
| <div class="card mt-sm-3 col-md-8"> | |
| <div class="card-body"> | |
| <h3 class="mb-0">Artist Directory</h3> | |
| <div class="form-group"> | |
| <div class="form-label"></div> | |
| <input class="form-control mt-2" type="text"> | |
| </div><!-- form-group --> | |
| </div><!-- card-body --> | |
| </div><!-- card --> |
FWIW: I didn't produce the content presented here (the outline from Edmond Lau's book). I've just copy-pasted it from somewhere over the Internet, but I cannot remember what exactly the original source is. I was also not able to find the author's name, so I cannot give him/her the proper credits.