html+css+javascript

페이지 정보

profile_image
작성자불바다 조회 0회 작성일 2021-10-13 19:51:20 댓글 0

본문

HTML, CSS, and Javascript in 30 minutes

https://devdojo.com/ninja - Learn how to create your own Software as a Service in my Ninja Training Program.

Learn the basics of HTML, CSS, and Javascript in 30 minutes. I wanted to create this video so that way anyone who doesn't have much time in their schedule can learn the basics of HTML, CSS and Javascript. You will need to put these skills to practice, but this is a good video to get you started on your path to learning web design.

I've also released a course called SAAS Adventure that will teach you how to create your own Software as a Service. Be sure to check out that course at https://saasadventure.io.

If you want to learn more about HTML, CSS, and Javascript be sure to visit https://w3schools.com.

Thanks for watching and I hope to see you soon in a future video.
Lucas silva : i did a front end course back in 2019 and this was really helpful for recalling all the shit that i'd forgotten
Matt Harrison lml : In 30 minutes I have learned a complete class of html, css and JavaScript this is awesome! The next step is to find what i need on the w3school page, thank you very much!
prince davenshi : I started to learn web developing three weeks ago and this video is the boost I needed
L : Best explanation of these languages i've seen on this entire website
Igor Mladenov : Thank you very much for your tutorial. I am preparing for a Front-end MERN Stack development course but I have to pass a test first. I am new in this field and I was looking for a clear and quick tutorial about HTML, CSS and JavaScript. Your course was the best and the most clear simple explanation I found. Thank you very much for your effort of sharing this with the world. May God bless you abundantly. Greetings from Macedonia.

HTML CSS Javascript Website Tutorial - Responsive Beginner JS Project with Smooth Scroll

Learn how to build a website using HTML, CSS, and Javascript in this beginner tutorial. The site is fully responsive and has a smooth scroll effect that highlights the navbar menu based on your position scrolled. Easy beginner Javascript project that you can refactor and add your own design.

If you want to follow me along my coding journey, be sure to subscribe :)
https://www.youtube.com/channel/UCsKsymTY_4BYR-wytLjex7A?sub_confirmation=1

Timeline:
0:00 What we are building
3:30 Open up VSCode
4:03 Editing our index.html file
4:42 Creating our Navbar
11:34 Styling our Navbar
35:04 Toggle Mobile Menu with Javascript
40:40 Creating Hero Section
42:40 Styling the Hero Section
50:25 Creating About Section
53:02 Styling About Section
1:14:26 Creating Services Section
1:26:38 Creating Sign up Section
1:29:35 Creating Footer Section
1:37:14 Styling Footer Section
1:46:18 Adding Javascript Smooth Scroll

Source Code
https://github.com/briancodex/html-css-js-website-smooth-scroll

Other HTML, CSS, Javascript Website Tutorial


Top 10 VS Code Themes


Host your website for Free

Brian Design : Get the source code here:
https://www.codavilla.com/posts/html-css-and-javascript-website-with-smooth-scroll
Agustina Casarone : Omg this is great!!! I can't believe you just made me do such a beautiful thing n-n THANK YOU A LOT!!!!!!!!!!!!
Zain Raza : Thank you so much for this great tutorial. I had finished python and wanted to get into JavaScript. This tutorial helped a lot, and I will surely watch more!
Alexandra Faller : To be honest I thought this was a great video. I liked how things were explained in enough depth to know what’s going on but not overly complicate it. I dislike videos that show “how to do such and such” and literally whizz through without explaining much, just telling you what to type and where. You don’t learn that way.
I only found the video because I needed to know how the scroll at the end was done (and already thinking how best to refactor the code for the else statements) but ended up watching more because the guy was actually good at explaining his methodology and I was interested to see how another dev would build a site like this.
To those who say it goes to fast..YouTube has the option to slow down the video!

Will go check out the other videos on the channel now and sub. Thank you!
Kopil Kaiser : Brian! You are a saver sent by God to me. Your this video helped me to complete my assignment. Thank you so much. I will keep you in my good prayers for helping me to finish my assignment. Hopefully, I am expecting first class by building my own website on your fundamental ideas from this video.

Apart from the assignment, there were many core fundamental ideas to learn from your video. CSS, HTML5 and JavaScript, all are clearer to me.

Learn HTML5 and CSS3 From Scratch - Full Course

HTML and CSS are essential skills to have for a career in web development.

In this course we will cover both languages from the scratch and by the end of the course you will be creating your own projects.

(0:00) Intro
(2:47) What is HTML
(5:11) Google Chrome and Visual Studio Code
(6:02) Download Google Chrome
(8:11) Download Visual Studio Code
(13:58) Create A Project
(16:09) First Webpage
(20:35) Visual Code Settings
(22:48) Download Live Server Extension
(26:59) Basic HTML Document Structure
(29:05) Implementing Basic Document Structure
(34:50) Word Wrap and Emmet
(40:24) Heading Elements
(44:33) Paragraph Elements
(47:50) White Space Collapsing
(49:22) Lorem Ipsum Dummy Text
(51:17) Images
(57:15) Multiple Path Options
(1:00:06) External Images
(1:02:43) Nice Images
(1:05:49) Width and Height Attribute
(1:08:40) Crop Images
(1:12:07) Proper Path
(01:15:37) Comments And Line Breaks
(01:19:47) External Links
(01:23:32) Internal Links
(01:25:53) Links Within Page
(01:30:10) Empty Links
(01:32:39) Sup And Sub Elements
(01:34:39) Strong And Em Elements
(01:37:02) Special Characters In Html
(01:38:58) Unordered Lists
(01:41:25) Ordered Lists
(01:42:18) Nested Lists
(01:43:57) Table Element
(01:46:10) Forms - Input And Submit Elements
(01:58:12) Forms - Textarea - Radio - Checkbox
(02:09:40) Prettier And Code Formatter
(02:14:56) Keyboard Shortcuts
(02:26:06) External Resources - Head Element
(02:30:15) Html Project Intro
(02:32:16) Project Setup
(02:35:17) Download Images
(02:39:02) Logo, Heading, Navigation
(02:42:51) Home Page Completed
(02:54:30) About Page
(02:58:09) Numbers Page
(03:04:14) Contact Page
(03:09:11) Resource Files
(03:09:42) Text Editor Setup
(03:16:03) Css Intro
(03:17:35) Workspace Setup
(03:20:22) Inline Css
(03:23:40) Course Resources
(03:25:01) Internal Css
(03:28:00) External Css
(03:39:40) Power Struggle
(03:44:17) Basic Css Syntax
(03:52:27) Element Selectors
(03:55:15) Grouping Selectors
(03:57:27) Id Selectors
(04:02:09) Class Selectors
(04:06:17) Id And Class Selector Summary
(04:08:30) Div And Span Elements
(04:16:44) CSS Inheritance
(04:20:08) More Info On Inheritance
(04:22:30) Last Rule, Specificity, Universal Selector
(04:27:33) Colors Intro
(04:28:13) Color And Background-Color Properties
(04:32:33) Color Names
(04:33:30) Rgb
(04:37:46) Rgba
(04:44:33) Hex
(04:50:58) Vs-Code Color Options
(04:52:57) External Resources
(04:55:39) Units Intro
(04:56:18) Pixels, Font-Size, Width, Height
(05:02:13) Percent Values
(05:05:44) Em Values
(05:11:42) Rem Values
(05:14:41) VH And VW
(05:19:14) Default Browser Syles
(05:29:07) Calc Function
(05:33:38) Typography Intro
(05:34:07) Font-Family
(05:36:47) Font-Stack Generic Fonts
(05:39:23) Google Fonts
(05:46:00) Font-Weight Font-Style
(05:53:30) Text-Align And Text-Indent
(05:56:52) More Text Properties
(06:04:31) Box-Model Intro
(06:04:53) Padding
(06:13:28) Margin
(06:19:01) Border
(06:23:57) Border-Radius, Negative Margin
(06:27:24) Outline Property
(06:34:58) Display Property Intro
(06:35:19) Display Property
(06:43:26) Basic Horizontal Centering
(06:48:11) Mobile Navbar Example
(06:58:29) Box-Sizing Border-Box
(07:06:46) Display Inline-Block
(07:09:29) Display:none, Opacity, Visibility
(07:16:20) Background-Image Intro
(07:16:43) Background Images Setup
(07:19:43) Background-Image-Property
(07:27:45) Background-Repeat
(07:34:07) Background-Size
(07:36:58) Background-Position
(07:41:18) Background-Attachment
(07:47:04) Linear-Gradients
(07:56:49) Background Image Shortcuts Combined
(08:06:56) Linear-Gradient Colorzilla
(08:11:08) Float Position Intro
(08:11:47) Float Property
(08:19:18) Float Property Column Layout Example
(08:25:59) Position Static
(08:30:44) Position Relative
(08:33:18) Position Absolute
(08:38:42) Position Fixed
(08:42:30) Media Quries
(08:57:07) Z-Index
(09:06:04) ::Before And ::After Pseudo Elements
(09:27:14) Css Selectors Intro
(09:28:26) Basic Selectors
(09:31:07) Descendant Child Selectors
(09:35:50) First Line And First Letter
(09:36:56) :Hover Pseudo-Class Selector
(09:40:03) Link Pseudo-Class Selectors
(09:44:36) Root Preudo-Class Selectors
(09:51:01) Transform,Transition,And Animations
(09:52:17) Transform:transition()
(09:58:52) Transform:scale()
(10:01:20) Transform:rotate()
(10:04:47) Transform:skew()
(10:06:31) Transition Property
(10:09:13) Multiple Transition
(10:11:11) Transition Delay
(10:16:36) Transition-Timing Function
(10:25:51) Animation
(10:35:51) Animation-Fill-Mode
(10:40:53) Last Module Intro
(10:41:32) Css Variables
(10:56:19) Font-Awesome Icons
(11:07:55) Text-Shadow Box-Shadow
(11:14:44) Browser Prefixes
(11:19:23) Semantic Tags
(11:24:11) Emmet Workflow

Course from John Smilga. Check out his channel: https://www.youtube.com/codingaddict

John's course on Udemy: https://www.udemy.com/in-depth-html-css-course-build-responsive-websites/?couponCode=ONLYTEN
Coding Addict : 1)What is HTML - 2:47
2)Google Chrome and Visual Studio Code - 5:11
3)Download Google Chrome - 6:02
4)Download Visual Studio Code - 8:11
5)Create A Project - 13:58
6)First Webpage - 16:09
7)Visual Code Settings - 20:35
8)Download Live Server Extension - 22:48
9)Basic HTML Document Structure - 26:59
10)Implementing Basic Document Structure - 29:05
11)Word Wrap and Emmet - 34:50
12)Heading Elements - 40:24
13) Paragraph Elements - 44:33
14)White Space Collapsing - 47:50
15)Lorem Ipsum Dummy Text - 49:22
16)Images - 51:17
17)Multiple Path Options - 57:15
18)External Images - 1:00:06
19)Nice Images - 1:02:43
20)Width and Height Attribute - 1:05:49
21)Crop Images - 1:08:40
22)Proper Path-1:12:07
23) Comments And Line Breaks - 01:15:37
24) External Links - 01:19:47
25) Internal Links - 01:23:32
26) Links Within Page - 01:25:53
27) Empty Links - 01:30:10
28) Sup And Sub Elements - 01:32:39
29) Strong And Em Elements - 01:34:39
30) Special Characters In Html - 01:37:02
31) Unordered Lists - 01:38:58
32) Ordered Lists - 01:41:25
33) Nested Lists - 01:42:18
34) Table Element - 01:43:57
35) Forms - Input And Submit Elements - 01:46:10
36) Forms - Textarea - Radio - Checkbox - 01:58:12
37) Prettier And Code Formatter - 02:09:40
38) Keyboard Shortcuts - 02:14:56
39) External Resources - Head Element - 02:26:06
40) Html Project Intro - 02:30:15
41) Project Setup - 02:32:16
42) Download Images - 02:35:17
43) Logo, Heading, Navigation - 02:39:02
44) Home Page Completed - 02:42:51
45) About Page - 02:54:30
46) Numbers Page - 02:58:09
47) Contact Page - 03:04:14
48) Resource Files - 03:09:11
49) Text Editor Setup - 03:09:42
50) Css Intro - 03:16:03
51) Workspace Setup - 03:17:35
52) Inline Css - 03:20:22
53) Course Resources - 03:23:40
54) Internal Css - 03:25:01
55) External Css - 03:28:00
56) Power Struggle - 03:39:40
57) Basic Css Syntax - 03:44:17
58) Element Selectors - 03:52:27
59) Grouping Selectors - 03:55:15
60) Id Selectors - 03:57:27
61) Class Selectors - 04:02:09
62) Id And Class Selector Summary - 04:06:17
63) Div And Span Elements - 04:08:30
64) CSS Inheritance - 04:16:44
65) More Info On Inheritance - 04:20:08
66) Last Rule, Specificity, Universal Selector - 04:22:30
67) Colors Intro - 04:27:33
68) Color And Background-Color Properties - 04:28:13
69) Color Names - 04:32:33
70) Rgb - 04:33:30
71) Rgba - 04:37:46
72) Hex - 04:44:33
73) Vs-Code Color Options - 04:50:58
74) External Resources - 04:52:57
75) Units Intro - 04:55:39
76) Pixels, Font-Size, Width, Height - 04:56:18
77) Percent Values - 05:02:13
78) Em Values - 05:05:44
79) Rem Values - 05:11:42
80) VH And VW - 05:14:41
81) Default Browser Syles - 05:19:14
82) Calc Function - 05:29:07
83) Typography Intro - 05:33:38
84) Font-Family - 05:34:07
85) Font-Stack Generic Fonts - 05:36:47
86) Google Fonts - 05:39:23
87) Font-Weight Font-Style - 05:46:00
88) Text-Align And Text-Indent - 05:53:30
89) More Text Properties - 05:56:52
90) Box-Model Intro - 06:04:31
91) Padding - 06:04:53
92) Margin - 06:13:28
93) Border - 06:19:01
94) Border-Radius, Negative Margin - 06:23:57
95) Outline Property - 06:27:24
96) Display Property Intro - 06:34:58
97) Display Property - 06:35:19
98) Basic Horizontal Centering - 06:43:26
99) Mobile Navbar Example - 06:48:11
100) Box-Sizing Border-Box - 06:58:29
101) Display Inline-Block - 07:06:46
102) Display:none, Opacity, Visibility - 07:09:29
103) Background-Image Intro - 07:16:20
104) Background Images Setup - 07:16:43
105) Background-Image-Property - 07:19:43
106) Background-Repeat - 07:27:45
107) Background-Size - 07:34:07
108) Background-Position - 07:36:58
109) Background-Attachment - 07:41:18
110) Linear-Gradients - 07:47:04
111) Background Image Shortcuts Combined - 07:56:49
112) Linear-Gradient Colorzilla - 08:06:56
113) Float Position Intro - 08:11:08
114) Float Property - 08:11:47
115) Float Property Column Layout Example - 08:19:18
116) Position Static - 08:25:59
117) Position Relative - 08:30:44
118) Position Absolute - 08:33:18
119) Position Fixed - 08:38:42
120) Media Quries - 08:42:30
121) Z-Index - 08:57:07
122) ::Before And ::After Pseudo Elements - 09:06:04
123) Css Selectors Intro - 09:27:14
124) Basic Selectors - 09:28:26
125) Descendant Child Selectors - 09:31:07
126) First Line And First Letter - 09:35:50
127) :Hover Pseudo-Class Selector - 09:36:56
128) Link Pseudo-Class Selectors - 09:40:03
129) :Root Preudo-Class Selectors - 09:44:36
130) Transform,Transition,And Animations - 09:51:01
131) Transform:transition() - 09:52:17
132) Transform:scale() - 09:58:52
133) Transform:rotate() - 10:01:20
134) Transform:skew() - 10:04:47
135) Transition Property - 10:06:31
136) Multiple Transition - 10:09:13
137) Transition Delay - 10:11:11
138) Transition-Timing Function - 10:16:36
139) Animation - 10:25:51
140) Animation-Fill-Mode - 10:35:51
141) Last Module Intro - 10:40:53
142) Css Variables - 10:41:32
143) Font-Awesome Icons - 10:56:19
144) Text-Shadow Box-Shadow - 11:07:55
145) Browser Prefixes - 11:14:44
146) Semantic Tags - 11:19:23
147) Emmet Workflow - 11:24:11
the litterate man : This is actual pain. Seriously. I'm trying really hard but then I get reminded that this video is 11 hours long.
Jai Bellare : Freecodecamp be like:
I'm about to start this man's whole career
Eisa Ahmed : I completed the course in 10 days
One day I will come back over here and realize that this was where I started up
Seth Huseby : I've watched multiple tutorials to get a good grip on the basics before I start Javascript and whatever follows. By far the best one so far, so clear and easy to follow. Solid content.

... 

#html+css+javascript

댓글목록

등록된 댓글이 없습니다.

전체 5,302건 1 페이지
게시물 검색
Copyright © www.eco-jiri.or.kr. All rights reserved.  Contact : help@oxmail.xyz