- 26
- 317 994
Code Range
India
เข้าร่วมเมื่อ 8 มิ.ย. 2020
Code Range is a Web Development Tutorial channel for Beginners started by Juthika Shetye, who is a trained teacher and a passionate web developer.
If you have ever wondered how websites actually work? How are they built? What skills are necessary to build a website? And wanted to take your first steps into the world of coding, then you have come to the right place!
On Code range, you will learn all the basic concepts and foundations of building a website from scratch.
The topics in the videos are explained in a very easy to understand way, include lots of coding activities and are suitable for anyone who can operate a computer; be it a school student or even any person from a non-tech field.
Some of the topics that will be covered here are:
-HTML5
- CSS3
- Bootstrap
-JavaScript and some more.
Hope you all will enjoy the tutorials and learn something new. Happy Coding!
If you have ever wondered how websites actually work? How are they built? What skills are necessary to build a website? And wanted to take your first steps into the world of coding, then you have come to the right place!
On Code range, you will learn all the basic concepts and foundations of building a website from scratch.
The topics in the videos are explained in a very easy to understand way, include lots of coding activities and are suitable for anyone who can operate a computer; be it a school student or even any person from a non-tech field.
Some of the topics that will be covered here are:
-HTML5
- CSS3
- Bootstrap
-JavaScript and some more.
Hope you all will enjoy the tutorials and learn something new. Happy Coding!
Styling text using CSS @font-face rule | How to use custom fonts on a webpage | Web Development
In this second part of 'Styling Text' series, we talk about using the @font-face CSS rule to add your favorite fonts or custom fonts to display text on your webpages.
With the @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore.
Do check out the recommended videos and interesting links below.
- - - - Contents Of The Video - - - -
00:00 - Introduction to @font-face CSS rule
01:27 - Syntax and rules of writing @font-face rule
03:20 - Relative file paths
04:47 - Cross browser compatibility for font file formats
05:08 - Listing multiple font files
05:15 - Using font from @font-face on the webpage
05:54 - Download free fonts
06:15 - Recommended resource CSS Tricks
06:28 - Upcoming video and conclusion
- - - - Recommended Videos - - - -
1. Introduction to CSS:
th-cam.com/video/WuppPid9H1E/w-d-xo.html
2. CSS Colors:
th-cam.com/video/SZzqlnsohK4/w-d-xo.html
3. CSS font-family:
th-cam.com/video/KxM0hueFnNM/w-d-xo.html
4. Learn HTML:
th-cam.com/play/PL0pI48bNGOh3Lm3TnTf85-heThQGHjQbJ.html
- - - - Interesting Links - - - -
1. Using @font-face by CSS Tricks:
css-tricks.com/snippets/css/using-font-face/
2. W3Schools @font-face:
www.w3schools.com/cssref/css3_pr_font-face_rule.asp
3. MDN Web Docs @font-face:
developer.mozilla.org/en-US/docs/Web/CSS/@font-face
With the @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore.
Do check out the recommended videos and interesting links below.
- - - - Contents Of The Video - - - -
00:00 - Introduction to @font-face CSS rule
01:27 - Syntax and rules of writing @font-face rule
03:20 - Relative file paths
04:47 - Cross browser compatibility for font file formats
05:08 - Listing multiple font files
05:15 - Using font from @font-face on the webpage
05:54 - Download free fonts
06:15 - Recommended resource CSS Tricks
06:28 - Upcoming video and conclusion
- - - - Recommended Videos - - - -
1. Introduction to CSS:
th-cam.com/video/WuppPid9H1E/w-d-xo.html
2. CSS Colors:
th-cam.com/video/SZzqlnsohK4/w-d-xo.html
3. CSS font-family:
th-cam.com/video/KxM0hueFnNM/w-d-xo.html
4. Learn HTML:
th-cam.com/play/PL0pI48bNGOh3Lm3TnTf85-heThQGHjQbJ.html
- - - - Interesting Links - - - -
1. Using @font-face by CSS Tricks:
css-tricks.com/snippets/css/using-font-face/
2. W3Schools @font-face:
www.w3schools.com/cssref/css3_pr_font-face_rule.asp
3. MDN Web Docs @font-face:
developer.mozilla.org/en-US/docs/Web/CSS/@font-face
มุมมอง: 1 012
วีดีโอ
Styling text using CSS font-family | Web-safe fonts | serif, sans-serif, monospace, cursive, fantasy
มุมมอง 1.8K3 ปีที่แล้ว
In this part of the 'Styling Text' series of videos, we will look at setting a different font for the text on your web page, using the CSS font-family property - this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. We also learn about the five generic font-family names in CSS like serif, sans-serif, monospace, cursive & fantasy that are used as...
CSS Colors | Color names, Hexadecimal, RGB, RGBA, HSL, HSLA values | CSS Color Conventions
มุมมอง 1.9K3 ปีที่แล้ว
CSS colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. In this tutorial, learn all about using these different color values with the color & background-color property in CSS to change the colors of HTML elements on a webpage. Each of the above color values are explained in detail with examples and some tips and tricks to make styling of your webpage easier. ...
Introduction to CSS | What is CSS? | How to add CSS? | Web Development for Beginners
มุมมอง 1.3K3 ปีที่แล้ว
CSS or Cascading Style Sheets is the fundamental part of web design & development. It transforms your plain HTML file into a stylized web page. In this video learn about : 1. What is CSS? 2. History of CSS. 3. Syntax & rules of writing CSS. 4. Different ways of adding CSS to HTML like Inline CSS, Internal CSS & External CSS. 5. Advantages & Disadvantages of the different methods of adding CSS. ...
[HTML-Tutorial-21] Creating Good HTML Code | HTML Best Practices | Coding Conventions & Standards
มุมมอง 7K3 ปีที่แล้ว
A consistent, clean, and tidy HTML code makes it easier for others to read and understand your code. In this video, I discuss 15 guidelines to create a good HTML code. - - - - Contents Of The Video - - - - 00:00 - Introduction 01:04 - (Tip 1) Declare Doctype 01:15 - (Tip 2) Never Skip Title Element 01:41 - (Tip 3) Add lang & charset Attributes 02:15 - (Tip 4) Set Viewport 02:48 - (Tip 5) Lowerc...
[HTML-Tutorial-20] Advanced HTML Form | Input Types & Form Elements | Web Development for Beginners
มุมมอง 16K3 ปีที่แล้ว
Create an advanced HTML form by adding some dropdown lists, multiple choice options, date-pickers, search bar, color choice & much more to your basic form. Learn to use all the different inputs types like: radio, checkbox, password, date, time, datetime-local, month, week, number, tel, search, file, color, range. Also learn about all the other form elements like: select, textarea, datalist, opt...
[HTML-Tutorial-19] Basic Form | form, input, label, button elements | Web Development for Beginners
มุมมอง 97K3 ปีที่แล้ว
Create a basic sign up form using the HTML form elements like form, label, input & button. Also learn about using different input types like text, email & submit. Learn about getting client-side validation for free using the input types & the required attribute. Also learn how to create suggestions or placeholders inside your input boxes. And how to pre-populate your form fields with values. - ...
[HTML-Tutorial-18] Tables | table, th, td, tr, caption, colspan, rowspan | Web Development
มุมมอง 9K3 ปีที่แล้ว
How to use the HTML table element to display tabular data on your webpage. Learn all about creating table rows, columns, headings & captions for your table using the tr, td, th, thead, tbody, tfoot & caption elements. Also learn about using the rowspan & colspan attributes to make your table span multiple rows or columns according to the design of your table. - - - - Contents Of The Video - - -...
[HTML-Tutorial-17] video, audio & iframe Elements | Multimedia | Web Development For Beginners
มุมมอง 12K3 ปีที่แล้ว
How to add videos & music on your web page without using any plugins like Adobe Flash or other extra software? How to embed videos from another website into your website using iframes? Learn about using different audio & video file formats for cross-browser compatibility & make your content accessible to everyone. Learn about all this with the help of HTML5 audio, video & iframe elements. - - -...
[HTML-Tutorial-16] figure & figcaption elements | Give a caption to your content | Web Development
มุมมอง 5K3 ปีที่แล้ว
How to give a caption to your images & other content? Why & when to use the figure & figcaption elements? Learn about these very useful HTML elements in this video. - - - - Contents Of The Video - - - - 0:00 - Introduction & Recap 0:22 - Adding caption to images using HTML figure & figcaption elements 1:22 - Importance of figure element 2:00 - When to use the figure element? 3:16 - Recommended ...
[HTML-Tutorial-15] picture element | Responsive Images (Part -2) | Web Development for Beginners
มุมมอง 2.6K3 ปีที่แล้ว
How & when to use the picture & source elements? How to make the images on your web page responsive by displaying different images for different devices? What are the various attributes that go into the source tag? What is Art Direction problem? Learn about all this and much more for optimizing images on the web. - - - - Contents of the video - - - - 00:00 - Introduction & Recap 00:42 - Why do ...
[HTML-Tutorial-14] srcset & sizes Attributes | Responsive Images (Part -1) | Web Development
มุมมอง 11K4 ปีที่แล้ว
How to make images responsive for different devices using HTML? How to use the srcset & sizes attributes for improved web performance? Learn about pixel density, screen resolution, viewport width, the size of images and how to help the browser choose the best image for any device. - - - - Contents Of The Video - - - - 00:00 - Introduction & Recap 00:29 - Problem with One Image for all Devices 0...
[HTML-Tutorial-13] img Element | Images | Width & Height Attributes in img as per new HTML standards
มุมมอง 6K4 ปีที่แล้ว
How to include images on your web page? What are the attributes that go into the img tag? Learn about including width and height attributes in the img element as per the new HTML standards. Learn about the different types of links that go into the src attribute. Understand the importance of alt attribute and how to write it. Learn about optimizing image sizes for faster download speed & improve...
[HTML-Tutorial-12] nav Element | Navigation | Web Development for Beginners
มุมมอง 80K4 ปีที่แล้ว
When and how to use the html nav tag? Importance of nav element in creating a navigational section for your website. Examples of different types of navigational sections explained. 1. Navigation (Web Page): juthikashetye.github.io/Code-Range-Demos/navigation.html 2. Navigation (Code): github.com/juthikashetye/Code-Range-Demos/blob/master/navigation.html 3. Link to all Demos: juthikashetye.githu...
[HTML-Tutorial-11] Hyperlinks / Links in HTML | Web Development for Beginners
มุมมอง 3K4 ปีที่แล้ว
How to create HTML links, hyperlinks or anchor links? Learn about the three types of html links - Absolute, Relative and Internal. Learn how to transform images and other content into links. Also learn about targets and usability and accessibility of your links. 1. Hyperlinks (Web Page): juthikashetye.github.io/Code-Range-Demos/hyperlinks.html 2. Hyperlinks (Code): github.com/juthikashetye/Code...
[HTML-Tutorial-10] Lists | Web Development for Beginners
มุมมอง 1.2K4 ปีที่แล้ว
[HTML-Tutorial-10] Lists | Web Development for Beginners
[HTML-Tutorial-9] | Small, Mark, Del & Ins, Sup & Sub | Formatting Elements | Web Development
มุมมอง 9714 ปีที่แล้ว
[HTML-Tutorial-9] | Small, Mark, Del & Ins, Sup & Sub | Formatting Elements | Web Development
[HTML-Tutorial-8] | Bold & Italics | Formatting Elements | Web Development for Beginners
มุมมอง 1.6K4 ปีที่แล้ว
[HTML-Tutorial-8] | Bold & Italics | Formatting Elements | Web Development for Beginners
[HTML-Tutorial-7] | Heading, Paragraph, Line Break, Word Break, Horizontal Rule | Web Development
มุมมอง 19K4 ปีที่แล้ว
[HTML-Tutorial-7] | Heading, Paragraph, Line Break, Word Break, Horizontal Rule | Web Development
[HTML-Tutorial-6] | How to structure your web page & content? | Web Development for Beginners
มุมมอง 23K4 ปีที่แล้ว
[HTML-Tutorial-6] | How to structure your web page & content? | Web Development for Beginners
[HTML-Tutorial-5] Attributes, Semantic & Block-Inline Elements | Web Development for Beginners
มุมมอง 3.2K4 ปีที่แล้ว
[HTML-Tutorial-5] Attributes, Semantic & Block-Inline Elements | Web Development for Beginners
[HTML-Tutorial-4] DOM | Basic Structure of HTML | Validators | Web Development for Beginners
มุมมอง 2.5K4 ปีที่แล้ว
[HTML-Tutorial-4] DOM | Basic Structure of HTML | Validators | Web Development for Beginners
[HTML-Tutorial-3] Elements & Tags | Web development for beginners
มุมมอง 2.3K4 ปีที่แล้ว
[HTML-Tutorial-3] Elements & Tags | Web development for beginners
[HTML-Tutorial-2] Creating your First Web Page & about Text Editors | Web development for beginners
มุมมอง 1.9K4 ปีที่แล้ว
[HTML-Tutorial-2] Creating your First Web Page & about Text Editors | Web development for beginners
[HTML-Tutorial-1] Introduction to HTML & HTML5 | Web development for beginners
มุมมอง 4.5K4 ปีที่แล้ว
[HTML-Tutorial-1] Introduction to HTML & HTML5 | Web development for beginners
you are the best, i understood this smoothly
how did you seperate the nav element with a vertical line? it shows on the picture of the video before you click on it
be louder
Thank you so much Juthika, this was exactly the type of explanation I was looking for. Your are a brilliant teacher, I am a a newbie @ 66, 🙂 so looking forward to learning more, keeps the brain alive.
Thank you so much
Hello that was informative. Do you mind sharing some css of how you got the panda above your text?
Nice one. Very helpful. Thank you !
😎 Great put together video 👍 thank you very much!
Thanks a lot
Tq
RUBBISH VIDEO, Nothing been achieved after watching this video. Rubbish!
one of the best explanation with more content, thank you and requesting to come with more like thisl Subscribed, bell icon activated and furthur more liked 😊😊.
Thank you so much 😊
your channel is the best youtube channel for coding. thank you so much!
Thank you so much 😊
1:52 structure
Please continue journey
Very nice
Thank you for your nice tutorials. But c'mon girl, we can show different images in img srcset, just as we can in picture.
Yes you definitely can, there is nothing wrong in it and it will definitely work.
thank you!
Write an HTML program with a paragraph about 'INDEPENDENCE DAY' celebration in our school. Include line break. Give green colour background. Heading and title as 'INDEPENDENCE DAY'.Also add an HR thag to divide your web page.
Please, answer this question for me, @Code Range.
Kindly refer to my previous videos and the css ones too. I have explained how to use line breaks, hr tag and also about colours. Thank you for the comment and please continue supporting the channel.
thank you, good video !
Thank you for taking time to explain these details. I am taking a web development course and they did not explain these in details
U r fabulous
Transparent accent with charming presentation
A very horrible teacher...😢i barely understand a thing out of all what she's saying...
I can understand her accent fine, and also captions are on. Don't call her a horrible teacher, she explained it clearly and desearves no hate for free education.
Great. Thanks videos because it helps me understand navigation with the unordered list to implement completely website .
Thank you. Hope you like my other videos as well!
Hi, Ms,Juthika, If I use to many <div> tags than semantic tags , will that effect website ranking among competition?
Yes it will and that is one of the reasons why it is always a better idea to use semantic tags.
Your explanations are lucid. I was so irritated about html before watching your videos. But I am quite confident now
Glad you found it useful
This was a helpful review and I learned something. Thanks
thanks your tutorial is such helpful 👍
thank you so much!! i’m coming from 2023 and this is still wonderful and helpful! 🩷🩷
Thank you. Hope you like my other videos as well 😊
Thank you!🎉
Great Maam
I have tried to run this code on Notepad ++ its not working why??
Hi, not sure if you will read this. I discovered your channel today. Working through your HTML tutorials. ABSOLUTELY the best. Thank you very much. You are a great teacher. Thank you ..thank you..🙏🙏👍👍🙏🙏
Thank you for the kind words. Glad you found the videos useful 😊
@@CodeRange Hi Juthika. Done with your tutorials. Thank you. The contents are awesome and a great help. A bump in the road for me is HTML forms and srcset. Gonna start tonight building my own project according to what i have learned from you. Thank you. Will keep you posted. Best regards,,👍👍🙏🙏💯💯
Well explained…
nice work thanks
thank you
Not many explained this concept as well as u did. Thank you for making this.
Glad you found it helpful 😊
Pink colour font not showing properly. Please change it.
you have saved me with this video
Hii thanks for making such a useful video this is very useful for the beginners but plz make videos like plz type all the attributes and codes which is used to make the form plz make a full video on it. Thanks again for making useful video for beginners ❤❤
Thank you for the encouraging words. Do check out the HTML playlist on my channel where I have tried to cover almost all the frequently used attributes. Thank you 😊
Hi.. you forget to close the </figcaption> in poem example
Yes you are right. Great observation 👍🏼
Can I return a line
Di, understanding J2EE being difficult for me, how to learn it?
thank you very much po
Hi, Juthika! I love your videos, you are the best teacher out here💛. Thank you so much for taking the time to make these videos.
Thank you for the kind words 😊
Thanks for the explanation. So many skip the small details but you describe them so well! 😊
Very helpful
I subscribed So I hope you really keep making videos I like the way that you explain things too much deatiels☺️
Thank you for the kind words 😊
yessss, im super excited tooo!!!, thank you very much....