Frontend Web developer Modern HTML CSS JavaScript

tables
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
The different data types of JavaScript and how JavaScript can set the data type.
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
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
Who this course is for:
Beginner to web design
Anyone who wants to learn more about coding
Anyone curious to learn HTML CSS and JavaScript
Anyone who wants to create websites

More Info