|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/modern-web-design/
课程评论:没有评论
课程名称:现代网页设计初学者:HTML、CSS、JavaScript,25个以上项目 课程概述:本课程旨在帮助学员启动网页设计师和前端开发者的职业生涯,通过学习HTML5、CSS3和JavaScript以及响应式设计,掌握现代网页设计的技能。学员将学习如何设计并创建适合移动设备、互动性强且现代的网页。课程内容涵盖前端网页设计所需的所有知识,从基础语法开始逐步教授。课程包含丰富的项目和挑战,帮助学员在实战中学习与应用。 课程特点: - 实际应用:实际编码和设计网页,学习如何在真实环境中创建网站。 - 项目驱动:包含25个编码挑战和实际项目,确保学员在动手实践中提高技能。 - 适合初学者:无需 prior coding 经验,适合零基础学习者及希望复习基础的人。 课程内容包括: 1. **HTML基础**:学习HTML5元素、页面结构、超链接、图像、表格和表单等基本知识,并通过编码挑战巩固学习。 2. **CSS基础**:理解CSS的基本用法,包括选择器、背景设置、盒模型、布局(浮动、Flexbox、Grid)等,掌握现代网页设计技巧。 3. **JavaScript基础**:学习JavaScript的基础,包括变量、数据类型、函数、对象和数组等,掌握如何为网页添加动态和交互功能。 授课教师拥有超过20年的网页开发经验,课程设计独特,通过挑战和实例演示,帮助学员逐步掌握网页设计与开发的核心技术。无论是想要进入网页设计领域的新手,还是希望提升技能的开发者,这门课程都是一个理想的选择。
Launch a career as a web designer and frontend web developer by learning HTML5, CSS3, JavaScript and responsive design. Discover how you can design and create websites that are mobile ready, fully interactive and modern design. This course covers everything you need to know about FRONT END web design.Create modern website designs + Float designs, CSS Grid Designs, Flexbox Designs+++ examples and source code.This is real world coding - designing website for the real world. Learn the syntax step by step training. With all the source code included.Loaded with projects and challenges to help you learn.Complete frontend web developer and web design course - loaded with examples and challenges to get you coding and creating your own websitesModern web design and development, REAL WORLD Coding - Taught by an instructor with over 20 years of web development experience - ready to help you learn more about web design! I've taught web design and web development to countless students worldwide. The design of the course is unique with many challenges in the lessons - then demonstrating how to create the code afterwards. Discover how you can create custom websites - right on your computer. Create amazing HTML pages, add some styling with CSS and then bring them to life making them dynamic and interactive with JavaScript. You can launch a new career, coding and creating web sites is easy to get started with. We cover all the tools and top resources to get you started quickly and easily. Learn web design perfect for beginners or as a refresher for anyone who wants to learn more about HTML CSS and JavaScriptProfessional websites with modern coding techniques - loaded with examples and source code so that you can try the code out and get a feel for what you can do with it. HTML and CSS - Loaded with Over 25 Coding Challenges to get you coding - try it for yourself.Get familiar with the basics - no prior coding experience required!!!!!Web Design with HTML CSS JavaScript How to create Web Pages web development build websites create WebSites from scratchExplore the core technologies of the web learn how you can get started with Web development. Learn to become a web Developer explore web development build websites explore HTML CSS JavaScript Coding for beginners to learn more about web design and web development. Learn HTML5 CSS3 and JavaScript. Modern coding is explained loaded with examples and sample code. Website development building blocks learn to code. Make it Responsive learn responsive web design with how to create a website responsive and more. Perfect course for html and css for beginners.Real world Coding with HTML CSS and JavaScriptHTML elements are the building blocks of HTML pages. HTML5 is the starting technology for anything online - perfect to get started as a web designer and web developer.Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser.Course Covers HTML for Beginners-HTML and HTML5 for modern website Design and Development.Learn about modern HTML elementsBasic of HTML elements and how they workDebugging HTML and Comments within codeCreate HyperLinks and Links to page content and other web pages anchor tagBold and Headings to make content stand out with HTMLCoding Challenge - Tags ExerciseCoding Challenge - Apply HTML tags create Page Structure - Mini Website Creation exercise.Adding MailTo to send emails with HTML linksImages within HTML adding img tag and source optionsCoding Challenge - Getting social linking to your social profiles coding exercise with HTML tags.How to create lists with HTML tags.Adding tables with HTML table tag element attribute options.Coding Challenge - Create an achieved old school website from scratch. Simple HTML website Challenge exercise.Semantic elements and blocks and spans with HTMLCoding Challenge - Resume upload Challenge - create your Resume and upload to the web.Explore how to create HTML forms form tags and form elements.Different text formatting options with HTML tagsUsing IFrames in HTML codeWhat are HTML Meta tags and what HTML meta tags should be used HTML Meta TagsHTML and Audio options Playing Sound Audio and Video TagsAdding Audio and Video to play within HTML tagsFind out more about CSS What is CSS and how it works. Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScriptAdvanced CSS Explore more with CSS3 Create webpages easily , How to Create CSS Linear GradientsHow to Create CSS Radial GradientsHow to create CSS 2D TransformsLearn about CSS 3D Transforms and how to apply CSS 3D TransformsHow to make animations with CSS - CSS AnimationsApply CSS3 rapid web design with CSS3 - CSS grid CSS Flexbox and modern website and webpage design and development with CSS apply Styling and moreCourse Covers CSS for Beginners-How to write CSS adding CSS to web pages and CSS SyntaxHow to comment CSS code ways to apply Comments CSSWhat are CSS selectors and how to use CSS selectors to get page elementsSetting colors different CSS Color Units ListedCoding Challenge CSS - CSS color Background ChallengeSetting CSS background properties and valuesHow to set Element Height and Width with CSSHow to Use Chrome DevToolsHow to add and create CSS BordersHow to apply Margin with CSS to elements on the web pageCSS Padding options - setting padding top bottom left and right for an element.What is the Box Model and how it works in CSS - Border - Padding - MarginExamples of Pseudo Classes CSS and what are CSS Pseudo ClassesWhat are Pseudo Elements CSS - how to write CSS code for Pseudo ElementsAdding Font Styles - selecting web fonts and updating font-family Fun Fonts CSSHow to add Google Fonts to your website using Google Fonts CSSHow to use the CSS Display Property setting valuesCoding Challenge - Make a Navigation bar turn your html list items into a NavBar - NavBar Maker ExerciseHow to set CSS Position - position property options for valuesHow to set CSS Float Elements CSSCoding Challenge - 3 Column Website Project using Floats create a website from HTML code apply styling to create a three column standard websiteCoding Challenge - Create a Website Image Gallery Website Using Floats - create website from scratchUpdate Mouse Cursor pointer with CSS - Mouse Cursor ChangesHow to Use CSS Advanced Selectors and more selection optionsCSS selector specificity how CSS selector specificity works.How to Create CSS Linear Gradients and How to Create CSS Radial GradientsHow to create CSS 2D Transforms and CSS 3D TransformsHow to make animations with CSS - CSS AnimationsWhat is CSS FlexBox Layout how to create a layout with FlexboxCoding Challenge - How to create a NavBar using Flexbox - Flex NavBar ChallengeHow to apply element Sizing with Flexbox.How to use Flexbox to size items on the page- Flex items SizeCoding Challenge - Flex Image Gallery Challenge - Create an image gallery web page using Flexbox applying CSS to position elementsIntroduction to the CSS Grid Layout - creating websites with Grid LayoutHow to use CSS Grid to make Rows and ColumnsWhat are Grid Items CSS Grid lessonSetting CSS Grid Area Names and moreCoding Challenge -creating websites using CSS Grid - setup and design web pages with examples of CSS Grid webpages.JavaScript for Web Design - Create interactive and dynamic web pages using JavaScript code.JavaScript lessons cover the fundamentals of using JavaScriptExplore how to add JavaScript to your HTML pageshow to add Comments JavaScriptOutput options document write and console log and alert methodsIntroduction to JavaScript Variables using let const and varDifferent Data type within JavaScriptCoding Challenge - Create User input with Prompt Code JavaScriptJavaScript template literals to create stringsCoding Challenge - JAVASCRIPT Code Challenge -Prompt ChallengeExplore JavaScript Type Conversion and Coercion.Coding Challenge - Get the data type Type Challenge using JavaScript CodeWhat are JavaScript Operators and how to use themWhat are JavaScript Assignment OperatorsJavaScript Comparison OperatorsJavaScript Truthy and Falsey explainedJavaScript if else and else if Conditional StatementsCoding Challenge - practice JavaScript code learn and explore the code with a challenge to codeJavaScript Ternary Operator Conditional (ternary) operatorJavaScript Logical Operators ExampleJavaScript Switch StatementCoding Challenge - Create a Simple Game Switch Friends Challenge with JavaScriptIntroduction to JavaScript FunctionsJavaScript Function Expression vs function declaration with examplesJavaScript Function Scope explainedExample of JavaScript Closures how to create a ClosureWhat is JavaScript Function Recursion with recursion examplesCoding Challenge - Explore how you can use JavaScript code to create a fun simple Game - Number Guesser ChallengeIIFE (Immediately Invoked Function Expression) JavaScript functionES6 JavaScript New Arrow Functions JavaScript.Explore JavaScript Objects create objects with JavaScriptCoding Challenge - Objects around Create a Car Object ChallengeIntroduction to JavaScript Arrays - create arrays to hold data with JavaScriptDo more with Arrays - using Array Methods JavaScriptHow to create JavaScript Loops - iteration with JavaScript codeArray contents loopsCreate random values using JavaScript MathJavaScript Date object - set and get date valuesWelcome to JavaScript DOM - Introduction to dynamic and interactive webpage contentSelect and Element JavaScript DOMHow to Select Web Page elements using JavaScript - Element SelectorsHow to use Element QuerySelectorAll JavaScript DOM element selection methodsDOM content updates - JavaScript Manipulation InnerContentHow to update Element Attributes - using JavaScript DOMElement Children and Traversing web page elements using JavaScriptElement Manipulation StylesHow to create Page Elements using JavaScript CodeCoding Challenge - Page Element Append Prepend Challenge using JavaScript CodeHow to Remove an Element from your webpage using JavaScript CodeCreating element clones - JavaScript code to duplicate page elementsJavaScript Web page interactions - Adding Event Listeners.JavaScript Element Events Bubble and Capture Event ListenersJavaScript Event Listeners for Keyboard Events also on elements keyboard eventsCoding Challenge - Dynamic Shopping List using JavaScript List Challenge EventsJavaScript String and Number methodsHow to get Random Item From Array - randomize array items select random valueCoding Challenge - how to create Random Page BackgroundLoad JavaScript once page is loaded DOMContentLoaded document readyCoding Challenge - Element Mover Challenge move webpage elements with JavaScriptJavaScript Date, LocalStorage, Prototypes, Fetch requestsThe Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions - in particular, the DOM interfaces for the internal subset and external subset have not yet been specified.