Practice Sample
Sample note: how an HTML page is put together
Another sample article. It explains the basic parts of a page I am practicing in class and at home.
// notes/
Web development and AI notes
Coding tips and build notes by Mahir Faysal, a student web developer in Bangladesh: tested Python, HTML, CSS, JavaScript and PHP tutorials, plus notes from my Next.js and Gemini projects. Sample posts are marked and drafts stay in the admin area.
// 01 · why
Why these notes exist.
I forget what I understood last week unless I write it down. A note is that memory, published so I have to be clear. The topics are the same ones on the skills page: how a document is structured, how CSS decides where a box sits, how a small script reacts to a click, how PHP prints a value.
They are short on purpose. A long tutorial I cannot defend would be worse than a short note I can. If you are further along than I am, you will see the gaps. That is useful. The contact page is there if a sentence is wrong.
#Beginners
#Security
#PHP
#Forms
#Next.js
#TypeScript
#CSS
#Gemini API
#HTML
#JavaScript
#Layout
#localStorage
#Python
#Zod
#Zustand
#Accessibility
#Arrays
#Async
#Canvas API
#CSS Grid
#Email
#Flexbox
#List comprehension
#MySQL
Learning notes Sample
Sample note: what I am using PHP for
A sample article for the blog layout. It is a practice note, not a finished tutorial or a claim of expertise.
// 02 · sample
What the Sample label means.
If a card says Sample, it is layout practice. I wrote it so the blog has a real article page to open: a title, a date, a reading time, and a body. It is not a published tutorial and it is not proof that I have mastered the topic.
Sample notes are marked noindex and they are left out of the sitemap. A search engine should not treat them as articles I stand behind. On the article page itself, a warning sits above the writing so the label is not only a small badge on the list.
// 03 · shape
What a note should contain.
One question
What does this tag do, or why did this layout break. If the note needs two questions, it is two notes.
A small example
A few lines I actually ran. Code that I have not tried does not go in the post.
The limit
What I still do not understand. That sentence keeps the note from sounding like a course.
// 04 · drafts
Drafts, categories, and tags.
A draft never appears on this list. I can leave a half-written note in the admin area until the example works. Categories group the subject, such as learning notes or practice. Tags are the smaller words I might want to find later.
Search looks at the published titles and text you are allowed to see. It will not surface a draft, and it is not a way to find sample posts that have been kept out of the index. If a filter is empty, the page says so instead of inventing a result.
// 05 · later
What I expect to write next.
The next honest notes are the bugs I actually hit: a heading that overflowed a card, a form that accepted an empty message, a query that returned the wrong row because I forgot a condition. Those are better posts than a rewritten manual of HTML.
Reading time is an estimate from the length of the body. It is there so you know the note is short. It is not a promise that the note is dense. If you want the projects instead of the notes, they live on their own page.