Lesson Details:

July 10, 2020

I: Introduction

As we know that we should write an article about programming languages so first we need to know what is programming language? Programming Language is a set of rules, which helps us to explain to the computer how we want it to do our tasks. But there are many different types of programming languages and each one has its own characteristics. If we talk about Programming Languages then we can say that it is a set of instructions given to a computer or a machine to accomplish a task.

II: Body

A: Section Review of understanding layout with css

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language such as HTML or XML. CSS describes for an author/web designer how elements should be displayed on screen, on paper, in speech, etc. It can also control how those elements interact with each other and the user. The following is the brief review of CSS:

What is Cascading Style Sheet?

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language such as HTML or XML. CSS describes for an author/web designer how elements should be displayed on screen, on paper, in speech, etc. It can also control how those elements interact with each other and the user. The following is the brief review of CSS:

The Authoring Role of CSS

In order to use CSS, you must have a basic knowledge of HTML and a working knowledge of a graphic editor such as Adobe Photoshop®, Corel Draw®, Microsoft Publisher®, etc. In contrast to HTML, it is not necessary to place tags around your text because CSS does not describe the content of a document; rather, it describes the style of a document. For example, the structural tags

,

,
, , , etc., are not needed when using CSS since they are already implied by the style specified by CSS. The HTML tags and <META> still need to be used, however.<br /><br />The Purpose of CSS<br /><br />The purpose of CSS is to separate style (how things look) from content (what things mean). The separation of formatting from content allows you to change the formatting without modifying the content. For example, you might want to create a site that has some pages printed on green paper and others printed on pink paper. You can do this by creating two stylesheets that specify different fonts, margins, header positioning, etc.<br /><br />The Benefits of CSS<br /><br />CSS makes it easy to maintain documents because you can update the style sheets instead of manually changing every occurrence of the style in your documents. This makes it easier to change the look of your entire site without having to go through hundreds of pages and make manual changes. You can also make global changes to the look of your documents quickly by updating the style sheet (e.g., change all h1 headings to red). Because style sheets are text files, they are easier to work with than graphical editors, which requires reloading your document each time you make a change. You can also apply stylesheets to multiple documents at once (i.e., define the same style twice). Finally, if you decide not to use an application's built-in style sheets (such as Microsoft Word), you can use CSS instead. This allows you to bypass proprietary features and retain more control over your documents' appearance.<br /><br />The Limitations of CSS<br /><br />CSS does not support all HTML elements. For example, it does not support tables, frames, or forms. Also, if you wish to have tables with borders around them, you need to include table tags in your documents. Furthermore, you cannot use HTML attributes within your style sheets because these are ignored by browsers that support CSS. These limitations are expected to be eliminated in future versions of CSS. Another limitation is that certain attributes must be specified for each element individually (e.g., background color for body, h1 headings must be specified separately from h2 headings). This may be viewed as both an advantage and disadvantage since it is easy to update the style sheet but at the same time, it may be difficult to see what styles are being applied where if you have multiple stylesheets defining various styles for various elements.<br /><br />The Syntax of CSS<br /><br />A simple example of CSS follows: p {color:blue} . This example states that all paragraphs should be blue in color. If you want all h1 headings to be red instead, then you would write h1 {color:red} . A style sheet consists of two types of rules: selector and declarations. Selector rules specify which part of a document will be affected by the declaration rules within the same style sheet. There are four basic selectors: type selector , ID selector , class selector , and pseudo-class . All four selectors follow the same syntax: [attribute] [element] [pseudo-element] [class] [id] [PSEUDO]. Here are some examples: P[style="color:#00FF00"] {color:green} H1[style="color:#0000FF"] {color:blue} LI [style="color:#00FF00"] {color:green} UL LI [style="color:#0000FF"] {color:blue} P[STYLE] {color:green} H1[STYLE] {color:blue} LI[STYLE] {color:green} UL LI[STYLE] {color:blue} P[CLASS=red] {color:green} H1[CLASS=red] {color:blue} LI[CLASS=red] {color:green} UL LI[CLASS=red] {color:blue} P[ID=p123] {color:green} H1[ID=H123] {color:blue} LI[ID=LI2345] {color:green} UL LI[ID=UL3456789] {color:blue} P[PSEUDO=first-letter] {font-size:150%; color:red; font-weight:bold; position:absolute; top:-200px; left:-100px; padding:0; background-color:yellow;} H1[PSEUDO=first-letter] {font-size:200%; color:blue; font-weight:bold; margin-left:-50px; margin-top:-25px; padding:0; background-color:yellow;} LI[PSEUDO=first-letter] {font-size:150%; color:red; font-weight:bold; position: absolute; top:-200px; left:-100px; padding:0; background-color:yellow;} UL LI[PSEUDO=first-letter] {font-size:200%; color:blue; font-weight:bold; margin-left:-50px; margin-top:-25px; padding:0; background-color:yellow;}<br /><br />This example illustrates how all paragraphs should be green in color while only the first letter of all headings should be blue in color. We can get four types of selectors based on specific properties defined for each HTML element. These are Type selector , ID selector , Class selector , Pseudo Class selector . Type selector : The Type selector refers to all elements belonging to one particular type . For example p denotes all paragraph elements . Class selector : The Class selector refers to all elements belonging to one particular class . For example p.red denotes all paragraph elements having red class . ID selector : The ID selector refers to one unique element among all . For example #p123 denotes one unique paragraph element having id = p123 . Pseudo class : The pseudo class refers to elements based on their state on the page . For example :link refers to all links on the page that are yet to be clicked . :visited refers to all links on the page that have been already visited . :hover refers to all links on the page when mouse is moved over them . :active refers to all links on the page when user clicks on them . :focus refers to all links on the page when they have focus or when they are active but user is not clicking on them yet . :target refers to all links on the page when they are targeted by fragment identifier in url . There are several other pseudo classes like :first , :last etc but most commonly used ones are listed above . Type selector + Class selector = Class selector Type selector + ID selector = ID selector ID selector + Class </p>  </div> </div> </div> </div> <div class="container-fluid"> <div class="row justify-content-center mt-5"> <div class="col-lg-8">   </div> </div> </div> </div> </div>   <div class="loader" > <img src="https://d1vtrz601dorhd.cloudfront.net/img/loader.gif" width="80" height="80" alt="loader"></div> <div class="col-lg-3 order-md-2 course_col " id = "lesson_list_area"> <div class="text-center" style="margin: 12px 10px;"> <h5>Course content</h5> </div> <div id="sidebarhtmlData"> </div> </div>  </div> </div> <script type="text/javascript"> $(document).ready(function(){ $('.loader').show(); var secondParam = 'section-review-of-understanding-layout-with-css'; var firstParam = 'Introduction-to-programming-coding-languages'; if(firstParam!='' && secondParam!=''){ $.ajax({ type: "POST", url: 'https://www.appypie.com/academy/get_data_by_ajax', data: {'firstParam':firstParam,'secondParam':secondParam}, dataType:'JSON', success:function(responce) { if(responce){ //console.log(responce.data); setTimeout(function(){ $('#sidebarhtmlData').html(responce.data).show(); $('.loader').hide(); },100); } } }); } }); </script> <script src="https://d1vtrz601dorhd.cloudfront.net/js/vendor/modernizr-3.5.0.min.js"></script>  <script src="https://d1vtrz601dorhd.cloudfront.net/js/popper.min.js"></script> <script src="https://d1vtrz601dorhd.cloudfront.net/js/bootstrap.min.js"></script>  <script src="https://d1vtrz601dorhd.cloudfront.net/js/select2.min.js"></script> <script src="https://d1vtrz601dorhd.cloudfront.net/js/tinymce.min.js"></script> <script src="https://d1vtrz601dorhd.cloudfront.net/js/multi-step-modal.js"></script> <script src="https://d1vtrz601dorhd.cloudfront.net/js/jquery.webui-popover.min.js"></script> <script src="https://content.jwplatform.com/libraries/O7BMTay5.js"></script> <script src="https://d1vtrz601dorhd.cloudfront.net/js/main.js"></script> <script src="https://d1vtrz601dorhd.cloudfront.net/js/toastr.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js" integrity="sha384-FzT3vTVGXqf7wRfy8k4BiyzvbNfeYjK+frTVqZeNDFl8woCbF0CYG6g2fMEFFo/i" crossorigin="anonymous"></script> <script src="https://d1vtrz601dorhd.cloudfront.net/js/bootstrap-tagsinput.min.js"></script> <script src="https://d1vtrz601dorhd.cloudfront.net/js/custom.js"></script>        <script> function toggle_lesson_view() { $('#lesson-container').toggleClass('justify-content-center'); $("#video_player_area").toggleClass("order-md-1"); $("#lesson_list_area").toggleClass("col-lg-5 order-md-1"); } </script> <div class="footer-section"> <div class="section-9-1 sec"> <div data-index="7" class="ft-wiget-nz"> <div class="container-lg"> <div class="certi-par"> <div class="certi-icon">  <span class="sheild-bg sprite"></span> </div> <div class="certi-desc">Appy Pie’s platform helps you deliver enterprise-class security and compliance to your customers through every interaction.</div> <div class="certi-footer"> <a class="certi-footer-btn" href="https://www.appypie.com/security#GDPR" aria-label="Read more about EU-GDPR COMPLIANT">EU-GDPR COMPLIANT</a> <a href="https://www.appypie.com/security#PCI-DSS" aria-label="Read more about PCI-DSS">  <span class="pci-bg sprite"></span> </a> <a href="https://www.appypie.com/security#ISO-27001" aria-label="Read more about ISO-27001">  <span class="iso-bg sprite"></span> </a> <a class="certi-footer-btn" href="https://www.appypie.com/security#SOC-2" aria-label="Read more about SOC-1 & SOC-2 COMPLIANT">SOC-1 & SOC-2 COMPLIANT</a> </div> </div> <div class="topFooter"> <div class="row"> <div class="col-md-3 col-sm-6" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement"> <ul class="footer-nav-list pl-0"> <li class="footer-nav-heading"> <h5>Products</h5></li> <li> <a target="_blank" rel="noreferrer" href="https://www.appypie.com/app-builder/appmaker" itemprop="url"><span itemprop="name">App Maker</span></a> </li> <li> <a target="_blank" rel="noreferrer" href="https://www.appypie.com/website-builder" itemprop="url"><span itemprop="name">Website Builder</span></a> </li> <li> <a target="_blank" rel="noreferrer" href="https://www.appypie.com/chatbot/builder" itemprop="url"><span itemprop="name">Chatbot Builder</span></a> </li> <li> <a target="_blank" rel="noreferrer" href="https://www.appypie.com/live-chat" itemprop="url"><span itemprop="name">Live Chat Software</span></a> </li> <li> <a target="_blank" rel="noreferrer" href="https://www.appypie.com/design/" itemprop="url"><span itemprop="name">Graphic Design</span></a> </li> <li> <a target="_blank" rel="noreferrer" href=" https://www.appypie.com/connect/" itemprop="url"><span itemprop="name">App Integration</span></a> </li>  <li> <a target="_blank" rel="noreferrer" href="https://www.appypie.com/how-to-create-an-app" itemprop="url"><span itemprop="name">How to Create an App</span></a> </li> </ul> </div> <div class="col-md-3 col-sm-6" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement"> <ul class="footer-nav-list pl-0"> <li class="footer-nav-heading"> <h5>High Rated </h5></li> <li><a href="https://www.appypie.com/academy/create-mobile-apps-for-android-and-ios-without-any-coding" itemprop="url"><span itemprop="name">App Developer Certification Course</span></a></li> <li><a href="https://www.appypie.com/academy/youtube-channel-design" itemprop="url"><span itemprop="name">Youtube Channel Design</span></a></li> <li><a href="https://www.appypie.com/academy/instagram-marketing" itemprop="url"><span itemprop="name">Instagram Marketing</span></a></li> <li><a href="https://www.appypie.com/academy/learn-graphic-design" itemprop="url"><span itemprop="name">Learn Graphic Design</span></a></li> <li><a href="https://www.appypie.com/academy/what-is-seo" itemprop="url"><span itemprop="name">What is SEO</span></a></li> <li><a href="https://www.appypie.com/academy/mobile-app-marketing" itemprop="url"><span itemprop="name">Mobile App Marketing</span></a></li> <li><a href="https://www.appypie.com/academy/principles-of-entrepreneurship" itemprop="url"><span itemprop="name">Principles of Entrepreneurship</span></a></li> </ul> </div> <div class="col-md-3 col-sm-6" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement"> <ul class="footer-nav-list pl-0"> <li class="footer-nav-heading"> <h5>Popular Lessons</h5></li> <li><a href="https://www.appypie.com/academy/mobile-app-marketing/benefits-of-mobile-app-marketing" itemprop="url"><span itemprop="name">Mobile App Marketing Benefits</span></a></li> <li><a href="https://www.appypie.com/academy/youtube-channel-design/welcome-to-canva" itemprop="url"><span itemprop="name">Welcome to Canva</span></a></li> <li><a href="https://www.appypie.com/academy/instagram-marketing/What-Is-Instagram" itemprop="url"><span itemprop="name">What is Instagram</span></a></li> <li><a href="https://www.appypie.com/academy/how-to-check-company-details/introduction-to-web-research" itemprop="url"><span itemprop="name">Introduction to Web Research</span></a></li> <li><a href="https://www.appypie.com/academy/b2b-lead-generation/introduction-to-lead-generation" itemprop="url"><span itemprop="name">Lead Generation Introduction</span></a></li> <li><a href="https://www.appypie.com/academy/facebook-marketing-strategy/how-to-optimize-your-facebook-page-description" itemprop="url"><span itemprop="name">Optimize your Facebook page</span></a></li> </ul> </div> <div class="col-md-3 col-sm-6" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement"> <ul class="footer-nav-list pl-0"> <li class="footer-nav-heading"> <h5>Popular Categories</h5></li> <li><a href="https://www.appypie.com/academy/courses/design" itemprop="url"><span itemprop="name">Design Course</span></a></li> <li><a href="https://www.appypie.com/academy/courses/marketing" itemprop="url"><span itemprop="name">Marketing Course</span></a></li> <li><a href="https://www.appypie.com/academy/courses/development" itemprop="url"><span itemprop="name">Development Course</span></a></li> <li><a href="https://www.appypie.com/academy/courses/office-productivity" itemprop="url"><span itemprop="name">Office Productivity Course</span></a></li> <li><a href="https://www.appypie.com/academy/courses/marketing-fundamentals" itemprop="url"><span itemprop="name">Marketing Fundamentals Course</span></a></li> <li><a href="https://www.appypie.com/academy/courses/small-business-marketing" itemprop="url"><span itemprop="name">Small Business Marketing</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <div class="footer-sec"> <div class="container-lg"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 footerlogo"> <a href="https://www.appypie.com/academy/"> <img class="" src="https://d1vtrz601dorhd.cloudfront.net/img/footer-logo-dark.svg" width="203" height="50" alt="Academy Appy Pie"> </a> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 p-md-0"> <div class="footerMenu" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement"> <div class="menu-footer-nav-container"> <ul class="nav s-nav"> <li><a title="About Us" rel="nofollow" href="https://www.appypie.com/about-us" itemprop="url"><span itemprop="name">About Us</span></a></li> <li><a title="Terms & Conditions" rel="nofollow" href="https://www.appypie.com/terms-of-use" itemprop="url"><span itemprop="name">Terms of Use</span></a></li> <li><a title="Privacy Policy" rel="nofollow" href="https://www.appypie.com/privacy-policy" itemprop="url"><span itemprop="name">Privacy Policy</span></a></li>  <li><a rel="nofollow" href="https://www.appypie.com/security" itemprop="url"><span itemprop="name">Security</span></a></li> </ul> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> <div class="social_icons-footer"> <ul class="social_icons-footer"> <li class="facebook"><a href="https://www.facebook.com/AppyPieInc" target="_blank" rel="nofollow noopener" title="Facebook">Facebook<span class="fab fa-facebook-f"></span></a> </li> <li class="twitter"><a href="https://twitter.com/AppyPieInc" target="_blank" rel="nofollow noopener" title="Twitter">Twitter <span class="fab fa-twitter"></span></a> </li> <li class="pin"><a href="https://www.pinterest.com/appypie/" target="_blank" rel="nofollow noopener" title="Pinterest">Pinterest<span class="fab fa-pinterest-p"></span></a> </li> <li class="blog"><a href="https://www.appypie.com/blog" target="_blank" rel="nofollow noopener" title="Appypie blog">Appypie blog<span class="fab fa-blogger-b"></span></a> </li> <li class="linden"><a href="https://www.linkedin.com/company/appy-pie-inc/" target="_blank" rel="nofollow noopener" title="linkedin">linkedin<span class="fab fa-linkedin-in"></span></a> </li> <li class="youtube"><a href="https://www.youtube.com/user/AppyPieInc" target="_blank" rel="nofollow noopener" title="Youtube">Youtube<span class="fab fa-youtube"></span></a> </li> <li class="instagram"><a href="https://www.instagram.com/AppyPieInc/" target="_blank" rel="nofollow noopener" title="Instagram">Instagram<span class="fab fa-instagram"></span></a> </li> </ul> </div> </div> </div> </div> <div class="copyright">© 2020, <a href="https://www.appypie.com" target="_blank" rel="noreferrer" class="copyright">Appy Pie</a>. All Rights Reserved.</div> </div> </div>    <div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content payment-in-modal"> <div class="modal-header"> <h5 class="modal-title">Checkout!</h5> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-6"> <form action="https://www.appypie.com/academy/paypal_checkout" method="post"> <input type="hidden" class="total_price_of_checking_out" name="total_price_of_checking_out" value=""> <button type="submit" class="btn btn-default paypal" > Paypal </button> </form> </div> <div class="col-md-6"> <form action="https://www.appypie.com/academy/stripe_checkout" method="post"> <input type="hidden" class="total_price_of_checking_out" name="total_price_of_checking_out" value=""> <button type="submit" class="btn btn-primary stripe" > Stripe </button> </form> </div> </div> </div> </div> </div> </div>   <div class="modal fade multi-step" id="EditRatingModal" tabindex="-1" role="dialog" aria-hidden="true" reset-on-close="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content edit-rating-modal"> <div class="modal-header"> <h5 class="modal-title step-1" data-step="1">Step 1</h5> <h5 class="modal-title step-2" data-step="2">Step 2</h5> <h5 class="m-progress-stats modal-title"> of <span class="m-progress-total"></span></h5> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> </button> </div> <div class="m-progress-bar-wrapper"> <div class="m-progress-bar"> </div> </div> <div class="modal-body step step-1"> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div class="modal-rating-box"> <h4 class="rating-title">How would you rate this course overall?</h4> <fieldset class="your-rating"> <input type="radio" id="star5" name="rating" value="5" /> <label class = "full" for="star5"></label> <input type="radio" id="star4" name="rating" value="4" /> <label class = "full" for="star4"></label> <input type="radio" id="star3" name="rating" value="3" /> <label class = "full" for="star3"></label> <input type="radio" id="star2" name="rating" value="2" /> <label class = "full" for="star2"></label> <input type="radio" id="star1" name="rating" value="1" /> <label class = "full" for="star1"></label> </fieldset> </div> </div> <div class="col-md-6"> <div class="modal-course-preview-box"> <div class="card"> <img class="card-img-top img-fluid" id = "course_thumbnail_1" alt=""> <div class="card-body"> <h5 class="card-title" class = "course_title_for_rating" id = "course_title_1"></h5> <p class="card-text" id = "instructor_details"> </p> </div> </div> </div> </div> </div> </div> </div> <div class="modal-body step step-2"> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div class="modal-rating-comment-box"> <h4 class="rating-title">Write a public review</h4> <textarea id = "review_of_a_course" name = "review_of_a_course" placeholder="Describe your experience what you got out of the course and other helpful highlights. What did the instructor do well and what could use some improvement?" maxlength="65000" class="form-control"> </textarea> </div> </div> <div class="col-md-6"> <div class="modal-course-preview-box"> <div class="card"> <img class="card-img-top img-fluid" id = "course_thumbnail_2" alt=""> <div class="card-body"> <h5 class="card-title" class = "course_title_for_rating" id = "course_title_2"></h5> <p class="card-text"> - av kumar </p> </div> </div> </div> </div> </div> </div> </div> <input type="hidden" name="course_id" id = "course_id_for_rating" value=""> <div class="modal-footer"> <button type="button" class="btn btn-primary next step step-1" data-step="1" onclick="sendEvent(2)">Next</button> <button type="button" class="btn btn-primary previous step step-2 mr-auto" data-step="2" onclick="sendEvent(1)">Previous</button> <button type="button" class="btn btn-primary publish step step-2" onclick="publishRating($('#course_id_for_rating').val())" id = "">Publish</button> </div> </div> </div> </div>  <style> .menu-footer-nav-container > .nav { justify-content: center; } </style> <script type="text/javascript"> setTimeout(function() { var cookiesHeadID = document.getElementsByTagName("head")[0]; var cookiesScript = document.createElement('script'); cookiesScript.type = 'text/javascript'; cookiesScript.src = 'https://accounts.appypie.com/assets/ui-js/cookies.js'; cookiesHeadID.appendChild(cookiesScript); }, 13000); function publishRating(course_id) { //var checkCourseid = course_id; var review = $('#review_of_a_course').val(); var starRating = 0; $('input:radio[name="rating"]:checked').each(function() { starRating = $('input:radio[name="rating"]:checked').val(); }); $.ajax({ type : 'POST', url : 'https://www.appypie.com/academy/rate_course', data : {course_id : course_id, review : review, starRating : starRating}, success : function(response) { console.log(response); $('#EditRatingModal').modal('hide'); location.reload(); } }); } </script> <script src="https://d1vtrz601dorhd.cloudfront.net/js/vendor/jquery-3.4.1.min.js"></script> <script src="https://d1vtrz601dorhd.cloudfront.net/js/popper.min.js" async></script> <script src="https://d1vtrz601dorhd.cloudfront.net/js/bootstrap.min.js"></script>  <script src="https://d1vtrz601dorhd.cloudfront.net/js/select2.min.js" async></script> <script src="https://d1vtrz601dorhd.cloudfront.net/js/tinymce.min.js" async></script> <script src="https://d1vtrz601dorhd.cloudfront.net/js/multi-step-modal.js" async></script> <script src="https://d1vtrz601dorhd.cloudfront.net/js/jquery.webui-popover.min.js" async></script>  <script src="https://d1vtrz601dorhd.cloudfront.net/js/main.js" async></script>   <script src="https://d1vtrz601dorhd.cloudfront.net/js/jquery.nestable.min.js" charset="utf-8" async></script>  <script src="https://d1vtrz601dorhd.cloudfront.net/js/jquery.form.min.js" async></script> <script src="https://d1vtrz601dorhd.cloudfront.net/js/bootstrap-tagsinput.min.js" async></script> <link rel="stylesheet" href="https://d1vtrz601dorhd.cloudfront.net/css/toastr.min.css" type="text/css"> <script src="https://d1vtrz601dorhd.cloudfront.net/js/toastr.min.js"></script>  <script> ///// sw registration ///// if('serviceWorker' in navigator) { navigator.serviceWorker .register('https://www.appypie.com/academy/service-worker.js') //.register('../service-worker.js') //.then(function() { console.log("Service Worker Registered"); }); } $('.academy-sm-nav-toggle').click(function(){ $('.mobile-main-nav').addClass('nav-is-visible moves-out'); $('.category').removeClass('is-hidden'); $('.mobile-overlay').toggleClass('is-visible') }); $('.go-back-btn').click(function(){ //alert('working') $('.mobile-main-nav').removeClass('nav-is-visible moves-out'); $('.category').addClass('is-hidden'); $('.mobile-overlay').toggleClass('is-visible') }); // $('.mobile-search-trigger').click(function(){ // $(this).toggleClass('search-is-visible'); // $('.mobile-search').toggleClass('is-visible') // }); </script> <script type="text/javascript"> function showAjaxModal(url) { // SHOWING AJAX PRELOADER IMAGE jQuery('#modal_ajax .modal-body').html('<div style="text-align:center;margin-top:200px;"><img src="/assets/images/preloader.gif" /></div>'); // LOADING THE AJAX MODAL jQuery('#modal_ajax').modal('show', {backdrop: 'true'}); // SHOW AJAX RESPONSE ON REQUEST SUCCESS $.ajax({ url: url, success: function(response) { jQuery('#modal_ajax .modal-body').html(response); } }); } </script>  <div class="modal fade" id="modal_ajax"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal</h4> </div> <div class="modal-body" style="height:500px; overflow:auto;"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script type="text/javascript"> function confirm_modal(delete_url) { jQuery('#modal-4').modal('show', {backdrop: 'static'}); document.getElementById('delete_link').setAttribute('href' , delete_url); } </script>  <div class="modal fade" id="modal-4"> <div class="modal-dialog"> <div class="modal-content" style="margin-top:100px;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" style="text-align:center;">Are you sure to delete this information ?</h4> </div> <div class="modal-footer" style="margin:0px; border-top:0px; text-align:center;"> <a href="#" class="btn btn-danger" id="delete_link">Delete</a> <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button> </div> </div> </div> </div> <script> ///// sw registration ///// if('serviceWorker' in navigator) { navigator.serviceWorker .register('/service-worker.js') //.then(function() { console.log("Service Worker Registered"); }); } </script> <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"5534ccca24","applicationID":"1016663403","transactionName":"YgZRMRBXX0tSBURYWVtMZhcLGVBbUgJVXE8aCl0BB04fSFsW","queueTime":0,"applicationTime":68,"atts":"TkFSR1hNTEU=","errorBeacon":"bam.nr-data.net","agent":""}</script></body> </html>

Section Review of Understanding Layout with CSS

Lesson Details:

,

,