New Course Modern Web Design Course learn HTML CSS and JavaScript

http://kckHelp support my latest course launch on KickStarter http://kck.st/3vMgsIJ Its going to be great – PDF guide plus over 5 hours of HD video to help students learn about Web Design

Based off the below PDF source code course guide

My name is Laurence Svekis I’m a professional course creator – having taught over 1 Million Students Globally both online and in person.

I often get asked by students about how to get started to create websites.   I wanted to launch an all new modern website design course which is fast paced and easy to get started with for students to start creating websites.  It will cover all the basics of HTML CSS and JavaScript with coding examples and links to top resources saving time.

Learn how to

How to create web pages with HTML and CSS
Create interactive web content with JavaScript
Basics of coding JavaScript
Bring your web pages to life with Code
Modern Responsive WebSites
Interactive and Dynamic Web Pages

Each section will include a PDF guide with source code and resources

Learn HTML – how to create an HTML file and structure your HTML code in a modern format ready to be styled. Lessons of this section cover how to get started with coding and creating web pages.

Setup your Editor and create HTML files

Debug your code

HTML tags for page structure

What makes up an HTML element

What are Self closing Tags

How to use Element Attributes

Linking pages together with Hyperlinks

Adding Images to your web page

Lists and Tables for readable content

Semantic Page elements

How to create a simple webpage

Go live with a Github page and your HTML site

Learning HTML covers the following code.

  • Editor and setup to write HTML – create an html file
  • Anatomy of an HTML element – opening tag, content, element, closing tag
  • 4 must add tags for HTML pages html, head, title, body
  • Comments in Code <!– –>
  • Create a basic template
  • Introduction to common HTML tags <h1><p><div><span>
  • Self closing tags <hr><br>
  • Tag attributes (id, style, class)
  • <a> anchor tag hyperlinks connecting pages
  • <img> add images- self closing tags
  • Lists <li> <ol> <ul>
  • tables <table><tr><td> <th>
  • HTML semantic elements <nav><header><section><article><aside><footer>

Learn CSS

What CSS is and how you can style your web pages with Cascading Style Sheets. HTML provides structure for your webpage, CSS allows you to style your page. Design the page with your style, setup page layouts, add colors, fonts, and more. Present your web pages as you want them to look, independent of the HTML you can make your web content look and style as you imagine it should.

Explore how to add CSS to your HTML page

How to add colors to page element backgrounds and text

What the box model is and how you can apply borders, margins, and padding to any page element.

Style the text, update the font and customize your text output.

Update you links, adding Pseudo classes to your page elements

How to apply display properties, position and floats to set up your page layout.

Really useful CSS properties explored

CSS combinators for selection of elements.

How to build a responsive webpage with CSS float, CSS grid and CSS flexbox.

Use CSS  Cascading Style Sheets common syntax covered in this section.

  • Google Chrome Dev Tools
  • Adding Styling to HTML tags style <style> link to CSS file
  • CSS rule CSS Syntax (Selector) (Declaration) {Property:value}
  • Element Selection by tag name, id, class
  • Comments in Code /* */
  • Colors – Color types named colors HEX RGB RGBA
  • Background – color – image – repeat – attachment – position – background shorthand
  • Box Model – Borders – Margins – Padding – Height and Width
  • Text – text-align text-decoration text-transform
  • Fonts – font-style Google Fonts
  • Link states – a:link a:visited a:hover a:active
  • Display Properties – inline – none – block
  • Position : static relative fixed absolute sticky
  • Float and clear left right and none
  • CSS combinators for selection – space child selector >
  • Pseudo-classes – :hover, :first-child, last-child, :nth-child(2)
  • Pseudo-Elements – ::first-line , ::first-letter, ::after
  • Web Design Floats – Responsive design
  • CSS Grid – display: grid; grid-template-areas:
  • CSS Flexbox – axis row and column

Learn JavaScript Basics

JavaScript code runs your browser as your html page loads. Adding JavaScript to your code can improve the user experience of the web page. Go from a static webpage to an interactive one with JavaScript. This section will cover the basics of getting started with JavaScript and the code syntax to write JavaScript code. JavaScript is a set of instructions you can add in your code to let the browser know what to do next.

Variables are at the heart of coding

The different data types of JavaScript and how JavaScript can set the data type.

The power of Objects and Arrays and how you can use them to store multiple values in one variable.

Operators to provide calculations within your code

Functions to run predefined blocks of code as needed.

Conditions for logic within your code

Loops to save time and iterate over blocks of code

Learn JavaScript to make your webpages more interactive.

  • JavaScript Introduction alert prompt
  • Variables Let and Const
  • Operators
  • Arrays and Objects
  • Data Types
  • Functions
  • Conditions
  • Loops Do While, For, While, for each

Learn JavaScript DOM

JavaScript and the DOM

Document Object Model (DOM) is a programming interface for HTML documents, that is the logical structure of a page and how the page content can be accessed and manipulated.  Bring your web pages to life with JavaScript and connect to the web page elements.  Create fully interactive content that responds to the user.  Create Dynamic web page content that can change without page refresh and present new elements and updated content to the user.  Improve your web users experience with JavaScript and the DOM.

What is the DOM Document Object Model

How to select elements from your webpage with JavaScript

Manipulate and change your page elements with JavaScript

How to set styling attributes for elements

Make them interactive with Event listeners

DOM events and Page events with JavaScript

How to create elements with code and add them to your webpage

Moving elements and animation of elements.

  • Element Selection
  • DOM tree
  • Multiple Elements selection
  • Element Manipulation
  • Adding event listeners
  • Input Values
  • Create Elements
  • Animation
  • Element Movement
  • Window events
  • Document Events
  • Keyboard Events
  • Tracking key presses

Related Posts

Leave a Reply

%d bloggers like this: