DEV Community: Amber Bdr. Kharka

Amazing and silent features about html5

Amber Bdr. Kharka — Sat, 20 Nov 2021 10:30:35 +0000

Web sites was available to public web browser in 1990. But at that time there were only few texts and links, graphics was absent. Each year there will be a ton of updates and new features. Html5 released into public in October 2014. HTML is the combination of Hypertext and Markup language.HTML5 is the fifth and current version of HTML. html5 has added some amazing features that we dont have to use another language/framework to get the same task done like video, audio.

The following elements are newly introduced elements in html5.

Tag	Description
article	Defines an article in a document
aside	Defines content aside from the page content
bdi	Isolates a part of text that might be formatted in a different direction from other text outside it

details	Defines additional details that the user can view or hide
dialog	Defines a dialog box or window
figcaption	Defines a caption for a element
figure	Defines self-contained content
footer	Defines a footer for a document or section
header	Defines a header for a document or section
main	Defines the main content of a document
mark	Defines marked/highlighted text
meter	Defines a scalar measurement within a known range (a gauge)
nav	Defines navigation links
progress	Represents the progress of a task
rp	Defines what to show in browsers that do not support ruby annotations
rt	Defines an explanation/pronunciation of characters (for East Asian typography)
ruby	Defines a ruby annotation (for East Asian typography)
section	Defines a section in a document
summary	Defines a visible heading for a element
time	Defines a date/time
wbr	Defines a possible line-break

1.Semantic/Structural Elements
Semantics is the branch that deals with the meanings of words and phrases in a language. Semantic elements defines meaning to both the browser and developer.
Examples of non-semantic elements: div and span -There is no connection between element and its contents. The div tag is an element that can contain anything inside.

<body>
    <div>Lorem ipsum dolor sit amet.</div>
</body>

Output :

Examples of semantic elements: form, table, and article - semantic elements clearly defines its content.The table element has a table inside its tag as a content.

<form>
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="John"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="Doe"><br><br>
        <input type="submit" value="Submit">
</form>

Output:

New Media Elements Before html5 was introduced we have to use such tools like javascript to add videos and audio into our website but now we have easy solution. We have video and audio elements to add video and audio respectively into our websites.

Adding audio
The controls attribute adds audio controls, like play, pause, and volume.
The source element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.
tags will only be displayed in browsers that do not support the audio element.
The controls attribute is used to controls functions like volume, pause and play. The source will direct to the bowser that support audio format. If the browser do not support the audio format then it displays the text between the and audio

<audio controls>
    <source src="animals.ogg" type="audio/ogg">
    <source src="animals.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

Adding video
We can add video in our web page with the help of video.
height and width add the height and width of the video respectively.
Set the width value in percentage(%) and height to auto so that video will be responsive. also use max-width property so that your video will not scale up larger than its original size.

<video width="100%" height="auto" controls max-width="500px">
    <source src="https://www.dropbox.com/s/xxt8c3bpt0u1rnl/sunset.mp4?dl=0" type="video/mp4">
    <source src="animals.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

New Input Types : many new input types in html form was introduced like color, data, datetime, datetime-local, email, month, number, range, search, tel, time, url, week.

<form action="/#">
    <label for="fname">First name:</label><br>
    <input type="color" id="fname" name="fname"><br><br>
    <input type="submit" value="Submit">
  </form>

Ouput:

HTML5 Graphics The HTML canvas element is used to draw graphics on a web page. The canvas element is only a container for graphics. You must use JavaScript to actually draw the graphics. The HTML svg element is a container for SVG graphics. SVG stands for Scalable Vector Graphics. SVG is used to define graphics for the Web. SVG is a W3C recommendation

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #e9c46a;">
Your browser does not support the HTML5 canvas tag.
</canvas>

Everyday year there are many updates in the web development field to make task simpler, mobile friendly and support all modern browser. In the version html4 we have to use JavaScript to insert date, color and many other properties but now thank you to html5 which has solved this properties. Friends and to my senior web devs let me know in the comments below, share if I have made any mistakes with my articles.

Developer Opportunities(jobs)

Amber Bdr. Kharka — Sat, 02 Jan 2021 10:02:57 +0000

Traditional Methods.
Based on the number of hour you want to sacrifice, there is freelancing, part-time and full-time job. Most of the job positions available in IT industry are available in the following websites. Let me share some of the attractive job vacancy providing websites. Most of the time applying job is an easy process, just submit your resume, projects and your details.

All kinds of jobs.

Startup Jobs :
This website provide jobs in startup company.

Freelance Sites

I love to get an idea, please let me know how you got jobs. What platform you used to job.

Inspiring ideas for projects

Amber Bdr. Kharka — Sat, 02 Jan 2021 09:38:53 +0000

|The purpose of software engineering is to control complexity, not to create it.|
- Pamela Dave, American compute scientist.
One of the good way to create jaw dropping projects is to solve existing problems in a better way. But how do we know the real world problems ? what methods should we use ? which tools are better ? Absorbing the tools and executing code/algorithms should be parallel. So in this article I am going to share some attractive and creative resources to light our brains to execute dynamic solutions.
Either we can create projects that are already done by others or create new project. Getting stunning ideas is what we wish for. Today let me mention some of the resources that will help in terms of project ideas and technology updates.

The following website gives the #website design ideas#. We get different design ideas from dribble. A place to explore different kinds of open source projects and ideas.

Another great way to create high star rating project is to read articles from different resources. Even we can contribute articles. There are many best places to explore amazing articles that will ignite ideas from our nerves.There are free adorable resources to read articles.

We have different kinds of jobs in any organization like manager, officers, supervisor, engineer…. But we have one end goal, “To solve problems efficiently with required factors given by organization”, its better to build real world projects even though it may be small, that`s is how we start. I found some of the eye opening conference and ideas from youtube. Off course all the following resources I mention are valuable but I really like the three hour conference by freecodecamp and Coding Tech. And coding tech provide best and best related tech idea.

Finally check this book(Become a better dev in 2021 - Hashnode), really helpful book published by hashnode, a great articles collections from experienced developers.

Inspiring ideas for projects

Amber Bdr. Kharka — Sat, 02 Jan 2021 09:35:16 +0000

The purpose of software engineering is to control complexity, not to create it.
- Pamela Dave, American compute scientist.

One of the good way to create jaw dropping projects is to solve existing problems in a better way. But how do we know the real world problems ? what methods should we use ? which tools are better ? Absorbing the tools and executing code/algorithms should be parallel. So in this article I am going to share some attractive and creative resources to light our brains to execute dynamic solutions.
Either we can create projects that are already done by others or create new project. Getting stunning ideas is what we wish for. Today let me mention some of the resources that will help in terms of project ideas and technology updates.

The following website gives the #website design ideas#. We get different design ideas from dribble. A place to explore different kinds of open source projects and ideas.

Finally check this book(Become a better dev in 2021 - Hashnode), really helpful book published by hashnode, a great articles collections from experienced developers.

Creative projects ideas

Amber Bdr. Kharka — Fri, 01 Jan 2021 13:09:51 +0000

The purpose of software engineering is to control complexity, not to create it.
- Pamela Dave, American computer scientist.

The following website gives the website design ideas. We get different design ideas from dribble. A place to explore different kinds of open source projects and ideas.

Another great way to create high star rating project is to read articles from different resources. Even we can contribute articles. There are many best places to explore amazing articles that will ignite ideas from our nerves. There are free adorable resources to read articles.

We have different kinds of jobs in any organization like manager, officers, supervisor, engineer, etc but all of us have one end goal, “To solve problems efficiently with required factors given by organization”, its better to build real world projects even though it may be small, that`s is how we start. I found some of the eye opening conference and ideas from youtube. Off course all the following resources I mentioned are valuable but I really like the three hour conference by /freecodecamp/ and /Coding Tech./ And coding tech provide best and best related tech idea.

Finally check this book Become a better dev in 2021 - Hashnode, it`s really helpful book published by hashnode, a great articles collections from experienced developers.
I love to discuss the project ideas resources. Let me know which one is in your list for getting project ideas other than GitHub.

First website Launched.

Amber Bdr. Kharka — Wed, 09 Dec 2020 05:44:15 +0000

Recently I launched static educational website in netlify, https://developmentweb.netlify.app/. it was my second project but first live project. Let me share some of my pitfall, lesson learned and I will share some of the websites that really helped me. While doing project i always thought I was on 1st gear but somehow i finised this project.i created 3 pages educational/personal website. 90% of project design I did it myself. I love a lot to listen suggestions, ideas and questions.

Step 1: I referred around 20 website to get rough ideas of website development but I took few ideas from them. I made the rough sketch of my project in Microsoft word(this is very bad idea and I didn`t knew any prototyping software). Firstly I wrote HTML code and inserted some images also. Mostly I was writing CSS articles in my website, so I referred css-tricks, w3schools, CSS and smashing magazine and tools as follows.

Code editor : Visual Studio Code.
Browsers used : google, brave.
Prototyping ( writing rough ideas about project) : Microsoft word (very bad idea).

Step 2 :
I designed icons and images in figma. And i also downloaded high quality images from pexels, unsplash, pixabay, and Freepik. I downloaded icons from Flaticon, Font Awesome, and google icons ( https://material.io/).

Figma : graphic design.(https://www.figma.com/)
Pexels(https://www.pexels.com/).
pixabay (https://pixabay.com/).
Unsplash (https://unsplash.com/).
Flaticon (https://www.flaticon.com/).
Font Awesome ( https://fontawesome.com/).

Step 3 :
In this step there was problem in responsive design. I joined around 10 web developers groups in facebook and stack overflow so that I have a better platform in getting help.Finally project got completed. I took 140hours to complete the project.

step 4 :
website hosting
I freely used netlify(https://www.netlify.com/) to host my static website. And i did website testing in GTmetrix (https://gtmetrix.com/) and Google PageSpeed (https://developers.google.com/speed/pagespeed/insights/).

Mistakes : I think these are my mistakes and lesson I should learn from this project.

I spend lot of time to make website perfect but i failed. So best way is to refer some freely available templates and get ideas from them as a begginers. Include simple design and make website responsive. Some freely available website templates are.

Get some design ideas:

Before actually start doing project, prepare prototype of the project. one of the best tool is figma(https://www.figma.com/), and using microsoft word for prototype is way out of topic. and GITHUB to upload the code. What I appreciate about this project :
- The images(vector) I used are high quality and mostly I made myself.
- Finally I succeeded but still there is room for improvement.*

Feedbacks, suggestions, and discussions is most welcome. https://developmentweb.netlify.app/