DEV Community

Cover image for HTML SUMMARY.
Maame Afia Fordjour
Maame Afia Fordjour

Posted on • Edited on

HTML SUMMARY.

INTRODUCTION
First of all, I am so proud of myself! I could have completed the HTML course earlier on (even though i don't know 'everything' about HTML, I am now familiar with most of the basics) but, because of procrastination and constant doubt and laziness, I took longer than expected. This blog post should be like day 20 something days, but I haven't been so consistent on here. So if you're reading, don't think I actually used '4' days to learn HTML basics. I mostly post my #100daysofcode progress on my twitter [https://twitter.com/maame_codes] and I am on day 22 as at now. But, putting that aside, I am just glad I have been able to complete this particular course on HTML. And oh, its free as well(You need to pay like $95 if you need a certificate to prove you took the course, that's if you really need it.) This is the link πŸ‘‰[https://www.w3schools.com/html/default.asp]. They also have paid courses where you get to take a full front-end developer course πŸ‘‰[https://courses.w3schools.com/].

HTML SUMMARY (What I have learnt so far)

Before I even begin to list what I have learnt in the past few days, I would want to list some important pointers that helped me to remember the stuff I read in the tutorials and the videos I watched;

πŸ“Œ Don't follow blindly to the examples given in the tutorials. I did this when I started learning somewhere in February, and this made me give up on learning to code all together because I always forgot what I learnt the previous day. Sometimes even after some few hours. I could barely understand after taking my eyes off the tutorial video for sometime. When I started re-learning, I read a blog that said you should always practice as you learn. And 'get your hands dirty' so as I learnt from the tutorials, I decided to start a really simple website. Since it was just HTML I was focusing on, I made a 'skeleton' site and included everything I would learn at the end of the day and make some changes. This helped me to remember a lot of these elements and tags.

πŸ“Œ Try to read other codes from other developers. They say HTML isn't a programming language πŸ˜‚ (we'll have that debate another time). But it is a programming language in my eyes please. I go on twitter mostly and just check what other people are doing or have done and ask for their HTML codes(if the person is generous enough, they'd send it to you. But please don't bug anyone if they aren't willing to share) I did that and I could finally understand what a div or input type was. I was always like 'yaay, finally!!' I get these things now. Initially when I see developers making 'jokes' about HTML tags I always had to google it before I understood and come back to laugh (don't judge meπŸ˜‚). That's about it. I am not a pro or a senior developer, but this has really helped me in my small journey so far and I hope it helps you too, if you're struggling with remembering stuff.

πŸ“Œ Practice, practice, practice. It doesn't matter what language you're learning, it is always advisable to practice with what you've learnt. Make sure you make mistakes and try to figure out all the bugs and solve it. You can search up beginner friendly projects as well that would help you practice. My favorite site for beginner friendly HTML projects is πŸ‘‰ [https://www.upgrad.com/blog/html-project-ideas-topics-for-beginners/]. You can try your hands on the ones that interest you (try as much as possible not to just copy and paste).

HTML Summary

πŸ“Œ HTML is the Web's universal markup language. HTML allows you to format text, add pictures, build links, input forms, frames, and tables, and save everything in a text file that can be read and shown by any browser.

πŸ“Œ You can use CSS to style your HTML pages. CSS allows you complete control over the layout without interfering with the content of the document.

πŸ“Œ JavaScript adds dynamism to your webpage. A dynamic website is one that responds to events and allows users to engage with it.

πŸ“Œ You must publish your website in order for it to be accessible to the rest of the world.

You have two alternatives for this:

βœ” Make use of an Internet Service Provider (ISP).
βœ” Create your own website and host it on your own server.

πŸ“Œ Always keep accessibility in mind when writing HTML code.
You have to make it easy for users to navigate and interact with your website. So make your HTML code as meaningful as possible.

πŸ“Œ Semantic HTML entails employing accurate HTML components as much as feasible for their intended purpose. Use the <button> element (rather than a <div> element) if you need a button.

πŸ“Œ Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

πŸ“Œ Headings are important. Use them appropriately. The structure and content of your web pages are indexed by search engines using headers.

Users browse over your pages based on the headlines. Headings are essential for displaying the document's structure and relationships between sections.

Headings are also used by screen readers as a navigational aid. The many sorts of headings define the page's structure. For main headers, use <h1> headings, then <h2> headings, then the less important <h3> headings, and so on.

πŸ“Œ If a viewer is unable to view an image for some reason, the altattribute gives an alternative text (because of slow connection, an error in the srcattribute, or if the user uses a screen reader).

An example;

 <img src="img_flower.jpg" alt="A flowerpot"> 
Enter fullscreen mode Exit fullscreen mode

The browser would display the altattribute if the picture doesn't load.

πŸ“ŒTo define the language of the Web page, always use the langattribute inside the <html> tag. This is for the benefit of search engines and web browsers.

For example;


<!DOCTYPE html>
<html lang="en">
<body>

...

</body>
</html>

Enter fullscreen mode Exit fullscreen mode

πŸ“ŒAlways communicate in plain, easy-to-understand terms. Also, try to stay away from characters that are difficult to read with a screen reader. For example:

βœ” Keep sentences as short as possible.
βœ” Avoid dashes. Instead of writing 1-3, write 1 to 3.
βœ” Avoid abbreviations. Instead of writing Feb, write February.
βœ” Avoid slang words.

Concluding words

I haven't mastered HTML fully yet, but I now know enough to help me do something like creating a simple website with images and other forms of media like videos and audios. I am going to start with CSS basics as well and incorporate what I learn there into the site I am building as well. The plan is to learn the basics (HTML, CSS and JavaScript). After I have gotten the understanding, I then go ahead to create some projects and hopefully get a portfolio to showcase them. And continue learning more because the learning process never ends. Thanks for reading, I hope you liked it😊!

Top comments (0)