Course Content
  • 1. Introduction to HTML, CSS, JavaScript & How websites work? | Web Development Tutorials #1
    Free YouTube Video
  • 2. HTML Tutorial: Installing VS Code & Live Server | Web Development Tutorials #2
    Free YouTube Video
  • 3. HTML Tutorial: Basic Structure of a Website | Web Development Tutorials #3
    Free YouTube Video
  • 4. HTML Tutorial: Title, Script, Link & Meta Tags | Web Development Tutorials #4
    Free YouTube Video
  • 5. HTML Tutorial: Headings & Paragraphs | Web Development Tutorials #5
    Free YouTube Video
  • 6. HTML Tutorial: Img and Anchor tags | Web Development Tutorials #6
    Free YouTube Video
  • 7. HTML Tutorial: Lists and Tables | Web Development Tutorials #7
    Free YouTube Video
  • 8. HTML Tutorial: Forms & Input Tags | Web Development Tutorials #8
    Free YouTube Video
  • 9. HTML Tutorial: Inline & Block Elements | Web Development Tutorials #9
    Free YouTube Video
  • 10. HTML Tutorial: Ids & Classes in HTML | Web Development Tutorials #10
    Free YouTube Video
  • 11. HTML Tutorial: HTML Entities | Web Development Tutorials #11
    Free YouTube Video
  • 12. HTML Tutorial: Semantic Tags in HTML| Web Development Tutorials #12
    Free YouTube Video
  • 13. CSS Tutorial: Introduction to CSS | Web Development Tutorials #13
    Free YouTube Video
  • 14. CSS Tutorial: Inline, Internal & External CSS | Web Development Tutorials #14
    Free YouTube Video
  • 15. CSS Tutorial: Selectors in CSS | Web Development Tutorials #15
    Free YouTube Video
  • 16. CSS Tutorial: Using Chrome Developer Tools | Web Development Tutorials #16
    Free YouTube Video
  • 17. CSS Tutorial: Fonts In CSS | Web Development Tutorials #17
    Free YouTube Video
  • 18. CSS Tutorial: Colors In CSS | Web Development Tutorials #18
    Free YouTube Video
  • 19. CSS Tutorial: Borders and Backgrounds | Web Development Tutorials #19
    Free YouTube Video
  • 20. CSS Tutorial: CSS Box Model, Margin and Padding | Web Development Tutorials #20
    Free YouTube Video
  • 21. CSS Tutorial: Float & Clear Explained | Web Development Tutorials #21
    Free YouTube Video
  • 22. CSS Tutorial: Styling Links & Buttons | Web Development Tutorials #22
    Free YouTube Video
  • 23. CSS Tutorial: Creating a Navigation Menu | Web Development Tutorials #23
    Free YouTube Video
  • 24. CSS Tutorial: CSS Display Property | Web Development Tutorials #24
    Free YouTube Video
  • 25. CSS Tutorial: Position absolute, relative, fixed and sticky in CSS | Web Development Tutorials #25
    Free YouTube Video
  • 26. Project 1: Creating a Gym Website Using HTML5 & CSS3 | Web Development Tutorials #26
    Free YouTube Video
  • 27. CSS Tutorial: Visibility & z-index Explained | Web Development Tutorials #27
    Free YouTube Video
  • 28. CSS Flexbox Tutorial in Hindi | Web Development Tutorials #28
    Free YouTube Video
  • 29. CSS Tutorial: em, rem, vh and vw units + Responsive design Explained | Web Development Tutorials #29
    Free YouTube Video
  • 30. CSS Tutorial: Media Queries Explained | Web Development Tutorials #30
    Free YouTube Video
  • 31. CSS Tutorial: More on CSS Selectors | Web Development Tutorials #31
    Free YouTube Video
  • 32. CSS Tutorial: Attribute & nth child pseudo Selectors | Web Development Tutorials #32
    Free YouTube Video
  • 33. CSS Tutorial: Before and After Pseudo Selectors | Web Development Tutorials #33
    Free YouTube Video
  • 34. CSS Tutorial: Box Shadow and Text Shadow | Web Development Tutorials #34
    Free YouTube Video
  • 35. CSS Tutorial: Variables & Custom Properties | Web Development Tutorials #35
    Free YouTube Video
  • 36. CSS Tutorial: Creating Animations & Keyframes | Web Development Tutorials #36
    Free YouTube Video
  • 37. CSS Tutorial: Creating Transitions in CSS | Web Development Tutorials #37
    Free YouTube Video
  • 38. CSS Tutorial: Transform property in CSS | Web Development Tutorials #38
    Free YouTube Video
  • 39. Creating Fully Responsive Website Project Using HTML & CSS in Hindi | Web Development Tutorials #39
    Free YouTube Video
  • 40. CSS Grid: Introduction & Creating A Basic Grid | Web Development Tutorials #40
    Free YouTube Video
  • 41. CSS Grid: Creating Rows & Gaps in Grid | Web Development Tutorials #41
    Free YouTube Video
  • 42. CSS Grid: Spanning Multiple Rows and Columns in Grid | Web Development Tutorials #42
    Free YouTube Video
  • 43. CSS Grid: Autofit & MinMax | Web Development Tutorials #43
    Free YouTube Video
  • 44. CSS Grid: Creating Layouts Using Grid Template Area | Web Development Tutorials #44
    Free YouTube Video
  • 45. Using Media Queries with CSS Grid | Web Development Tutorials #45
    Free YouTube Video
  • 46. Introduction to JavaScript for Frontend & Backend | Web Development Tutorials #46
    Free YouTube Video
  • 47. Writing in-browser JavaScript and Developer Console | Web Development Tutorials #47
    Free YouTube Video
  • 48. Variables, Data Types and Operators in JavaScript | Web Development Tutorials #48
    Free YouTube Video
  • 49. Strings in JavaScript | Web Development Tutorials #49
    Free YouTube Video
  • 50. String Functions in JavaScript | Web Development Tutorials #50
    Free YouTube Video
  • 51. Scope, If-else Conditionals & Switch Case in JavaScript | Web Development Tutorials #51
    Free YouTube Video
  • 52. Arrays & Objects in JavaScript | Web Development Tutorials #52
    Free YouTube Video
  • 53. Functions in JavaScript | Web Development Tutorials #53
    Free YouTube Video
  • 54. JavaScript Tutorial: Interaction - Alert, Prompt, Confirm | Web Development Tutorials #54
    Free YouTube Video
  • 55. JavaScript Tutorial: for, while, forEach, Do While Loops | Web Development Tutorials #55
    Free YouTube Video
  • 56. JavaScript Tutorial: Navigation The DOM | Web Development Tutorials #56
    Free YouTube Video
  • 57. JavaScript Tutorial: Events & Listening to Events | Web Development Tutorials #57
    Free YouTube Video
  • 58. JavaScript Tutorial: setInterval & setTimeOut | Web Development Tutorials #58
    Free YouTube Video
  • 59. JavaScript Tutorial: Date & Time In JavaScript | Web Development Tutorials #59
    Free YouTube Video
  • 60. JavaScript Tutorial: Arrow Functions In JavaScript | Web Development Tutorials #60
    Free YouTube Video
  • 61. JavaScript Tutorial: Math Object In JavaScript | Web Development Tutorials #61
    Free YouTube Video
  • 62. JavaScript Tutorial: Working with JSON in JavaScript | Web Development Tutorials #62
    Free YouTube Video
  • 63. Backend Tutorial: Node.Js Introduction and Installation | Web Development Tutorials #63
    Free YouTube Video
  • 64. Backend Tutorial: Node.Js Modules with Examples | Web Development Tutorials #64
    Free YouTube Video
  • 65. Backend Tutorial: Blocking vs Non-Blocking execution | Web Development Tutorials #65
    Free YouTube Video
  • 66. Backend Tutorial: Blocking vs Non-Blocking execution | Web Development Tutorials #66
    Free YouTube Video
  • 67. Backend Tutorial: Creating a Custom Backend Using NodeJs | Web Development Tutorials #67
    Free YouTube Video
  • 68. Backend Tutorial: Creating Custom Modules in Node Using NodeJs | Web Development Tutorials #68
    Free YouTube Video
  • 69. Backend Tutorial: npm: The Node Package Manager Tutorial | Web Development Tutorials #69
    Free YouTube Video
  • 70. Backend Tutorial: Installing Express and Postman | Web Development Tutorials #70
    Free YouTube Video
  • 71. Backend Tutorial: Writing our first Express App | Web Development Tutorials #71
    Free YouTube Video
  • 72. Backend Tutorial: Static Files & Installing Pug template engine | Web Development Tutorials #72
    Free YouTube Video
  • 73. Backend Tutorial: Using raw HTML in Pug template engine | Web Development Tutorials #73
    Free YouTube Video
  • 74. Backend Tutorial: Finishing Off NodeJs Backend of our Gym Website | Web Development Tutorials #74
    Free YouTube Video
  • 75. Backend Tutorial: Dance Website Using Pure Pug + NodeJs | Web Development Tutorials #75
    Free YouTube Video
  • 76. Backend Tutorial: Designing Cards Using Pure Pug + NodeJs | Web Development Tutorials #76
    Free YouTube Video
  • 77. Backend Tutorial: Continuing Dance Website using Pug + NodeJs | Web Development Tutorials #77
    Free YouTube Video
  • 78. Backend Tutorial: Adding Sponsor Section using Pug + NodeJs | Web Development Tutorials #78
    Free YouTube Video
  • 79. Backend Tutorial: Adding a Contact Form using Pug + NodeJs | Web Development Tutorials #79
    Free YouTube Video
  • 80. MongoDb Tutorial: Introduction to MongoDb + Installation | Web Development Tutorials #80
    Free YouTube Video
  • 81. MongoDb Tutorial: Inserting data into the Mongo Database | Web Development Tutorials #81
    Free YouTube Video
  • 82. MongoDb Tutorial: Searching/Querying data from the Mongo Database | Web Development Tutorials #82
    Free YouTube Video
  • 83. MongoDb Tutorial: Deleting data from the Mongo Database | Web Development Tutorials #83
    Free YouTube Video
  • 84. MongoDb Tutorial: Updating data from the Mongo Database | Web Development Tutorials #84
    Free YouTube Video
  • 85. MongoDb Tutorial: MongoDb Compass & Installing Mongoose | Web Development Tutorials #85
    Free YouTube Video
  • 86. MongoDb Tutorial: Using Mongoose in NodeJs | Web Development Tutorials #86
    Free YouTube Video
  • 87. Plotting CoronaVirus Cases On World Map - Interactive Dashboard Using JavaScript & MapBox
    Free YouTube Video
  • 88. Backend Tutorial: Saving Data To The Database Using Pug + NodeJs | Web Development Tutorials #88
    Free YouTube Video
  • 89. Hosting Tutorial: Where to Host your Website? | Web Development Tutorials #89
    Free YouTube Video
  • 90. Hosting Tutorial: Creating Our First VPS | Web Development Tutorials #90
    Free YouTube Video
  • 91. Hosting Tutorial: Installing Putty + Basic Linux Commands | Web Development Tutorials #91
    Free YouTube Video
  • 92. Hosting Tutorial: Installing Apache2 Web Server on a VPS | Web Development Tutorials #92
    Free YouTube Video
  • 93. Hosting Tutorial: CoronaVirus Information Website With Hosting | Web Development Tutorials #93
    Free YouTube Video
  • 94. Hosting Tutorial: Using Filezilla & WinSCP to upload Files | Web Development Tutorials #94
    Free YouTube Video
  • 95. Hosting Tutorial: Linking Domain to the Web Hosting Server | Web Development Tutorials #95
    Free YouTube Video
  • 96. Hosting Tutorial: Host Multiple Websites On One Single Hosting Server | Web Development Tutorials#96
    Free YouTube Video
  • 97. Hosting Tutorial: Deploy NodeJs Apps in Production on Linux VPS | Web Development Tutorials#97
    Free YouTube Video
  • 98. Installing MongoDb & Hosting our Dance Website on Ubuntu VPS | Web Development Tutorials #98
    Free YouTube Video
  • 99. Get a Free https SSL Certificate For Your Domain on Ubuntu VPS | Web Development Tutorials #99
    Free YouTube Video
  • 100. Git Tutorial: How to Upload your Projects to Git & GitHub | Web Development Tutorials #100
    Free YouTube Video
  • 101. Transparent Login Form using HTML and CSS | Web Development Tutorials #101
    Free YouTube Video
  • 102. I Created a Realtime Chat Application Using NodeJs and SocketIO
    Free YouTube Video
  • 103. Create a Responsive Website Using HTML, CSS & JavaScript in Hindi
    Free YouTube Video

Introduction to HTML, CSS, JavaScript & How websites work? | Web Development Tutorials #1

I started this course as an attempt to teach you web development in a fun, easy way! The aim of this course is to teach you how to build a high-quality, responsive, and modern website using HTML, CSS, and JavaScript.

 

In this course, you will learn about all the technologies involved in web development. All the videos will be uploaded on my YouTube channel “CodeWithHarry” under the playlist section, which you can access from the video description on YouTube. This course is going to benefit all those students who do not know anything and are new to this field. You will get complete knowledge of HTML, CSS, and JavaScript. You will get full information from scratch about web development. Also, those who already have some knowledge can go through the course to learn even further as there are a lot of advanced websites that we will look into by the end of this course.

Now let us first understand what HTML, CSS, and Javascript are for? For every website to be designed, HTML (HyperText Markup Language) is a must. This is the skeleton of a website. Without it, no website can run. CSS (Cascading Style Sheets) adds beauty to that website and JavaScript adds the brain to allow the functioning of that website. Therefore, CSS and JavaScript add beauty and brain to a particular website respectively. 

Let us now take another example of a car. The HTML acts as the metallic body of a car and the CSS acts as the color and design of the car. Finally, the engine of a car is like the JavaScript on the website to add functionality. 

Normally, a client or a user sends a request to the webserver of the website, he wants to visit. The web server that has its own IP address stores all the files in the backend which can be written in PHP, Python, or Node.js. The web server sends a response to the client in the form of HTML, CSS, and JavaScript. 

 

Finally, to understand-

  • HTML is used as a standard language for any website design. It acts as a static skeleton to a web application. It’s a well-standardized system.
  • CSS is used to handle the presentation of the web page. It makes the website look attractive and beautiful.
  • JavaScript allows scripting on your website and makes it completely dynamic in nature. It provides front end scripting for your website and is a high-level dynamic interpreted programming language.

Now, HTML, CSS, and JavaScript have a lot of concepts in them which we will take over through the span of this course. Therefore, it cannot be learned all at once. If you are a beginner, learning HTML up to 80%, CSS up to 40-60%, and JavaScript up to 50-70% will be more than enough to start building websites. This is something nobody in the web development industry talks about and hence I thought to share this personal advice with all of you.  Please don't get me wrong when I say that. Once you have learned and understood the bare minimum to build a website you can come back to the course and start watching it once again for perfecting and sharpening the already learned concepts. Sometimes following this practice gets difficult, the good news is that once you start watching these videos and get your hands dirty with basic HTML, CSS, and JavaScript, the rest you will gradually learn based upon your practices and experiences with the help of projects I have designed as a part of this course. You need to learn all the concepts simultaneously and co-relate all the things by practicing them.

So this was the introductory part where we have learned the basic concepts of HTML, CSS, and JavaScript. By following the course, you will learn some advanced concepts and build your website. Therefore, go through the course and start your journey to become a better web developer.

You need to be logged in to post a comment!

Comments

gnamratamaharana2 Jun 9, 2021
Namrata Maharana from Bhubaneswar ,Odisha . Can you please send me the download link of notes .
pksidhart Jun 5, 2021
Live server is not working in vs code. Please give me solution soon.
kamaljit.saini77 May 29, 2021
sir plz snd me the download link of notes
anees May 26, 2021
Muhammad Anees from pakistan
jay8878 May 9, 2021
i cant get notes of this course can someone give me download link?

Resources

No resource files associated with this project

Course Announcements

Any Course related announcements will be posted here