Basic HTML and HTML5 – Responsive Web Design

Basic HTML and HTML5 – Responsive Web Design


Hey there, my name is Chris. Welcome to How to Dev. If this is your first time here and you’re interested in learning them necessary skills to become a developer start right now by subscribing and clicking the bell so you don’t miss anything. In this video, we are going to start learning to code for free at freecodecamp.org. They have thousands of coding lessons to help you improve your skill and yes, all of this is 100% free, thanks to the thousands of campers who donate to their nonprofit. We’re going to start at the very beginning with the Responsive Web Design Certification. Today we’re gonna get started in the Basic HTML and HTML5 section. Now, before we jump into these coding challenges, I’m gonna start a timer. That way we know when it’s time to take a break. Alright, so let’s get into it. HTML, or HyperText Markup Language, is a markup language used to describe the structure of a web page. It uses a special syntax or notation to organize and give information about the page to the browser. Elements usually have opening and closing tags that surround and give meaning to content. For example, there are different tag options to place around text to show whether it is a heading a paragraph or a list. Now, here in this example, we can see a heading, a paragraph, and a list in HTML and we can see how the browser is going to interpret that information and show it to us. So we have our top level heading here. We have a paragraph of text here and then we have a numbered list here. The HyperText part of HTML comes from the early days of the web and its original use case. Pages usually contained static documents that contained references to other documents. These references contained hypertext links used by the browser to navigate to the reference document so the user could read the reference document without having to manually search for it. As web pages and web applications grow more complex, the W3 Consortium updates the HTML specification to ensure that a webpage can be shown reliably on any browser. The latest version of HTML is HTML5. This section introduces how to use HTML elements to give structure and meaning to your web content So let’s go ahead and go to the first lesson So here we are say hello to HTML elements Welcome to free code camps HTML coding challenges These will walk you through web development step by step First you’ll start by building a simple web page using HTML You can edit code in your code editor, which is embedded into this web page You see the code in your code editor that says hello This is an HTML element Most HTML elements have an opening tag and a closing tag Opening tags look like this we can see an Angle bracket with the tag h1, and then another angle bracket Closing tags look like this we can see there an angle bracket with a forward slash the tag h1 and another angle bracket So the difference between the opening and closing tags is the forward slash after the opening bracket of the closing tag Each challenge has tests. You can run at any time by clicking the run tests button When you pass all tests, you’ll be prompted to submit your solution and go to the next coding challenge To pass the test on this challenge change your h1 elements text to say hello world so over here in the editor, we’re just going to add world and Now we can see that updated over here. Hello world now, let’s run the tests and We’ve passed the test Let’s go ahead and submit and go on to the next challenge So here we have headline with the h2 element Over the next few lessons, we’ll build an html5 cat photo web app piece-by-piece The h2 element you will be adding in this step we’ll add a level two heading to the web page This element tells the browser about the structure of your website H1 elements are often used for main headings while h2 elements are generally used for subheadings There are also h3. H4 H5 and h6 elements to indicate different levels of subheadings add an h2 tag that says cat photo app to create a second HTML element Below your hello world h1 element So here in the built-in editor, we’re just going to go down to a new line we’re going to Create an opening tag for that h2 element and type in cat photo app We will then close that h2 element and run our tests Perfect we can go ahead and submit that and go to the next challenge Here we inform with the paragraph element P elements are the preferred element for paragraph text on websites P is short for paragraph You can create a paragraph element like this. We see the angle bracket the letter P and then another angle bracket for the opening tag and Then the closing tag angle bracket /p angle bracket again Create ap element below your h2 element and give it the text. Hello paragraph So over here in the editor, we’ll go down to line three Creates our opening paragraph element Type in hello paragraph Give that a closing tag and run our tests There we go, and we’ll submit that and go on to the next challenge Fill in the blank with placeholder text Web developers traditionally use lorem ipsum text as placeholder text The lorem ipsum text is randomly scraped from a famous passage by a Cicero of ancient Rome lorem ipsum text has been used as placeholder text by typesetters since the 16th century and this tradition continues on the web Well five centuries is long enough Since we’re building a cat photo app, let’s use something called kitty ipsum text Replace the text inside your P element with the first few words of this Kitty ipsum text So what I’m going to do is copy all of this text here in green And I’m going to paste it in between the paragraph tags and the editor so now we can see our Heading our h1 hello world our H2 heading cat photo app and now our paragraph with our kitty ipsum text What do we have here kitty ipsum dolor set the met shed everywhere shed everywhere stretching attack your ankles chase the red dot hairball run cat nip eat the grass sniff Sounds sounds deep Philosophical let’s run the tests. We’ve passed those tests. Let’s go to the next challenge So we have uncomment HTML Commenting is a way that you can leave comments for other developers within your code without affecting the resulting output That is displayed to the end-user Commenting is also a convenient way to make code inactive without having to delete it entirely Comments in HTML start with an angle bracket an exclamation point a couple of dashes and then Ends with a couple of dashes and another angle bracket kind of looks like an arrow to me so here we want to uncomment your h1 h2 and Paragraph elements so here in the editor. We’re going to delete The comment Run the tests and There we go We’ll go ahead and submit that and go on to the next challenge Comment about HTML Remember that in order to start a comment you need to use Angle bracket exclamation point – – and to end the comment you need to use dash dash angle bracket Here you’ll need to end the comment before your h2 element begins Comment out your h1 element and your P element, but not your h2 element So here in the editor we can see that currently all of the code is commented out and nothing is appearing in our browser So what I’m going to do is I’m going to copy The closing end of the comment and paste it underneath the h1 I’m going to copy the opening of the our our Comment and put it just after the h2 So now what we can see is that only The h2 element and its contents are being displayed here in the browser. So let’s run the test and see how we did Perfect, let’s go ahead and submit that and go to the next challenge Delete HTML elements Our phone doesn’t have much vertical space Let’s remove the unnecessary elements so we can start building our cat photo app Delete your h1 element so we can simplify our view So here in the editor just going to delete that. H1 element run the tests Submit that and go on to the next challenge Introduction to html5 elements Html5 introduces more descriptive HTML tags these include header footer nav video article section and others These tags make your HTML easier to read and also help with engine optimization seo and Accessibility the main Html5 tag helps search engines and other developers find the main content of your page There’s a note here many of the new html5 Tags and their benefits are covered in the applied accessibility section So what do we want to do we want to create a second key element after the existing P element with the following kitty Epsom text Jump eat the grass rip the couch scratched sunbathe shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched so again, I’m going to copy this Kitty up some text and In the editor. I’m going to go down and paste that and What I need to do as well as put in the opening and closing Paragraph tags. So now we have two paragraphs showing in our cat photo app we have our H2 heading showing there in our browser preview Let’s run the text almost Got one more instruction here wrapped the paragraphs with an opening and closing main tag So let’s jump back here in the editor. We’re gonna have our opening main tag and Then just after our last paragraph We will close that main tag Now let’s run the tests There we go, we’ll submit that and go to the next challenge Add images to your website You can add images to your website by using the image element and point to a specific images URL using the source at an example of this would be We can see the image tag opening here our source is equal to or is assigned to the URL of that image Note that image elements are self closing. So here we don’t see Forward slash we don’t see you know a bracket with a forward slash and image and a closing bracket None of that’s there all image elements must have an alt attribute The text inside the alt attribute is used for screen readers to improve accessibility And is displayed if the image fails to load? Note if the image is purely decorative using an empty alt attribute is a best practice Ideally the alt attribute should not contain special characters unless needed Let’s add an alt attribute to our image example above So here we have Again, the image the source the URL and now we have the alt being assigned author Standing on a beach with two thumbs up So let’s try to add an image to our web site Insert an image tag the for the h2 element Now set the source attribute so that it points to this URL Okay, so over here in the editor before our h2 element we’re going to add an Image tag we’re going to open that up We’re gonna make that source and we’re going to set that attribute to be This URL of a relaxing cat, so I’m going to copy that URL Paste it in here And we don’t want to forget our alt text so I’ll go oh and Looks like we have a relaxing Cat’s is what I’m going to use we’ll go ahead and put an angle bracket there to yourself close that image tag, and we can see in our Browser preview we have this little little kitten. So let’s run the tests Looks like we’re good. We’ll submit that and head to the next challenge Link to external pages with anchor elements You can use anchor elements to link to content outside of your webpage Anchor elements need a destination web address called an href attribute They also need anchor text Here’s an example So we can see our angle bracket the letter A for anchor We have H ref and that is being assigned that the URL for free code camp org We have some text for that link as well This links to free code camp dot org, and then the anchor tag we can see is not self closing So we have at the end there the closing tag with that forward slash Then your browser will display the text this links to free code camp org as a link that you can click and That link will take you to the web address for free code camp org So what we want to do is create an anchor element that links to Free cat photo app comm and has cat photos as its anchor text so let’s say up here in the Main tag I’m going to do this just on the Third line in the editor, so this will put our anchor tag above the cat photo Open that up. So we need our a for anchor we need H ref we’re going to assign that URL to The free cat photo app duck comm URL We need some text in there to say cat photos and Then close that anchor tag So now we can see we have a link that says cat photos just above our cat photo Let’s go ahead and run the tests Looks like we’re good. We’ll submit that and go on to the next challenge Link to internal sections of a page with anchor elements anchor elements can also be used to create internal links to jump to different sections within a webpage to Create an internal link you assign a links href attribute to a hash symbol Plus the value of the ID attribute for the element that you want to internally link to Usually something further down the page you then need to add the same ID attribute to the element you are linking to an ID is an attribute that uniquely describes an element below is an example of an internal anchor link and its target element so here we can see the anchor we have our href we have the hash symbol and then we have contacts header Then we can see that we have an h2 element with the ID contacts header so that’s the same as This href, so the same spelling the same Everything so when the user clicks the contacts link They’ll be taking to the section of the webpage with the contacts header element So what we’re gonna do change your external link to an internal link by changing the href attribute to footer and the text from cat photos to jump to bottom Remove the target equals Underscore blank attribute from the anchor tag since this causes the linked document to open in a new window tab Then add an ID attribute with the value of footer to the footer element at the bottom of the page alright, so we have our External link up here for the free cat photo app Dot-com we’re going to change that to Be footer So we’re just gonna type in here hash footer. We’re going to remove target equals blank change cat photos to be What is it one jump To Bottom Then we need to scroll down find our footer and add the ID Footer And that should allow us To jump to the bottom of the page Well, we need to close this Up here first There we go now we have jumped to the bottom we click it We can see it jumps to the bottom and we’ll go ahead and run the tests and There we go. We’ll submit that and go on to the next challenge Okay, so now nest an anchor element within a paragraph You can nest links within other elements and here we see an example of a paragraph here’s a Well, here’s an anchor tag and a link to free code camped org inside of that paragraph So let’s break down the example Normal text is wrapped in the P element So we have the opening P tag here’s a for you to follow all of that is our paragraph element Next is the anchor element which requires a closing tag We have target is an anchor tag attribute that specifies where to open the link and the value blank specifies to open the link in a new tab Looks like we are going to take a short break So I will see you in the next video

Related Posts

Project Amrit: Promoting Deceased Organ Donations

Project Amrit: Promoting Deceased Organ Donations

>>Good afternoon all. So, today I'm here to speak about rather emotional and a very serious aspect of ones life,

Leave a Reply

Your email address will not be published. Required fields are marked *