diptenusarkar / html.org.in Goto Github PK

html.org.in is an HTML learning GitHub repository, Based in India, But you can use it from all over the world, also you can contribute.

Home Page: https://html.org.in

CSS 9.72% JavaScript 40.20% HTML 50.08%

hacktoberfest hacktoberfest-accepted hacktoberfest2022 hacktobest2021 html-css-javascript html5

html.org.in's Introduction

html.org.in is an open-source HTML learning website.

So what does it mean?

Basically, we created this website for anyone who wants to learn HTML. This website is free-to-use and is maintained by the open-source community.

There is no subscription required to use the website. And there are no ads on the website.

We respect your privacy, so we do not track and do not sell any of your personal data.
We only store one cookie, which saves your preference of dark or light theme.

How can you contribute?

This section discusses how to contribute to the learning content of this project, whether that is adding new content which addresses a new topic, or updating existing content that is already on the website.

How can you contribute a new tutorial?

This section descibes how to add a new tutorial to the website.

Create a sub-folder within the html folder.
Name this sub-folder using the format html_topic.
- For example, the HTML Introduction topic folder is named html_intro.
Create an index.html file inside of the sub-folder you just created.
Open the copy.html file in the repository's main directory.
Copy the HTML contents of the copy.html file into your newly-created html_topic/index.html file.
- copy.html contains the basic structure that topic webpages follow in this project. It includes the HTML code for the metadata, header, footer and navigation buttons.
- Edit the <main> element to add your tutorial content to the webpage.
- Note that there are two <div class="navigation-link"> elements within <main>. These two <div> elements contain the navigation buttons.
After creating the 'index.html' page of yours,add the links of previous file and next file to your html page inside <div class="navigation-link">.
Adding a video to the topic page
If you would like to add a video to the topic's webpage, see the code below:

<div class="video__plyr">
    <video id="player" playsinline controls crossorigin data-poster="/path/to/poster.jpg">
    <source src="./cdn/video/Codes - 360.mp4" type="video/mp4" size="360" />
    <source src="./cdn/video/Codes - 540.mp4" type="video/mp4" size="576" />
    <source src="./cdn/video/Codes - 720.mp4" type="video/mp4" size="720" />
    <source src="./cdn/video/codes - 1080.mp4" type="video/mp4" size="1080" />
    </video>
</div>

To embed a video on the page:

Add a <div> to the index.html file for your topic. Ensure that the <div>'s structure is similar to the one above.
Inside the <div>, add one <source> element for each resolution/quality you will have for the video.
- In the example above, the video is available in four resolutions so there are four <source> elements.
Set the src attribute of the <source> element to a string containing the filepath/URL to the video.
- In the example above, the video files are located in ./cdn/video/, where cdn exists in the same directory as the topic's index.html file.

For more information on the HTML structure of topic webpages, please look into the copy.html file.

Our Contributors

html.org.in's People

Contributors

Stargazers

Watchers

html.org.in's Issues

UI/UX Edit: theme box overlaps the tutorial boxes

The Problem
The theme_box <div> overlaps the component boxes which provide links to specific tutorials.
See the screenshot below:

I think this is visually unappealing and mildly inconvenient.

Additionally, the theme box is only available on the main page. What if the user is reading a particular tutorial and decides they want to change the theme? Having to go back to the main page to change the theme may negatively impact the user's experience.

Possible Solution
I suggest moving the theme_box <div> so that it does not overlap with the tutorial component boxes; perhaps placing the theme box inside the header — this would prevent it from causing the overlap issue and would also make the theme box available on every page.

Add styling to the nav bar

I would like to add styling to the nav bar as that would give the web page more aesthetics and the navbar would be fixed to a point.

Want to update README.md file and adding CODE_OF_CONDUCT file

I want to add how to contribute section and also contributors profile into main README.md file and want to add Code of conduct file.

@Diptenusarkar Do you want this? Then assign this to me.

Improve content under HTML INTRODUCTION section

There are many grammar error in the content.

HTML forms document

I would like to add a documentation on how to create forms in html. Please assign this issue to me.

[Bug] : Test Image Preview on (HTML File Paths) Page not Working

Image Loading Problem

Expected Solution--
It is an example of Absolut File Paths, The picture will be displayed from The Internet.
I think it's a good idea to put a Random Image URL So that the image changes in Every Refresh.

Current Behavior--

Expected Behavior--

Steps To Reproduce--

Go to Main Website and Scroll Down
Click on HTML File Paths
Scroll Down

bug : homepage cards issue

When I opened the site on my laptop, it looked like this >>>

Is it supposed to look like this, or should I have a look into it if you want in accordance with Hacktoberfest !

[Alart] : Website is no longer Responsiveness

The responsiveness of UI is broken
need to Restore the Old Codebase, This happens After the #80 Merge.

Steps To Reproduce--

Open Website on Phone Screen
Or go to the Website ->go to inspect tool -->Check Responsiveness

Screenshot---
From Mobile Screen-

Want to add small note on Responsive Website

addition of html mapping

example showing Indian map with states on clicking linking to their folk dances

Create About page

Creating an about page before telling about the elements to give a gist of about what the site offers

Wrong spelling

the file path - Absolute was wrongly spelled as absolut

Addition of html graphics tag

hey @Diptenusarkar i would like to add html graphics tag i.e Canvas and Svg

Attractive UI

hey! I would like to work on UI of the project and want to add Cursor effect, please assign it to me and make it hactoberfest acceptable

Review Issue Template

@Diptenusarkar
Could you please review this issue

Add HTML Semantic elements

Can you assign this issue to me, i want to add HTML Semantic elements.

I want to add a matching video for HTML styling

Hey,
I want to add a reference video for html styling . The already available video is not related to styling.
Can i work on this issue

[Feature]: Too Small Navbar Text On Mobile Screen

Screenshot--

It Will look good on Mobile Devices if the Text Size is increased.

Need to fix Home page

Need to add a glass effect on using CSS

I can fix the card ui of the homepage

@Diptenusarkar The paragraph of the cards are overflowing I can fix it. please assign me this topic I can work on this.

Sub folder for image maps

@Diptenusarkar I can create a sub folder which provides the detailed explanation of image maps or hotspot maps. Kindly assign me with this issue under the hacktoberfest label.
Thanks in advance.

Improving the UI of website

It requires a UI that is more eye-catchy.

I want to add `media tag` under html basics

Can you assign it to me? I've already ready with the changes, just have to push the pull request 🤩

HTML tables document

Hi @Diptenusarkar , I want to add the documentation for the HTML table. Can you assign me this issue?

HTML Links document

Hi @Diptenusarkar !!, I want to add the documentation for the HTML Links Can you assign me this issue?

html lists

want to add lession on html lists

HTML block and inline elements

Hello!!
I wanna add a new topic called HTML block and inline elements

Login Signup Page

I would like to work on to add login signup page to the project, please assign me the issue and make it hactoberfest acceptable

Feature: Add HTML class, and HTML style guide

Hi, I wanted to contribute by adding these two sections to the website. Could you assign this issue?
Thanks

Fix code scanning alert - Incomplete regular expression for hostnames

Tracking issue for:

https://github.com/Diptenusarkar/html.org.in/security/code-scanning/1

UI UX Improvements

Improving nav-bar buttons and font selection for a more trustable looking site, and buttons that don't look spammy.

Website localization problem

Hay, Recently I try to implement a new thing it's called localization.
If I open this website from India it will open an Indian website.
Our Recent website is - html.org.in
when I open this website from India it will open an India website their URL will be changed - in.html.org.in

Now the problem is when I open this website it does the same as I expected. But It still opens that link again.

PLACEMENT ROADMAP

Want to contribute more beyond hacktberfest

No hovering effect on learn more

The learn more needs a button form and hovering effect to make it look more attractive.

Feature: I want to add HTML Vscode extension section in this project

There are a lot of HTML extension which use in vs code and make life easier of developer, I regret that why i don't know about them when I started to code so I want to share it with all, kindly assign this feature to me

code of conduct should be added

code of conduct is important it should be added
@Diptenusarkar can u assign me ..?

Adding new feature Prettier and linter

Adding the code formatter

I would like to add the prettier in this project which is an automatic source code formatters. It take source code as input and produce properly formatted output. Their goal is to establish a common format for all source code in the project.

Adding the linter

Linters help us spot "silly" mistakes that all programmers make, or help us avoid certain code patterns that often lead to bugs. We want to make it easy for ourselves and new developers joining our project to not introduce bugs or bad code.
I will use ESlint

And i will Create a simple "one-step" solution for running your formatter and the linter on the entire project from the command line. This could be an npm script.
Please assign me thsi issue as well i will work on it.
Thanks

[Feature]: Actual Vedio Tutorial for HTML-Attributes

Put Actual Video Tutorials so that Learners can be benefited.

Want to correct some spelleing error in the website

Documentation improvement: Make `README.md` easier to understand.

While I was reading the README.md file about how to contribute to the project and I found that it was difficult to understand.
The "How will you contribute?" section is specifically about contributing additional tutorial pages, but I was under the impression that the readme was talking about general contributions to the project. I think the readme should specify what it means.

I'd like to take some time to modify the README.md file to make the instructions a little clearer, easier to understand and fix up some minor grammar errors.