2024 - Introduction to Modern Responsive Web Development.

Name: 2024 - Introduction to Modern Responsive Web Development.
Rating: 4.1 (23 reviews)

Introduction to Modern Responsive Web Development: HTML, CSS and JavaScript

Created byIvan Zi, Aliaksei

Last updated 3/2024

English

What you'll learn

Become a modern and confident HTML and CSS developer, no prior knowledge needed!
Modern, semantic and accessible HTML5
Important CSS concepts such as the box model, positioning schemes, inheritance, solving selector conflicts, etc.
Modern CSS (previous CSS3), including flexbox and CSS Grid for layout
Javascript

Course content

3 sections • 44 lectures • 40m total length

Introduction0:33
Learn the basics of responsive web development using HTML, CSS, and JavaScript, and turn your design from imagination into browser-ready pages.
Html: Table Of Contents1:36
Explore the fundamentals of HTML content and structure, including tags, attributes, headings, paragraphs, images, links, and tables, plus forms and input elements for user data in Codepen environments.
What is HTML and why use it?0:24
Understand HTML as a markup language and how it defines page elements like headings, paragraphs, images, and links, enabling you to create and modify web pages.
Working Environment - Codepen.io.2:32
Explore CodePen.io as an online code editor and learning environment for testing, tweaking, and sharing HTML, CSS, and JavaScript pens.
How to use HTML tags and attributes?0:19
Explore how to use HTML tags and attributes, and understand document components and the different types of HTML nodes, including text nodes and comments.
How to create headings, paragraphs and other?1:10
Use HTML to structure web pages with headings and paragraphs, applying the p element for paragraphs, indenting blocks, and organizing sections within the body tag for clear layouts.
How to create links (relative and absolute URLs) to other web pages or files?1:11
Create and understand hyperlinks using the a tag and href attribute. Differentiate absolute URLs, which include the domain name, from relative URLs within the same domain to navigate between pages.
How to insert images into web pages? Image attributes: src, alt, width ...0:05
Master inserting images into web pages by using src and alt attributes and setting width for responsive layouts.
How to create tables to display data in rows/columns?0:26
Learn how to create HTML tables to display data in rows and columns using table, tr, th, and td elements.
Create forms and collect user input. Form elements: inputs, select, other1:17
Explore how HTML forms collect user input with the form element and send data via action and method, including get and post.
How to use HTML5 semantic elements, such as header, footer, nav, article, sectio1:22
Learn to use HTML5 semantic elements such as header, footer, nav, section, article, and summary to clearly define meaning for browsers and developers, contrasting with nonsemantic div and span.
How to use audio elements?0:24
Learn how to embed audio content using the audio tag, include multiple source options, and rely on the browser to select the first supported source.
How to use video elements?0:34
Explore XHTML media elements and how the video tag embeds content in a document, using source tags for multiple video sources and letting the browser select the first supported source.

CSS: Table Of Contents2:16
Explore css fundamentals, how to write and link css files, selectors, and properties; master layout with box model, flexbox, grid, animation, media queries, variables, preprocessors, and frameworks.
What is CSS and why use it? Write and link CSS files0:44
Explore what CSS is and why to use it, including loading an external CSS file, styling h1 elements blue, and CSS as a stylesheet language for HTML.
How to select HTML elements by tag, class, id, attribute and other1:52
Learn to select HTML elements by tag, class, id, and attribute with CSS selectors, and apply properties such as display, background, border, padding, margin, font, grid, color, and media queries.
CSS Properties Paddings & Margins0:33
Explore css properties padding and margins to control space in web layouts. Margins create external spacing between elements and the screen edge, while padding defines internal spacing and background visibility.
How to use CSS layout techniques, such as display, position, float, and overflow0:58
Master CSS layout techniques such as display, position and float, understand background and border properties, and how static, relative, absolute, fixed, or sticky positioning shapes responsive layouts.
How to use CSS box model and flexbox to create flexible and responsive layouts?0:15
Master flexible, responsive layouts using the CSS flexbox layout model and box model concepts, avoiding floats and positioning to design a robust layout structure.
How to use CSS grid to create complex and grid-based layouts?0:25
Discover how CSS grid introduces a two dimensional grid system, enabling layouts for major page areas or small interface elements using horizontal and vertical lines to define columns and rows.
CSS animation. Add motion and interactivity: keyframes, transition, transform...0:50
Master CSS animations and transitions to add motion and interactivity, using the animation shorthand, keyframes, transform, and transition properties to create smooth effects.
How to use CSS media queries to adapt web pages to different screen sizes0:18
Explore how CSS media queries adapt web pages to different screen sizes by applying a block of CSS properties only when a condition is met.
CSS variables. var() function and custom properties, such as color, font-size0:39
Use CSS variables and the var() function to implement custom properties with local or global scope in the DOM, enabling color and font-size control via JavaScript and media queries.
How to use CSS preprocessors to extend the functionality and syntax of CSS?0:44
Explore how CSS preprocessors extend CSS with variables, nesting, inheritance, and features such as mixing and nesting selectors, improving readability and maintainability of stylesheets.

Javascript: Table Of Contents2:27
Explore the table of contents for JavaScript, from introduction to browser usage. Learn variables, data types, control flow, functions, arrays, objects, classes, promises, async/await, and http requests with error handling.
What is JavaScript and why use it?1:12
Explore JavaScript, a programming language and core technology of the web, used on the client side by 97.7% of websites, often with third-party libraries, and executed by browser engines.
How to use JavaScript syntax and conventions?1:02
Explore JavaScript syntax and naming conventions, and learn the rules for constructing programs. Understand the distinction between literals and variables, and how fixed values relate to variables.
How to declare and assign variables in JavaScript?1:02
Learn how to declare and assign variables in JavaScript, applying these basics to modern responsive web development.
How to use different data types, such as string, number, boolean, null, other1:02
Explore JavaScript data types, including string, number, boolean, null, and other data types, and learn how these values are stored and used in modern responsive web development.
How to use conditional statements, such as if, else, switch, and ternary3:02
Learn how to implement control flow in modern responsive web development using if, else, switch, and ternary operators to create dynamic layouts and behavior.
How to use loops: for, while, forEach?0:12
Learn how to use loops for, while, and foreach in modern responsive web development to manage repeated tasks efficiently.
How to use continue statements?0:05
Learn how to use continue statements to control flow in modern responsive web development, with practical examples.
How to define and invoke functions in JavaScript?0:19
Master the fundamentals of defining and invoking functions in JavaScript within modern responsive web development.
How to understand and use scope and closure?0:36
Explore how scope determines variable visibility and how closures capture and preserve data, enabling effective patterns in modern responsive web development.
How to create and manipulate arrays and objects in JavaScript? Push, pop, slice2:22
Learn to create and manipulate arrays and objects in JavaScript, using push, pop, and slice to manage data effectively.
How to use spread, and rest operators?0:36
Learn how to use spread and rest operators to simplify arrays and objects in modern responsive web development, enabling cleaner code and flexible data handling.
How to use classes and inheritance to create and reuse objects in JavaScript?0:19
Explore how to use classes and inheritance in JavaScript to create and reuse objects, enabling modern responsive web development.
How to use static methods and properties?0:19
Explore how to use static methods and properties in modern responsive web development, and understand their role in organizing code.
How to use promises and async/await to handle asynchronous operations...0:36
Explore how promises and async/await manage asynchronous operations in modern responsive web development for faster, more reliable user experiences.
HTTP requests - Get VS Post methods.0:19
Explore how http get and post methods work and when to use them in modern responsive web development.
Most popular ways to make an HTTP request in JavaScript: Ajax, jQuery methods...1:10
Explore the most popular techniques for making http requests in JavaScript, including Ajax and jQuery methods, to enable modern, responsive web development.
SetTimeout() Global Function0:52
Explore the setTimeout() global function within modern responsive web development, demonstrating how timing and asynchronous execution influence interactive web experiences.
SetInterval() Global Function0:52
Delve into the setInterval() global function as introduced in the 2024 course on modern responsive web development.
Errors Will Happen! Throw, and Try...Catch... and Finally statements.0:18
Explore error handling in modern responsive web development using throw, try, catch, and finally statements.

Requirements

No programming experience needed. You will learn everything you need to know

Description

Introduction to Responsive Web Development: HTML, CSS and JavaScript

Our course is designed to offer you a hands-on experience, guiding you on how to code web applications from scratch with the latest web technologies: HTML5, CSS3, and JavaScript.

This approach ensures that you understand each concept thoroughly and allows you to practice your newly acquired skills without relying on copy-pasting.

You do not need any previous knowledge of HTML, CSS, or JavaScript since we will take you through every syntax and explain each step in detail. Our course is suitable for beginners. Whether you're new to coding or looking to refresh your skills, our course is perfect for you!

We believe that learning should be enjoyable and engaging, which is why we've created an array of modern, super-cool, and captivating projects that you will develop throughout the course. Each project is created independently from scratch, and you can choose which ones to work on based on your interests.

Our course features separate videos for each technology, enabling you to learn and focus on the areas that interest you the most. For instance, if you're primarily interested in JavaScript, you can skip the HTML and CSS sections and dive right into the JavaScript videos.

Who this course is for:

Beginner front-end web developers

2024 - Introduction to Modern Responsive Web Development.

What you'll learn

Explore related topics

Course content

HTML (HyperText Markup Language)13 lectures • 12min

CSS (Cascading Style Sheets)11 lectures • 10min

JavaScript20 lectures • 19min

Requirements

Description

Who this course is for: