Web Development Courses and Code Snippets By Laurence Svekis Learn to Code JavaScript HTML CSS Google Apps Script Google Workspace NodeJS Python and more

Online Courses for Google Apps Script and JavaScript

  • JavaScript lesson Regex Checking for Numbers in the input field
    Regex Checking for Numbers in the input field  Check for values that match a Regex pattern in the input field.  Push a button and apply the match checker to return the results in the console.  <!DOCTYPE html> <html> <head>   <title>JavaScript Course</title> </head> <body>   <div class=”main”>   <input id=”nums” ><button>Submit</button>   </div>   <script>     const nums = document.querySelector(‘#nums’);     const btn = document.querySelector(‘button’);     btn.onclick = ()=>{       const pattern = /^[0-9]*$/gm;       const results = nums.value.match(pattern);       const isValidNumber = results != null;       console.log(isValidNumber);   … Read more
  • Search Active Sheet Google apps script lesson Search Active Sheet to find matching text results
    Apps Script – Search Active Sheet to find matching text results of cells Use of the createTextFinder method to search a sheet object and return back the matching results.  To get the first value use the method findNext() in the results which is an iterator.  To convert all the matching results into an array object use the findAll() method.  This will return an array format object that contains the cells as items in the array.   From here you can use array methods to interact with the items in the found results. function searchIt() {  const sheet = SpreadsheetApp.getActiveSheet();  const … Read more
  • Learn JavaScript Complete Lesson JavaScript Typing Game from scratch Typing Skills Game
    Words Typing Display Game Words Typing Display Game Exercise is to create a speed typing game using JavaScript, the game will test time and accuracy of typed words.  Each word will show, as well as the following word in the random word sequence.  The objective of the JavaScript game is to type the words accuray and quickly.  This lesson will explore using JavaScript Date object, JavaScript DOM to create and update page elements, DOM for element event listeners.  Applying logic and gameplay with Javascript Code. Words Typing Display GameExercise is to create a speed typing game using JavaScript, the game … Read more
  • JavaScript coding lesson how to code Set Interval repeat code
    Explore how to code with JavaScript. Setup interval can be added and removed. It can be used to repeat code on a set interval.
  • JavaScript Lesson Start and Stop Timer GetTime For Timer using Date
    GetTime For Timer using DateHow to set up a timer based on a JavaScript Date object. This project will create a set of buttons that can start and stop a timer. The timer values are based on the ECMAScript epoch from the Date object in JavaScript that can be returned using getTime(). This format will provide a more exact time calculation as the time will be returned and calculated. Select the page elements and create a start and stop button. If you create the elements in JavaScript like the code below you can also set the styling with the element … Read more
  • How to Update parts of an HTML element with CSS Pseudo elements
    Pseudo-elements CSS adding content to page elements with CSS Pseudo elements can select part of an element and apply styling.  They can also be used to add content before and after the content within the element selection.  Update parts of an HTML element with CSS Pseudo elements
  • What are CSS Pseudo classes how to add styling to different element states hover effect CSS
    CSS Pseudo-classes for hover effects and more create interactive content CSS Pseudo classes used to define the state of an element.  By default on anchor tags, these properties can set the look and feel on the various states.  Pseudo classes can be applied to any element, making the element styling update on change of state.  What are CSS Pseudo classes how to add styling to different element states hover effect CSS
  • How to Add Styling to HTML elements Text and Fonts CSS letter spacing line height and CSS text
    How to apply CSS to text setting font styling,text decoration and transformations. Use CSS to update how the text looks and feels from your website.  Set the text alignment within the parent element, with left right and center.   How to transform text within an element to uppercase, lowercase and how to capitalize text with CSS.  Font styling with italic and bold.  How to add a new font family and set text font styling with CSS.   Use of Google Fonts selecting a font to use from Google’s web fonts.  How to Add Styling to HTML elements Text and Fonts … Read more
  • CSS Box Model How to set Border Margin Padding and element sizes height and width CSS properties
    What is the CSS Box Model and How to set Border Margin Padding for elements HTML elements are in a rectangular shape, each can be thought of as a box.  With the outer property of a margin, and inner with padding and content.  The divider line is the border which can be set on any element.  The box model wraps around the HTML element consisting of the margin, borders, padding, and content.  Content dimensions of height and width can also set for the content to be contained within. CSS Box Model How to set Border Margin Padding and element sizes … Read more
  • Setting Colors for Text and Backgrounds with CSS adding Images to elements Color Value Units
    Colors of text and background colors can easily be applied.  Different color values can be used, such as the HEX value of the color, the RGB color value, or the named color value.  Background images can also be set to any page element.   Using a background image, there are properties that can be set to apply images with more specific details.   HEX values are in three parts, just like the RGB color values.  HEX value for 0 is 00, and the highest value of 255 is FF.  Using the hex value you can apply colors to the value. … Read more
  • JavaScript DOM for Beginners 2022 Learn how to code
    Perfect course to learn more about JavaScript and how to apply JavaScript in real world applications.  Make your web pages come to life with JavaScript.  Create interactive and dynamic web page content today!!!  Learn how to animate page elements, use the page element object properties and values within your code. Includes 30+ Page Downloadable Source Code and JavaScript Resource Guide https://www.udemy.com/course/javascript-example-code/?referralCode=E1FC4819A71866D0FD62 LifeTime Access with new updates – Professional support within the Q&A section. JavaScript is used when creating interactive and dynamic web content. It allows you to bring your web pages to life. Almost all modern websites use JavaScript and … Read more
  • Modern CSS for Beginners 2022 web design getting started
    CSS is a crucial part of the web development process Learn how to bring your HTML to life applying CSS to your web code Quick Start Guide to CSS styling web pages for beginners Includes 35+ page PDF downloadable Guide Explore and learn how to design web pages with CSS styling.  Apply CSS to bring your web pages to life.  Modern CSS syntax and coding to create websites quickly and easily.  Source code included so that you can try the code as you go through the lessons of the course. Adding CSS to your HTML page from CSS file How … Read more
  • How to select page elements CSS HTML Page Element Selection Element Selection CSS
    How to select page elements CSS HTML Page Element Selection Page element selection can be done by selecting elements by tag, by class name, or by the element id attribute.  All elements can be selected using a wildcard.  Element selection can also be grouped by comma separation of the selectors.  When planning and designing your HTML webpage elements, ensure to plan for element selection with CSS.  Create elements that if needing a specific style applied, should be easy to select and unique enough that other elements won’t match the selection. Get the Course here :  https://www.udemy.com/course/web-design-html-css-js/?referralCode=9A4AAC2FF1E707E96EB4 Front-end web developer Modern … Read more
  • How to create a Responsive CSS Grid Layout in under 5 minutes navbar and 3 column design CSS
    Modern Responsive 3 column website template with CSS Grid Quick Layout design Use CSS grid for a modern fully responsive website that can be used as a template for more complex web design.  Apply CSS Grid properties and values to create a 3 column website from scratch.  Create a fully responsive navigation bar using CSS grid.  How to create a Responsive CSS Grid Layout in under 5 minutes navbar and 3 column design CSS Get the Course here :  https://www.udemy.com/course/web-design-html-css-js/?referralCode=9A4AAC2FF1E707E96EB4 Front-end web developer Modern HTML CSS JavaScript 2022 Quick Starting guide for Web design covering all the modern coding syntax … Read more
  • How to create a layout with Flex box easy CSS Layout lesson
    Create a 3 column Website layout with CSS flexbox Simple Layout Design Explore how to create a 3 column website that is fully responsive and mobile ready.  Create columns within the main content section, and set up the navigation bar that is responsive with CSS Flexbox.  Modern web design and template with CSS Flexbox. How to create a layout with Flex box easy CSS Layout lesson. Get the Course here :  https://www.udemy.com/course/web-design-html-css-js/?referralCode=9A4AAC2FF1E707E96EB4 Front-end web developer Modern HTML CSS JavaScript 2022 Quick Starting guide for Web design covering all the modern coding syntax for HTML CSS and JavaScript and JavaScript DOM … Read more
  • Create a web template in minutes with CSS float How to create a simple template CSS Float Layout
    How to create a simple template using CSS Float Layout with CSS Create a simple layout that can be used as a starting template.  Three column website created quickly and easily with CSS float.  Explore how you can create a CSS template for your website using CSS float. Create a web template in minutes with CSS float How to create a simple template CSS Float Layout Get the Course here :  https://www.udemy.com/course/web-design-html-css-js/?referralCode=9A4AAC2FF1E707E96EB4 Front-end web developer Modern HTML CSS JavaScript 2022 Quick Starting guide for Web design covering all the modern coding syntax for HTML CSS and JavaScript and JavaScript DOM … Read more
  • Getting started with CSS Adding CSS to HTML pages adding Styling to HTML elements
    Adding CSS to your HTML page from CSS file How to add CSS to your web pages.   Create a separate CSS file and link it to your HTML page.  Select page elements apply styling values to the style properties.  Inline line style attribute, style tag and style CSS file. Get the Course here :  https://www.udemy.com/course/web-design-html-css-js/?referralCode=9A4AAC2FF1E707E96EB4 Front-end web developer Modern HTML CSS JavaScript 2022 Quick Starting guide for Web design covering all the modern coding syntax for HTML CSS and JavaScript and JavaScript DOM Learn how to How to create web pages with HTML and CSS Create interactive web content … Read more
  • Modern CSS for Beginners 2022 web design getting started New Course FREE PDF Guide Included Below
    CSS is a crucial part of the web development process Learn how to bring your HTML to life applying CSS to your web code Quick Start Guide to CSS styling web pages for beginners Includes 35+ page PDF downloadable Guide Explore and learn how to design web pages with CSS styling.  Apply CSS to bring your web pages to life.  Modern CSS syntax and coding to create websites quickly and easily.  Source code included so that you can try the code as you go through the lessons of the course. Adding CSS to your HTML page from CSS file How … Read more
  • Create a Responsive Website from scratch Quickly and easily use Media Query CSS lesson Free styling
    CSS setting Media Query with Final CSS style UpdatesResize and stack columns as rows on screen sizes less than 640px. Add the media query and make adjustments to the look and feel of the website on smaller screens. Test out the styling and preview how it adjusts to different size screens. Use the placeholder content to simulate real website content to be added afterwards. @import url(‘https://fonts.googleapis.com/css2?family=Open+Sans&family=PT+Sans&display=swap’);body{font-family: ‘PT Sans’, sans-serif;} {box-sizing: border-box;} nav ul {font-family: ‘Open Sans’, sans-serif;display:grid;grid-template-columns: repeat(4,1fr);grid-template-rows: 50px;justify-content:center;justify-items:center;list-style-type:none;margin:0;} nav ul li{background-color:#000;width:90%;text-align:center;line-height:50px;}nav ul li a{text-decoration:none;color:white;}nav ul li:hover{background-color:red;} .wrapper {display: grid;grid-template-rows: 150px repeat(3,auto);grid-template-columns: 3fr 1fr;grid-gap: 1em;} .wrapper>* {border: 1px solid black; … Read more
  • Add placeholder content Modern Web Design Lesson with CSS Grid and CSS page styling Responsive web
    Adding Placeholder content and Web Design styling with CSSWhen creating web pages, often the final content is not ready. You can use placeholder content, like images and lorem ipsum text in place of content which can get added later. The placeholder or dummy content can be used while designing your website so that the pages have a real look and feel to them. This is perfect for web design and testing of responsive and positioning of page elements with CSS. Apply CSS styling and make adjustments to fit the content as desired. This lesson will apply styling to the page … Read more
  • Create a Responsive CSS Grid NavBar in minutes source code included modern web design lesson
    How to add a responsive CSS NavBar using CSS Grid styling blocksHow to set up a navigation bar using CSS Grid. Apply and set the display to the grid of the parent element. Set the column template to create separate columns for each navigation bar item. Update the list items, remove the default styling of the unordered list items, to create navbar blocks. Add hover effect for the mouse over highlight of the nav bar item blocks. <!DOCTYPE html> <html>    <head>        <title>WebSite CSS Grid Laurence Svekis</title>        <link rel=”stylesheet” href=”style.css”>    </head>    <body>        <div class=”wrapper”>            <header>Header</header>            <nav>                <ul>                    <li><a href=”#”>Home</a></li>                    <li><a href=”#”>About</a></li> … Read more
  • How to setup a website in less than 10 minutes with CSS grid responsive modern WebPage Setup
    Modern Responsive Web Design Source Code CSS and HTML CSS Grid Design website Explore how you can create a website, apply CSS to HTML page elements for modern real world website design. Create a basic HTML CSS website template that you can use as a base structure for creating more websites. Setup the HTML page elements, including the header footer and main content area. Ådd a navigation bar and side menu. The upcoming lessons will help you learn to apply CSS to HTML elements. HTML and CSS are prerequisites as this course is designed to demonstrate applying and practicing CSS … Read more
  • New Course Modern Responsive Web Design Source Code CSS and HTML CSS Grid Design website Free PDF guide included
    Modern Responsive Web Design Source Code CSS and HTML CSS Grid Design website Modern Responsive Web Design Source Code CSS and HTML CSS Grid Design website Explore how you can create a website, apply CSS to HTML page elements for modern real world website design.  Create a basic HTML CSS website template that you can use as a base structure for creating more websites.  Setup the HTML page elements, including the header footer and main content area.  Add a navigation bar and side menu.  The upcoming lessons will help you learn to apply CSS to HTML elements.  HTML and CSS … Read more
  • Web Design Responsive Website Template from Scratch HTML CSS FREE PDF Guide
    Build your own website from scratch Web Design how to build a simple website template from scratch using HTML and CSS Modern Responsive Web Design Source Code CSS and HTML CSS Grid Design website https://www.udemy.com/course/responsive-website-template-from-scratch-html-css/?couponCode=UPDATE2022 Explore how you can create a website, apply CSS to HTML page elements for modern real world website design.  Create a basic HTML CSS website template that you can use as a base structure for creating more websites.  Setup the HTML page elements, including the header footer and main content area.  Add a navigation bar and side menu.  The upcoming lessons will help you learn … Read more
  • Check out these top recommended Web development courses – Limited time offer, HTML CSS JavaScript #webdevelopment #javascript #html #css
    Check out these hot courses, new content and in demand skills for Spring 2022! Use the promo code SPRING2022 today, to get the best deal possible! Hurry this is a limited time offer…… Just updated Explore JavaScript DOM – Create Dynamic Web Pages JavaScript DOM for Beginners 2022 Learn how to code JavaScript DOM coding examples learn how to create interactive and dynamic web pages Element selection and updating – includes PDF downloadable Guide https://www.udemy.com/course/javascript-example-code/?couponCode=SPRING2022 New Google Sheets Course – Google Sheets Tips Tricks Quick HowTo Workspace Resources Explore how you can save time with Google Sheets do more in … Read more
  • JavaScript How to Create a Bouncing Ball Animation with Vanilla JavaScript and moving Page elements
    JavaScript How to Create a Bouncing Ball Animation with Vanilla JavaScript and moving Page elements Course content web development and web design courses with coding examples and source code for the lesson content. Source Code is available within my Github account. Lessons posted are designed to help students learn more about a specific topic related to modern web development and applying code. Laurence Svekis is a professional top selling course author having instructed over 1 Million students both online and in person. Laurence Svekis is a Google Developer Expert specializing in Google Workspace automation using Google Apps Script Code. JavaScript … Read more
  • JavaScript code and the DOM wait for page loaded ready with DOMContentLoaded Event
    JavaScript code and the DOM wait for page loaded ready with DOMContentLoaded Event Explore more about how to use JavaScript to connect to web page elements, create game and make your content come to life with interactive and dynamic web page. Learn JavaScript DOM for Beginners Interactive Web Pages. Learn JavaScript DOM for Beginners Interactive Web Pages. https://www.udemy.com/course/javascript-projects-dom/ Do you want to add interaction or dynamic content to your web pages, this is the course for you! JavaScript can bring your web pages to life – interact with the DOM.   Select page elements, make changes and update them as needed.  … Read more
  • Simple JavaScript List maker
    Explore more about how to use JavaScript to connect to web page elements, create game and make your content come to life with interactive and dynamic web page. Learn JavaScript DOM for Beginners Interactive Web Pages. Learn JavaScript DOM for Beginners Interactive Web Pages. https://www.udemy.com/course/javascript-projects-dom/ Do you want to add interaction or dynamic content to your web pages, this is the course for you! JavaScript can bring your web pages to life – interact with the DOM.   Select page elements, make changes and update them as needed.  Power up your web pages!!! Course content web development and web design courses … Read more
  • Events on Form Fields Adding interactive event listeners on the input fields Learn JavaScript DOM
    Events on Form Fields Adding interactive event listeners on the input fields Learn JavaScript DOM Explore more about how to use JavaScript to connect to web page elements, create game and make your content come to life with interactive and dynamic web page. Learn JavaScript DOM for Beginners Interactive Web Pages. Learn JavaScript DOM for Beginners Interactive Web Pages. https://www.udemy.com/course/javascript-projects-dom/ Do you want to add interaction or dynamic content to your web pages, this is the course for you! JavaScript can bring your web pages to life – interact with the DOM.   Select page elements, make changes and update them … Read more
  • Learn JavaScript DOM Event Listeners options and settings coding examples
    Learn JavaScript DOM Event Listeners options and settings coding examples Learn JavaScript DOM Event Listeners options and settings coding examples Explore more about how to use JavaScript to connect to web page elements, create game and make your content come to life with interactive and dynamic web page. Learn JavaScript DOM for Beginners Interactive Web Pages. Learn JavaScript DOM for Beginners Interactive Web Pages. https://www.udemy.com/course/javascript-projects-dom/ Do you want to add interaction or dynamic content to your web pages, this is the course for you! JavaScript can bring your web pages to life – interact with the DOM.   Select page elements, … Read more
  • How to add Event Listeners to Web Page Elements with JavaScript Adding Event Listeners to Elements
    How to add Event Listeners to Web Page Elements with JavaScript Adding Event Listeners to Elements Explore more about how to use JavaScript to connect to web page elements, create game and make your content come to life with interactive and dynamic web page. Learn JavaScript DOM for Beginners Interactive Web Pages. Learn JavaScript DOM for Beginners Interactive Web Pages. https://www.udemy.com/course/javascript-projects-dom/ Do you want to add interaction or dynamic content to your web pages, this is the course for you! JavaScript can bring your web pages to life – interact with the DOM.   Select page elements, make changes and update … Read more
  • Learn JavaScript DOM Event Listeners vs Event Handlers making web page element interactive
    Learn JavaScript DOM Event Listeners vs Event Handlers making web page element interactive Explore more about how to use JavaScript to connect to web page elements, create game and make your content come to life with interactive and dynamic web page. Learn JavaScript DOM for Beginners Interactive Web Pages. Learn JavaScript DOM for Beginners Interactive Web Pages. https://www.udemy.com/course/javascript-projects-dom/ Do you want to add interaction or dynamic content to your web pages, this is the course for you!
  • Event Object Parameters Learn JavaScript DOM use the event information within your code helpful code
    Event Object Parameters Learn JavaScript DOM use the event information within your code helpful code Explore more about how to use JavaScript to connect to web page elements, create game and make your content come to life with interactive and dynamic web page. Learn JavaScript DOM for Beginners Interactive Web Pages. Learn JavaScript DOM for Beginners Interactive Web Pages. https://www.udemy.com/course/javascript-projects-dom/ Do you want to add interaction or dynamic content to your web pages, this is the course for you!
  • Learn Click Events Element Interaction JavaScript DOM Lesson 5 coding examples
    Learn Click Events Element Interaction JavaScript DOM Lesson 5 coding examples Explore more about how to use JavaScript to connect to web page elements, create game and make your content come to life with interactive and dynamic web page. Learn JavaScript DOM for Beginners Interactive Web Pages. Learn JavaScript DOM for Beginners Interactive Web Pages. https://www.udemy.com/course/javascript-projects-dom/ Do you want to add interaction or dynamic content to your web pages, this is the course for you!
  • Learn JavaScript DOM How to apply Element Style to page elements with JavaScript code
    Learn JavaScript DOM How to apply Element Style to page elements with JavaScript code Explore more about how to use JavaScript to connect to web page elements, create game and make your content come to life with interactive and dynamic web page. Learn JavaScript DOM for Beginners Interactive Web Pages. Learn JavaScript DOM for Beginners Interactive Web Pages. https://www.udemy.com/course/javascript-projects-dom/ Do you want to add interaction or dynamic content to your web pages, this is the course for you!
  • JavaScript DOM Adding and Removing Elements from web page with code examples
    Explore more about how to use JavaScript to connect to web page elements, create game and make your content come to life with interactive and dynamic web page. Learn JavaScript DOM for Beginners Interactive Web Pages. Learn JavaScript DOM for Beginners Interactive Web Pages. https://www.udemy.com/course/javascript-projects-dom/ Do you want to add interaction or dynamic content to your web pages, this is the course for you!
  • Coding Challenge Learn JavaScript DOM Lesson 3 Element Selection exercise how to select page element
    Explore more about how to use JavaScript to connect to web page elements, create game and make your content come to life with interactive and dynamic web page. Learn JavaScript DOM for Beginners Interactive Web Pages. Learn JavaScript DOM for Beginners Interactive Web Pages. https://www.udemy.com/course/javascript-projects-dom/ Do you want to add interaction or dynamic content to your web pages, this is the course for you!
  • Page Element Selection with JavaScript code Learn JavaScript DOM Lesson 2
    Explore more about how to use JavaScript to connect to web page elements, create game and make your content come to life with interactive and dynamic web page. Learn JavaScript DOM for Beginners Interactive Web Pages. Learn JavaScript DOM for Beginners Interactive Web Pages. https://www.udemy.com/course/javascript-projects-dom/ Do you want to add interaction or dynamic content to your web pages, this is the course for you!
  • Learn JavaScript DOM Lesson 1 Document Object and How to Setup coding environment
    Explore more about how to use JavaScript to connect to web page elements, create game and make your content come to life with interactive and dynamic web page. Learn JavaScript DOM for Beginners Interactive Web Pages. Learn JavaScript DOM for Beginners Interactive Web Pages. https://www.udemy.com/course/javascript-projects-dom/ Do you want to add interaction or dynamic content to your web pages, this is the course for you!
  • PDF Source Code Guide Core HTML How to get online quickly HTML to HTML5
    Learn HTML all the basic fundamental building blocks to create websites. Learn HTML from scratch. HTML5 CSS explained Learn to create HTML and HTML5 templates – which can be the base for infinite number of new web pages. We walk you through all the elements and tags used within HTML and help you understand where to apply them.  Whether you are a beginner or want to update your skills, this course is for YOU! We have you covered, learn with our proven instructional style, where we don’t waste your time typing on screen.  We get right to the point, showing … Read more

New Courses listed on Udemy

https://www.udemy.com/user/lars51/

RSS Error: A feed could not be found at `https://script.google.com/macros/s/AKfycbyjtoAzKl-JXdyOxFwB39xeRgrZOdJ7z4u5ugDaMmcNAtJMr4x-hYsMpZ0PasM0Hlpq/exec`; the status code is `200` and content-type is `text/plain; charset=utf-8`

Free Apps Script COURSE Google Apps Script Guide to the New IDE

Explore the new Google Apps Script IDE new features to rapidly developer Code for Google Services

https://www.udemy.com/course/google-apps-script-ide/?referralCode=29E962979605213861FB

Google Apps Script Complete Course – Beginner to Advanced

Massive 20+ Hour course to learn Google Apps Script

21.5 + Hours NEW Google Apps Script IDE

Google Apps Script Complete Course New IDE 100+ Examples

Google Apps Script New Version 2020 Create custom functions within G Suite Docs Sheets GMail Drive Calendar and more

https://www.udemy.com/course/course-apps-script/?referralCode=402FA7310931DB9AF4D5

Google Apps Script 2020 Build 28+ Fun Projects Sites GSuite

Explore projects you can build using Google Apps Script.

“Explore the amazing things you can build using Google Apps Script.”

Google Apps Script is a rapid application development platform that makes it fast and easy to create business applications that integrate with G Suite. You write code in modern JavaScript and have access to built-in libraries for G Suite applications like Gmail, Calendar, Drive, and more.