FEATURES WHICH IS THE PART OF MY WESBITE

Dated: 25th Dec. 23; 2nd Jan. 24; 19th Jan. 24; 22nd Jan. 24; 26th Jan.
24;12th Feb. 24; 13th Feb. 24; 14th Feb. 24; 22nd Feb. 24; 3rd Mar. 24; 12th
Mar. 24; 5th Apr. 24; 16th Apr. 24; 5th May. 24; 18th May. 24; 5th Jun. 24;
and, 21st Jun. 24

"AN ADMINISTRATION PANEL COULD ALSO ALLOW ME TO AUTO-ARRANGE MY

CONTENTS ON ANY SIDE OF MY SPECIFIC SECTION'S OF A WEBPAGE."

"One link is mentioned in the draft, i.e. {https://www.adhyyanbooks.com/} See the

picture gallery of this link, please include the feature on the welcome page of
mine with administration panel's active involvement to edit remove or add more
images and also might need a section to have a parallel photo sliding, a more
than one photo sliding in a section might be three only would be sufficient to me.

I'm including it on my pointers along-with on draft as-well and also an

administrator could also be able to auto-arrange its contents either point-wise or
when a new webpage created on the topic of my definition, I could be able to edit
remove or add the content(s) from any space of my section on the specified web-
page of mine.

I'm again sharing you the updated draft."

Today, with respect to the conversation between Mr. Aman

Mishra (proprietor of name2brands) and me, I’m mentioning
my project theme, that is “a website having all the contents
from across the globe cater to the requirements of students
who visits the website and getting the contribution of those
school students who enrolled with me to contribute on the
contents for my website relating to different subjects as-per
the choice and contents should follow theoretical approach as
well as practical approach too”.
Today, I get a new experience of providing extra-security to your website apart from
S.S.L.{Secure Socket Layer} while using online S.B.I. facility YONO in my laptop and the
security features they include is SESSION-TIMEOUT that is, if a user performs forbidden
activity such-as if he intentionally using left-right arrows or using same password more
than once, that is your login, profile and transaction’s password, all should be different
otherwise the session automatically times-out from your profile and also if you are not
active on your current window and once your session expires and userID and
password field are filled with original details, then without refreshing the page,
your entry is regarded as malicious irrespective of captcha and many more features
would be there, I hope you all going to incorporate such features in my website.
“The Idea of Responsive MENU-BAR handled through ADMINISTRATION PANEL,
please follow below link, inside the link, see the left menu-bar also and right
menu-bar also and the contents placed inside them, I want exactly same CSS-
DESIGN for all of my web-pages for contents.

https://www.mygreatlearning.com/blog/operator-overloading-in-
cpp/
It’s a new way of showing contents on the menu-bar. ADMINISTRATOR SHOULD
CREATE NEW HEADERS AND ALSO ADD SUB-HEADERS AS-PER HIS WISH
following the above link to have a responsive header of above fashion.”

“MY WEBSITE SHOULD COMPLETE ACCORDING TO

GEEKSFORGEEKS {https://www.geeksforgeeks.org/} ONLY
BECAUSE MY BUSINESS IDEA CONCEPT FOLLOWS THEIR
PRINCIPLES ONLY, BUT MY BUSINESS RUNNING
CHRONOLOGY IS A BIT DIFFERENT FROM THEIR
APPROACH AND FOR THAT MY FIRST MOTIVE IS TO GET A
FULLY RESPONSIVELY DESIGNED MULTI-BROWSER-
ENABLED DYNAMIC WEBSITE AND SECOND MOTIVE IS TO
HAVE AN ANDROID APPLICATION AND APART FROM
WELCOME-PAGE {LANDING-PAGE} DESIGN, AND MAKE A
NOTE THAT I WANT THE COMMON DESIGN FOR REST OF
THE SECTIONS OF MY WEBSITE-PROJECT APART FROM
WELCOME-PAGE AND BLOG-PAGE, FOR WELCOME-PAGE
AND BLOG-PAGE DESIGN I NEED A THOROUGH
DISCUSSION FROM THE DEVELOPMENT TEAM.”

IMPORTANT QUESTIONNAIRE

Q1. Did you provide me guarantee and surety regarding non-

breaking of my website coding in any single point of time when
I’m decided to publish my website and it should interact with the
dedicated server and coexists with additional coding when
desired and steps to perform website-maintenance on my own?
Q2. I’m engaging to Recruitment Activities owing to my past
seven-plus years of experience and I’ve learnt that the companies
who is taking online tests took tests on separate tablets or
desktops and the format of such tests are like either to have time-
limit per-section or per-question, I want yet another functionality
in ADMINISTRATION PANEL who helps me to conduct such tests
with PROPER MASTER-CSS-FILE to display related questions on
the webpage with TIMESTAMPS and STOPWATCH, have you gone
through with this questionnaire? Subject-Wise descriptive-type
QUESTION-ANSWERS sections should also need to cover, ask
your team to incorporate the same?
Q3. Have you gone through my complete documentation for
website design requirement?
Q4. Is the Administration Panel designed on P.H.P could complete
the tasks like C.R.U.D. OPERATIONS and Dynamic Adding and
Deletion of Web-Page on new window, if a visitor wishes to edit a
highlighted word or highlighted text based on the need of
ADMINISTRATOR and that same thing should also be there on the
Welcome-Page of the Website-Project, then a separate webpage
should be open and webpage displayed responsively could be
achievable?
Q5. Is the Administration Panel would allow me to navigate to any
section of my website and edit any content or to add new content
or add photographs and diagrams related to content which is
related to specific topic of my listed subjects?
Q6. Is a fully designed Database Schema with various fields
achievable?
Q7. Could we store a Webpage in a Database and when a
temporary web-page is about to get displayed then it came out
from database or not?
Q8. Needs to give the content interactivity {multiple-tagging
features} and common CSS styling for different contents and for
that a one-time discussion is a must, make it possible as-per your
convenience?
Q9. Provide me a Single Document both in power-point and word-
document depicting the full project-details, that is from scratch-to-
finish with DATABASE-&-CSS-&-HTML-&-JAVASCRIPT CODING,
full PROJECT-FOLDER-DETAILS and P.H.P. ADMINISTRATION-
PANEL CODING details as-well and not to forget, details of U.R.L.
STRUCTURE is also needed?
Q10. Have you discussed CSS-Styling with me?
Q11. How do you manage CSS-CONTENTS, HTML-CONTENTS and
JAVASCRIPT-CONTENTS?
Q12. Have you discussed the number of permanent webpages
needed in my project with me?
Q13. Downloading and Uploading features should be their inside
PANEL?
Q14. Server and Hosting, have you provided details?
Q15. Issuing SSL Certificate and Website Security Features, have
you provided details?
Q16. Consider essenceoftoday.com or essenceoftoday.org as my
PROJECT-NAME, have you booked for the domain?

VENDOR PREFIXES

Android :- -webkit-
Chrome :- -webkit-
Firefox :- -moz-
Internet Explorer :- -ms-
iOS :- -webkit-
Opera :- -o-

HTML-ENTITIES
 https://www.toptal.com/designers/htmlarrows/symbols/
https://symbl.cc/en/html-entities/

“Sandeep Jain: An IIT Roorkee alumnus and founder of GeeksforGeeks. He loves to

solve programming problems in the most efficient ways. Apart from GeeksforGeeks, he
has worked with DE Shaw and Co. as a software developer and JIIT Noida as an assistant
professor.
Vaibhav Bajpai: Amazed by computer science, he is a technology enthusiast who enjoys
being a part of development. After work, you can find him in love with movies, food, and
friends.
Shikhar Goel: A Computer Science graduate who likes to make things simpler. When he's
not working, you can find him surfing the web, learning facts, tricks, and life hacks. He
also enjoys movies in his leisure time.
Dharmesh Singh: A software developer who is always trying to push boundaries in
search of great breakthroughs. Off from his desk, you can find him cheering up his
buddies and enjoying life.
Shubham Baranwal: A passionate developer who always tries to learn new technology
and software. In his free time, either he reads some articles or learns some other stuff.”

TAKE THE IDEA FROM BELOW LINKS AS-WELL,

https://www.weblinkindia.net/weblinkindia-360-view.htm
https://www.weblinkindia.net

https://replit.com/@alpanaparmeshwa/HTML-CSS-JS, it is an online
Integrated Development Environment and it is divided into three
vertical sections the middle section is code-editor section the left-
most section is the facility given by replit.com community to
automatically creates all the desired folders as-per the extension of a
file and right-most section is a web-view (it consists of lot of features,
but I want only output of HTML-CSS, THAT’S IT).
So, on the 3rd page of my website I want only feature of JavaScript-
Console (or, you say a WEB-CONSOLE, most-probably on bottom-
section-of-page) along-with CSS so-that at later stages I upload
JavaScript Contents by myself with output of JAVASCRIPT is shown on
that console and on the 4th page of my website {TEMPLATES-SECTION
PAGE} and first-one is WEB-VIEW (most-probably on right-section-of-
page), and last-one is WEB-API INTEGRATION, and along-with CSS so-
that at later-stages I upload all the CSS3 Properties and its output as-
well (well, the output problems is solves by WEB-VIEW), if web-view is
possible, otherwise gives me the predefined CSS so that I upload the
properties-with-output as-per my requirement.
The conclusion drawn from above is that you work is to give an
INTEGRATED HTML/CSS/JAVASCRIPT CODE-
EDITOR/COMPILER/CONSOLE/WEB-CONSOLE/DEVELOPER-CONSOLE
to my webpage with multiple-tagging functionality just like that of
Wikipedia to give more interactivity to my contents in every webpage
and templates-section page.
It should be a fully-designed dynamic informative website “pre-
defined CSS” is needed with an aim to display contents related to
[HTML {5}, CSS {3}  both are the contents part only for 2nd Page of
my Website] and [JAVASCRIPT {ES6}  contents part for 3rd Page of
my Website].
An Administration Panel developed on PHP is needed to allow an
administrator to employ C.R.U.D. operation on the contents which I’m
uploaded later-on and the contents which you’re going to upload
apart from JAVASCRIPT, that is this PANEL could allow me to update
my contents of 2nd, 3rd, 4th, and 6th Page of my website.
Console of JAVASCRIPT (3rd Page of the Website, you can call it as Web
Console {https://www.geeksforgeeks.org/console-in-javascript/} “pre-
defined CSS” is needed) SCRIPTING LANGUAGE, the basic idea of mine
is to track the traffic of visitors who visits my website, get the
information on console and lastly, when I upload JAVASCRIPT
CONTENTS, then that console could show the output, this feature is
needed to integrate on the 3rd PAGE.
4th WEBPAGE is dedicated to TEMPLATES “pre-defined CSS” is needed,
where I want to display the PROPERTIES of CSS3, TAILWIND-CSS AND
SASS(SCSS) on the Webpage along-with the output of that property.
Here, I want a feature of WEB-API to integrate with only the 4th Page
of my website.
6th WEBPAGE is dedicated to BLOCK-DIAGRAMS “pre-defined CSS” is
needed and please go through the draft to get the idea of the
requirement, as I’m not repeating it.
1st WEBPAGE is the Welcome-Page, and I left its design to the company
only, and I need “pre-defined CSS” is needed so that I upload my
contents later-on, and it displays my-contents on the page artistically
via. that CSS. I’m mentioning other details already in the draft.

POINTS WHICH BECOME THE BLUEPRINT OF MY

WEBSITE FOR THE PROFESSIONALS TO DESIGN THE
WEBSITE

Dated: 22nd Dec. 23

The only plan behind this website is to get the CSS-Done in all six
sections of the WEBSITE starting from WELCOME-PAGE (FIRST-
SECTION) to BLOCK-DIAGRAM-PAGE (LAST-SECTION).
The Contents-part is going to be managed by my-end only and below
is the idea of mine to start with the CSS3 design.,
 For the first-page of my website, I left the design to the
developer’s mindset only, the things to keep in mind is there is
no need to employ any audio-video and animation-effect but are
required to give me the HTML-STRUCTURE which remain
common for different sort of contents uploaded by me in time to
time to the first page. Responsive headers should be there with
no ABOUT-US and CONTACT-US headers link, but 2nd Page for
PLACING CSS3-HTML5-TAILWIND_CSS-AND-SASS_CSS contents,
and 3rd Page for PLACING JAVASCRIPT contents and to INTEGRATE
JAVASCRIPT-CONSOLE ON 3rd Page, 4th Page for TEMPLATES-
SECTION and to INTEGRATE WEB-API INTEGRATION WITH 4th
PAGE OF MY-WEBSITE, 6th Page for BLOCK-DIAGRAM SECTION.
 Let start with Content Styling steps now,
1. PICK ANY TWO CSS-PROPERTIES (JUST AN-EXAMPLE)
WHICH ARE RELATED TO EACH OTHER WITH A TARGET TO
PLACE CSS-PROPERTES AND ITS CORRESPONSING-OUTPUT
ON 4th PAGE OF THE WEBSITE, TARGET IS TO BUILD THE
REQUIRED HTML-CSS TO ACHIEVE THE SAME.
2. NOW, PICK ANY TWO CSS-PROPERTEIES (JUST AN-
EXAMPLE) WHICH ARE NOT RELATED TO EACH OTHER OR
RELATED TO EACH OTHER, HERE THE TARGET IS TO DEFINE
HTML-CSS IN SUCH FASHION SO-THAT THE CONTENTS
SHOULD PLACED ON 2nd PAGE OF THE WEBSITE, HTML AND
CSS SEPARATELY.
3. GIVE ME CSS FOR 4th PAGE AND 6th PAGE, I PLACED THE
CONTENTS ON MY-OWN.
 4. GIVE ME THE DESIRED ADMINISTRATION-PANEL AND
BLUEPRINT OF MY WEBSITE WITH THE TESTING TO SEE ITS
RESPONSIVENESS.
 Reach-me for the clarification of any-doubt if arising now and
allow me to get in-touch with your developer team so-that, I can
have an interactive session with them to get the blueprint of the
website done at the very start.
 Don’t forget to provide wildcard characters to me especially
symbols covering mathematics, physics, chemistry, data-science,
machine-learning, artificial-intelligence, Microsoft-excel, symbols
used in elementary school and in college and universities in
various subjects and a separate folder where all these symbols
are stored with their Corresponding ASCII Characters, Regular
Expressions/Patterns and CSS Design.
 If my requirement is still not-clear, then forward that to the
concerned developer team, who could be able to build the
website on this requirement.

FINAL DRAFT FROM MY-END MENTIONING ALL THE

POINTS TO BE CONSIDER IN DESIGNING A WEBSITE

Dated: 30th Nov. 23

This website is an Informative-website with the theme of having

Templates on its Front-end so that any visitor who visits the website
could be able to grasp the key-concept of using HTML (5) and CSS (3)
in a very efficient manner.
Dated: 18th Dec. 23

That Templates should CONTAINS ONLY CSS-CSS3 PROPERTIES

along-with its corresponding OUTPUT TO dISPLAY ON wEbPAgE
(4Th SECTION Of A wEbSITE) along-with MULTIPLE-TAggINg
fEATURE {JUST LIKE ThAT IN wIKIPEdIA} to give more
interactivity to the contents.
I’ve learnt that without using ADMINISTRATION-PANEL (P.H.P.
PROGRAMMING LANGUAGE), to include C.R.U.D. Operation with
MYSQL-DATABASE in backend along-with WEB-HOSTING SERVER to
employ (in my case, hosting is not necessary, only need a complete
designed website with source-code arranged in proper-folders with
JSON {JAVASCRIPT OBJECT NOTATION} as main source for DATA-
EXCHANGE) my project could not be completed since my contents are
once uploaded, are required to extend further but the contents which
is uploaded could only be edited and extended via. ADMINISTRATION
PANEL only. MY PROJECT REQUIRES CSS/CSS3 DESIGNER WITH
HTML/HTML5 SPECIALISTS IN THE TEAM OF DEVELOPERS TO ACHIEVE
THE SAME.
THE ENTIRE PROJECT QUOTATION SHOULD FOLLOW THE LATEST
INFORMATION TECHNOLOGY ACT AND IN MY CASE I WANT A FULL-
DETAILED CONCNCLUSION FROM YOURS END AGAINST THIS DRAFT OF
MINE ALONG-WITH THE BLUEPRINT OF MY
WEBSITE.
 WEBSITE DESINING METHODOLOGIES/STANDARDS TO
FOLLOW ON PROFESSIONAL BASIS ON STRICT-SENSE

Website should be design as Mobile-First methodology and it should

be responsive in every-sense and should be designed for Mobile,
Tablets and Laptop (of any size).

Dated: 18th Dec. 23

“Website should be running smoothly on EvERY OPERATINg-

SYSTEM and on EvERY wEb-bROwSER available.
USING ALL MULTI-BROWSER ENABLED CSS CODING APPROACH AS-
WELL ON CODING-PART AND IN CONTENT-PART PLEASE USE THAT
SAME CSS STYLING APPROACH AND ALSO KINDLY CONSIDER THAT
COMMON CSS FOR ALL CONTENTS IS THE PRME NEED OF MINE.
COMPLETE dETAILS Of vSCOdE (INSTALLATION Of vS-COdE
{LATEST vERSION}, ALL ThE vS-COdE EXTENSIONS-dETAILS,
ALL ThE vS-COdE ShORTCUTS, ALL ThE dETAILS Of dATA-
PACKAgINg/dATA-INTERChANgINg/dATA-EXChANgINg
fORMAT LIKE JSON, ETC.) ANd ALL wEb-bROwSER dETAILS
wITh fULL gOOgLE ChROME dETAILS ON THE WELCOME PAGE
[FIRST-PAGE] TO BE CONSIDERED.
PROPER DIRECTORY STRUCTURE IS NEEDED SO THAT MY PROJECT
COULD BE WELL UNDERSTOOD BY ME AND ALSO PROVIDE ME AN
ACCESSBILITY WHERE I COULD PREPARE A POWERPOINT SLIDE OF
EVERY PAGE OR SECTION OF MY WEBSITE APART FROM WELCOME
PAGE.

PARTS OF MY WEBSITE (2nd - to - 4th)

This SECTION is very important part of this draft and I try my level-
best to give every-detail of my requirement., my website if-possible
could be divides into five parts, the second-part is CSS-CONTENTS,
CSS3-CONTENTS, SCSS-CONTENTS, SASS-CONTENTS AND TAILWIND-
CSS CONTENTS; the third-part is the placement of templates on the
web-page, and; the fourth-part is the integration of JAVACRIPT-
CONSOLE to show-&-run JavaScript Scripts (I’m going to manage the
contents-parts-only for this).

PARTS OF MY WEBSITE (1st - & - 5th {second-last})

https://www.thapatechnical.com/
Consider the above link for the welcome page of my website and what
I want in-that, I need to discuss that in video-calling-session for the
same.
https://thapatechnical.shop/blogs
Consider the above link as the last page of my website and what I
want in-that, I need to discuss that in video-calling-session for the
same.
 PARTS OF MY WEBSITE (6th {last-part}) Dated: 14th Dec. 23

https://developer.mescius.com/blogs/create-great-diagrams-using-
css-grid-layouts
Consider above link as-well for achieving the same using CSS-HTML-
JAVASCRIPT.
Using the above features in my website, I want flowchart, UML-
Diagrams, Data-Model OOPs Class Diagrams in my website.
PLEASE USE MYSQL WORKBENCH FOR THIS IF NEEDED.

WEB-API INTEGRATION FOR TEMPLATES-SECTION

https://www.knowledgehut.com/blog/web-development/javascript-
web-apis
Consider the above-link if there is the sure-shot possibility of
achieving the same, since templates section is supposed to be the
earning of mine from the website.

MY REFRENCE WEBSITES FOR CLUE

Please follow below websites as-reference,

https://www.dofactory.com/css
https://developer.mozilla.org/en-US/docs/Web
 https://sass-lang.com/guide/
https://tailwindcss.com/docs/installation
above links should be used to get the CONTENTS.
https://www.dofactory.com/css
website-page design should be like above inside the link.
https://www.digitalocean.com/community/tutorials/how-to-use-the-
javascript-developer-console
This could be possible on my website as a console-integration in a
webpage to show the output of JavaScript-Code.
https://www.browserstack.com/guide
At the very start when contents are uploading on ready-designed-
webpage, full functionality of a web-browser should be mentioned on
the first webpage and after-that contents related to CSS should
continue.
Try to show full features of Google-Chrome (on HTML-Part/on CSS-
Part/on JavaScript-Part/on employing necessary-extensions on
Chrome) as a part of content and on the latter-section, names of
different web-browsers should mention. Also, I want to track visitor
WHO VISITS THE WEBSITE OF MINE and for that I want to include
visitor-tracking feature on my website, and I’m interested to get the
input from your end, regarding revenue-generating-feasibility of the
Website designed by your team.
I also want you to include all-sort of WILDCARD-CHARACTERS on my
website which covers symbols present in MATHEMATICS, PHYSICS,
STATISTICS, CHEMISTRY, TRIGONOMETRY, MACHINE-LEARNING AND
ARTIFICIAL-INTELLIGENCE and REGULAR-EXPRESSIONS USED IN CSS3
IN SELECTORS.
 FINAL ROADMAP OF A WEBSITE DESIGNING AND
CONTENTS ADDING

Dated: 10th Dec. 23; 12th Dec. 23; 14th Dec. 23

I am going to write points in a very clear manner for better
understanding of my requirement, please have a look down below,
https://developer.mozilla.org/en-US/  home-page (not consider the
entire page and headers/footers as-well).
https://developer.mozilla.org/en-US/docs/Learn/HTML  when you
open it, only focus on body of a web-page, I need the same
“CONTENT-STYLINg” for my contents-part only (2nd and 3rd PAGES).
https://www.dofactory.com/css  pick the contents from here and I
also share contents from my-end as-well in shared-drive (2nd PAGE).
https://www.dofactory.com/html  pick the contents from here and I
also share contents from my-end as-well in shared-drive (2nd PAGE).
https://www.dofactory.com/javascript  pick the contents from here
and I also share contents from my-end as-well in shared-drive (3rd
PAGE).
https://www.dofactory.com/javascript  consider right-menu bar of
this as-well for HTML/CSS/JAVASCRIPT contents-section (2nd and 3rd
PAGES).
4th PAGE, go-with below points what I mentioned already and here is
the another-link for the same for getting an idea,
https://www.geeksforgeeks.org/console-in-javascript/
5th PAGE, go-with below points what I mentioned already and discuss
the headers section with me when needed.
1st PAGE, A PROPER DISCUSSION IS A MUST AND YOU ARE REQUIRED
TO GO AS-PER MY CONTENTS AND INTEREST AND POINTS ALREADY
MENTIONED BY ME.
6th PAGE, THIS SECTION DEPICITS A DIAGRAMATIC APPROACH OF
MINE.
Now, it is very clear from the above lines that my website is a “simple
informative website” with an aim to give information following an
entirely new style.
MY fIRST wEbPAgE should be a Welcome-Page where “a formal
introduction”, should be their kindly show me the content first in that
respect; below that a link for my Android Application to be their (This
part is not needed on urgent basis, I want to have my website fully
designed and fully operable and completely built {in every sense} as-
per my desire); below that link of my YouTube-channel to be their
(name: “essenceoftoday”, my website name: “essenceoftoday.com”);
no abouts-us and contact-us section is needed, kindly achieve the
same on introduction-part only and for contact, mention only at the
Footer-Section, my firm’s detail (name, G.S.T. No., kind of drug-license
holder details and D/L no.)

MY SECONd ANd ThIRd wEbPAgE here contents related to {“CSS,

CSS3”(ALL PROPERTIES SHOULD BE COVERED WITH SINGLE VALUE
PROPERTY AND MULTIPLE-VALUES PROPERTY) AND HTML [4,5](2nd
page)} and JAVASCRIPT(3rd page, JAVASCRIPT-CONSOLE INTEGRATION
SHOULD BE DONE HERE-ONLY) should be placed using any text-editor
on a web-page, the background should be very-light and elegant in
nature (use white-gold and white-silver as-per choice), and use
https://developer.mozilla.org/en-US/docs/Web for content-styling.
I want a pre-defined CSS-Styling (styling should be simple and same
behind every content) where I later-on add more headers and more
contents as-per my interest on very ‘THIRD’ page of my website.

MY fOURTh wEbPAgE very important part of my website where

TEMPLATES should be placed on a web-page only covering CSS3 with
all its properties, with multiple tagging-features (just-like WIKIPEDIA)
to give more-interactivity and at-last follow below script of mine,
since here output of CSS/CSS3 along-with the CODE should be there to
show on web-page please go-through,
 A responsive CSS coding measuring width and height of any
screen-size at the start is first-task.
 Then, displaying a point at the middle of the screen displaying its
co-ordinates as the second-task.
 Then, displaying box on that point is the third-task, where useful
properties should be used.
 Then, using that same box, expand the CSS coding in a manner
where TOPMENUBAR, LEFTSIDEBAR, MIDDLEPORTION,
RIGHTSIDEBAR and FOOTERSECTION are going to be covered.
 At the very last, a predefined CSS-Styling is needed to showcase
PROFILE-FEATURE CARDS-FEATURE EFFECTS SHADING 2D/3D-
ANIMATION AND USAGE OF MEDIA-QUERIES AND OTHER
ANIMATION PROPERTIES TO COVER.
 How WEB-API is going to integrate needs a discussion on that.
MY fIfTh wEbPAgE following a link
https://thapatechnical.shop/blogs to get the header-details only, give
me a predefined CSS styling for the same.
MY SIXTh wEbPAgE following a link Dated: 18th Dec. 23
https://developer.mescius.com/blogs/create-great-diagrams-using-
css-grid-layouts I described the same on SECOND-PAGE, needs to
include HTML TAG <SVG> and CSS like that of above link so-that when
I upload contents, it automatically creates BLOCK-DIAGRAM.
Contents should start with the proper installation of software steps,
proper installation of programming-languages, full details of
command-prompt and windows-bash, full installation of LINUX-UNIX-
UBUNTU Kernel steps and miscellaneous other-contents.

FURTHER DISCUSSION IS NEEDED ON VIDEO-CALLING

Please, discuss other details with me over the phone-call or Google-

Meet to prepare the final Requirement Design from your end and
share the best Price-Quotation as-per your suitability.
I’m not imposing any early time-limit to my project, but every-week
feedback is required from your developer’s team.
FULL DOCUMENTATION OF THE PROJECT IS ALSO CONSIDERED TO BE
THE MANDATORY PART OF THE PROJECT ACQUISITION AND ONCE
WORK START THEN DOCUMENTATION WOULD ALSO START.
When I’m enrolled with your company, then gave me a virtual-space
so-that I could share my valuable ideas with your team for the benefit
of my website. Kindly, make sure that the entire coding should be
very-clear in understanding by me and creation of project-folders
should be done in non-ambiguous and relatable to each-other manner
and there is a need to create a pre-defined styled-page which later-on
filled by contents and thus, website could be extend with no code-
breaking phenomenon and also SSL should be there for proper Web-
Security and in last-part of the website heading of the menu-bar are
required to discuss with me.

I NEED A BLUEPRINT FROM YOURS END FOR MY WEBSITE.

Thanks.
Regards,
Rachit Mathur
+91-9643379833
[email protected]

Is it possible to include a tiny piece of assembly code in

a C program so I can improve the performance of the
program?

It’s certainly possible. However, the odds are against you if you’re using a mainstream
processor—any x86, for example—and a modern compiler. The odds are even further
against you if you can instead rely on libraries that are optimized by experts.

Now, if you’re using an embedded microcontroller or other esoteric processor, I’ve found
that the compilers for those devices are often not as finely tuned as the compilers for x86
and ARM. In all likelihood, though, that’s not what you’re using.

To give you an idea of what I mean in the microcontroller space, consider this really, really
simple example I extracted from one of my PIC24H projects:
 1. int ftl_is_hot_vblk( int16_t vblk ) {
2. return vblk < 0x22;
3. }
The compiler produced this assembly:

1. _ftl_is_hot_vblk:
2. .set ___PA___,1 ;
3. mov #33,w4 ;, tmp46
4. mov w0,w5 ; vblk, vblk
5. mov #1,w0 ;, tmp45
6. sub w5,w4,[w15] ; vblk, tmp46
7. .set ___BP___,50
8. bra le,.L4 ;
9. clr w0 ; tmp45
10. .L4:
11. return
That’s just waaaay too much code for what this function needs to do. It has lots of
redundant MOV instructions, for example. It could have been 4 instructions, of which only 3
execute:
1. _ftl_is_hot_vblk:
2. MOV #33, W1
3. CMPSGT W0, W1 ; Compare and skip if greater than.
4. RETLW #1, W0 ; Return and load 1 into W0
5. RETLW #0, W0 ; Return and load 0 into W0
The output from this compiler looks like that throughout: just good enough, but not very
good.

Now, did I replace this function with assembly code? Heck no. It wasn’t performance critical.
In fact, the vast majority of the FTL (flash translation layer) and filesystem above it remained
in C, because they were fast enough.

And, by leaving it all in C, the compiler was free to inline and optimize across the whole file.
This particular function likely got inlined the few places it got called and optimized into the
surrounding code. If I’d written it in assembly, I’d lose that.

I did move some pieces, such as block CRC and all of the low-level SPI drivers and serial
drivers to assembly, though, as they were very performance sensitive. Block CRC in
particular needed to rely on some special table-lookup instructions to make the most of this
MCU. (Side note: My serial drivers used polling, as in my particular situation I could not
tolerate interrupts most of the time, and I wanted one method for serial I/O everywhere.)

I also moved some bits to assembly where the compiler simply generated wrong code, such
as memset(buffer, 0xFF, sizeof(buffer)) filling a buffer with 0xFEFF instead
of 0xFFFF.
But let’s take that code example above and compile it for x86.
 1. _ftl_is_hot_vblk:
2. LFB0:
3. xorl %eax, %eax
4. cmpw $33, %di
5. setle %al
6. ret
You’re really not going to do much better than that. And all my comments regarding
inlining and big-picture compiler optimization still apply.

Inlining is just the tip of the iceberg. Compilers can do all sorts of crazy transformations
when presented with an entire program at compile time that would be a bad idea for you to
apply manually to the source. I’m talking about transformations that, if you applied them
manually, would make your code significantly harder to follow or maintain, and will make it
far less adaptable in the future.

For example, the compiler might figure out “Function X is always called with either 1 or 2 as
the second argument. I will make two copies and optimize them for the two cases and
delete the original.” It might replace whole loops and function calls with a single constant. It
might flatten 5 or 10 functions into one huge function and reorder the control flow
dramatically.

You have to measure and analyze carefully to understand what the final code looks like to
even begin to know where further optimization could help. And that’s before you ever get
to assembly code.

Where the big wins often come are with heavy compute loops. Those take some real skill to
optimize. Chances are, if you have those skills, you know it. You can get really far by telling
the compiler everything you know about the inputs to the code, alignment of variables, loop
counts, pointer aliasing (restrict) and so on. At the next level, you can use compiler
extensions (intrinsic, pragmas, vector data types, etc.) to push it further.
If you tap that out and still want to try assembly, then it’s time to really dig into the
instruction set. If you’re on a honking modern x86, you might look up Agner Fog and his
optimization guides. There are hundreds of pages of fiddly information for many different
flavors of x86. The first thing you’ll realize is: You’re going to end up optimizing for a
particular variant of x86, or a small set of x86 variants. Someone else with a different version
of the processor isn’t going to see the same results you do.

It could be worth it! Chances are, if you’re in environment where it is worth it, you’ll know.

99.44% of the time or more, it probably isn’t. You should be reaching for a library that’s
already done the work for you. You’ll want your code to run well on the next generation of
processors, and to be portable to different instruction sets. You’ll want other programmers
to be able to maintain the code. You’ll want to be able to debug the code easily.
The other thing to keep in mind: My answer above only really considered one processor,
running a compute-bound operation on that single processor, and it made the tacit
assumption that you’ve already picked the best possible algorithm.

The reality is that your real performance issues could lie elsewhere.

There are other optimizations that might be more important:

 Better algorithms.
 Better memory layout.
 Better choice of data types.
 Better threading/multiprocessor synchronization.
 Moving the code to run on a GPGPU.
 Better I/O management.
 etc., etc., etc.

For an extreme example: The last big program I wrote at my previous $DAYJOB gave a
roughly 107×107× speedup over the program it replaced (possibly more) just by using
much better algorithms. I say possibly more, as the new program was able to tackle
dramatically larger problems that I wouldn’t even try giving to the program it replaced and
did so in seconds or less. Given that its predecessor slowed down exponentially with
increasing problem size, I’m confident that I could demonstrate larger speedup factors if I
wanted to.
The speedup was large enough that it fundamentally changed our strategy for how to
deploy that tool. This was a tool for generating test cases to test a CPU in development. We
could generate new test cases about as fast as we could run them, and much more complex
cases at that.

Did I use assembly to get there? No! Assembly language would only have gotten in the way.
The whole program was bog-standard C++14.

I haven’t written any meaningful amount of x86 assembly in over 20 years. I have written
assembly for multiple different embedded processors, including DSPs and microcontrollers.
But I write less every day.

With the embedded processor I use at $DAYJOB, I’ve written precious little—perhaps a
couple dozen lines in 2.5 years. Mostly, it was in the context of optimizing some primitives
to assist the compiler folks so that the compiler would generate better code. That way, we
could avoid writing any more assembly code.

Why is website development so important?

Website development is incredibly important in today's digital world for various reasons,
impacting both individuals and businesses:

For Individuals:

 Personal branding and online presence: Building a website allows you to

showcase your skills, experience, and portfolio to potential employers or
clients. It acts as your digital resume and gives you control over your online
identity.
 Connecting with communities and learning: Websites can be platforms
for sharing your passion, connecting with like-minded individuals, and
building online communities. You can create blogs, forums, or online
courses to contribute to your field and learn from others.
 Earning income: Websites can be used to generate income through
various means, like freelancing, selling online courses or products, or
monetizing content with advertising.

For Businesses:

 Establishing online presence and credibility: A professional website

creates a legitimate online presence for your business, enhancing brand
image and building trust with potential customers. It acts as your virtual
storefront, accessible 24/7.
 Marketing and reaching a wider audience: Websites are powerful
marketing tools. You can use SEO optimization to improve your search
engine ranking, run targeted online advertising campaigns, and connect
with potential customers globally.
 Providing information and customer service: Websites offer a platform
to share information about your products and services, answer customer
questions, and handle support requests efficiently. This improves customer
experience and builds loyalty.
 Boosting sales and revenue: With e-commerce functionality, websites
enable businesses to sell products and services directly online, expanding
their reach and increasing sales potential.
 Building brand identity and differentiation: A well-designed website
reinforces your brand message, values, and personality, setting you apart
from competitors and attracting the right target audience.

Overall, website development is crucial for success in the digital age, providing a
platform for individuals and businesses to reach their goals, engage with audiences,
and achieve online visibility.
Remember, whether you're an individual seeking to share your expertise or a business
looking to expand your reach, a well-developed website can be a powerful tool to drive
success in the online world.

What is Website development?

Website development is the broad term for everything involved in creating a website. It's
like building a house! Just like building a house involves various stages like planning,
drafting, construction, and furnishing, website development also encompasses several steps:

1. Planning and Design:

 Concept and purpose: Identifying the website's goal and target audience.
 Information architecture: Structuring the website's content and
functionality.
 User interface (UI) design: Creating the visual layout and elements for a
user-friendly experience.

2. Development:

 Front-end development: Coding the website's visible elements using

HTML, CSS, and JavaScript, making it interactive and visually appealing.
 Back-end development: Building the website's functionality and logic
using server-side programming languages like Python or PHP, often
involving databases and web servers.

3. Testing and Deployment:

 Testing: Ensuring the website functions properly across different devices

and browsers.
 Deployment: Launching the website onto a web server and making it
accessible online.

4. Maintenance and Updates:

 Monitoring performance: Checking website traffic, user behavior, and

resolving any technical issues.
 Adding new features: Continuously improving the website based on user
feedback and changing trends.
Website development can be complex, involving various programming languages, tools,
and frameworks. Depending on the website's size and complexity, different specialists like
front-end developers, back-end developers, database administrators, and content creators
might be involved.

To get a better understanding, here's an analogy:

 Imagine a bakery website. The baker (developer) uses a recipe (code) to

bake a delicious cake (website). Different ingredients (programming
languages) are used for the cake base (front-end), filling (back-end), and
decorations (UI design). After baking, the cake is displayed in the shop
window (deployment), and the baker keeps an eye on its freshness and
taste, adjusting as needed (maintenance).

I hope this explanation gives you a basic idea of what website development is all about! If
you have any further questions about specific aspects, feel free to ask.

In website development, important factors include a user-friendly design, responsive layout,

clear navigate optimized performance, robust security measures, and engaging content. It's
crucial to consider both the frontend (what users see) and backend (functionality and
server-side operations) aspects for a well-rounded website. Regular updates and testing are
also key to ensuring a seamless user experience.

Certainly! In addition to the mentioned factors, consider the following:

𝟭. 𝗠𝗼𝗯𝗶𝗹𝗲 𝗼𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻: Ensure your website is accessible and functions well on various
devices, especially mobile phones.

𝟮. 𝗦𝗲𝗮𝗿𝗰𝗵 𝗘𝗻𝗴𝗶𝗻𝗲 𝗼𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻 (𝗦𝗘𝗢): Optimize content and code for search engines to
improve visibility and rankings.

𝟯. 𝗦𝗰𝗮𝗹𝗮𝗯𝗶𝗹𝗶𝘁𝘆: Design the website to handle growth in terms of traffic, content, and features
without compromising performance.

𝟰. 𝗖𝗿𝗼𝘀𝘀 -𝗕𝗿𝗼𝘄𝘀𝗲𝗿 𝗰𝗼𝗺𝗽𝗮𝗯𝗶𝗹𝗶𝘁𝘆: Test and ensure your website works consistently across
different web browsers.

𝟱. 𝗟𝗼𝗱𝗶𝗻𝗴 𝘀𝗽𝗲𝗲𝗱: Optimize images and code to minimize loading times, as slow websites
can lead to a poor user experience.

𝟲. 𝗖𝗼𝗻𝘁𝗲𝗻𝘁 𝗺𝗮𝗻𝗮𝗴𝗲𝗺𝗲𝗻𝘁 𝘀𝘆𝘀𝘁𝗲𝗺 (𝗖𝗠𝗖 :Choose a suitable CMS for easy content updates
and maintenance.
𝟳. 𝗔𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆: Design with inclusivity in mind, ensuring that people with disabilities can
navigate and use the site effectively.

𝟴. 𝗔𝗻𝗮𝗹𝘆𝘁𝗶𝗰 𝗶𝗻𝘁𝗲𝗴𝗿𝗮𝘁𝗶𝗼𝗻: Implement tools like Google Analytics to track and analyze user
behavior, helping to make informed decisions for improvements.

𝟵. 𝗦𝗼𝗰𝗶𝗮𝗹 𝗺𝗲𝗱𝗶𝗮 𝗶𝗻𝘁𝗲𝗴𝗿𝗮𝘁𝗶𝗼𝗻: Enable easy sharing of content and connect your website with
social media platforms.

𝟭𝟬. 𝗦𝗲𝗰𝘂𝗿𝗶𝘁𝘆 𝗺𝗲𝗮𝘀𝘂𝗿𝗲𝘀: Implement SSL certificates, secure coding practices, and regular
security audits to protect against vulnerabilities and data breaches.

𝟭𝟭. 𝗨𝘀𝗲 𝗳𝗲𝗲𝗱𝗯𝗮𝗰𝗸 𝗮𝗻𝗱 𝘁𝗲𝘀𝘁𝗶𝗻𝗴: Collect user feedback and conduct testing to identify areas
for improvement and ensure a positive user experience.

Remember, a successful website is a combination of a visually appealing design, smooth

functionality, and a focus on meeting the needs of your target audience.

What are the top 20 websites that teach PPC?

“Pay-per-click (PPC) is an internet advertising model used to drive traffic to
websites, in which an advertiser pays a publisher (typically a search engine,
website owner, or a network of websites) when the ad is clicked.[1][2] “

Here are 20 websites that have historically provided valuable PPC resources:

1. Google Ads Help Center: Google's official resource for learning about
Google Ads, offering articles, tutorials, and certification programs.
2. Bing Ads Learning Center: Microsoft Advertising's official resource for
learning about Bing Ads (now Microsoft Advertising), including courses and
certification.
3. WordStream: Provides a range of PPC-related resources, including
educational content, webinars, and tools.
4. PPC Hero: Offers in-depth articles, whitepapers, and webinars on PPC
topics, with a focus on Google Ads.
5. HubSpot Academy: Features free courses on various aspects of digital
marketing, including PPC advertising.
6. SEMrush Academy: Provides PPC-related courses, webinars, and
certification programs, along with other digital marketing topics.
7. DigitalMarketer: Offers training and resources on various digital marketing
strategies, including PPC.
 8. Unbounce: Focuses on landing page optimization and conversion rate
optimization (CRO), which are closely related to PPC.
9. Kissmetrics Blog: Provides articles on PPC, analytics, and user behavior,
offering valuable insights for digital marketers.
10. Search Engine Land: Offers articles, news, and in-depth coverage of search
engine marketing and PPC.
11. LinkedIn Learning: Provides various courses on PPC advertising and
related topics.
12. CXL Institute: Known for conversion optimization and A/B testing courses,
which are essential for PPC success.
13. Udemy: Features a variety of PPC courses, often created by industry
experts.
14. Coursera: Offers courses on digital marketing and PPC from universities
and institutions worldwide.
15. LinkedIn Ads Learning: LinkedIn's official resource for learning about
LinkedIn advertising, including sponsored content and InMail ads.
16. Certified Knowledge: Offers PPC training and resources, particularly
focused on Google Ads.
17. ClickZ: A digital marketing resource with articles and guides on PPC and
other online advertising strategies.
18. RocketClicks Blog: Provides articles and insights on PPC management,
strategies, and tools.
19. AdEspresso Blog: Focused on Facebook and Instagram advertising,
including tips on PPC campaigns on these platforms.
20. Hanapin Marketing Blog: Offers PPC insights and resources, including tips
on Google Ads and other platforms.

Remember that the quality and relevance of resources can change over time, so it's a good
practice to explore multiple sources and stay up-to-date with the latest trends and best
practices in PPC advertising. Additionally, consider checking for new courses and platforms
that have emerged since my last knowledge update.

What are the names of folders which are required to

run a Python Programming Language?

No universal set of folders is required to run Python programs in Python. However,

the following folder structures or directories are frequently used in Python projects:

 Project Folder/Directory: This folder contains your Python scripts and

related files for a particular project.
  Folder containing the source code: This folder, usually called src or source,
contains the Python files or modules that make up your project's codebase.
 Data Folder: Also known as data, this folder stores datasets, files, and
resources used by your Python scripts.
 When using virtual environments (e.g., virtualenv or venv), a folder called
venv, env, or any other custom name contains the isolated Python
environment for your project.
 Configuration Folder (Optional): This folder may contain configuration files
or project-specific settings. It might be called configuration or something
similar.
 Tests Folder (Optional): A folder named tests may contain unit tests or test
suites for your Python code for testing purposes.

Python doesn't require specific folders to run, but it does rely on key files and
directories:

1. Python Installation Directory:

 Contains the core Python interpreter and standard library modules.

 Location varies by operating system: Windows: Typically,
C:\Python3xmacOS: /Library/Frameworks/Python-
Framework/Versions/3.xLinux: /user/local/bin/python3
2. Standard Library:

 Subdirectory within the installation directory, housing a vast collection of

built-in modules for various tasks.
 Path: python3x/Lib
3. Scripts Directory:

 Optional directory where you can place Python scripts to be executed

directly from the command line.
 Often added to system's PATH environment variable for easy access.
 Location varies: Windows: C:\Python3x\ScriptsmacOS/Linux: /user/local/bin
4. Virtual Environments (Optional):

 Isolated environments for project-specific dependencies to prevent

conflicts.
 Created using tools like venv or virtualenv.
 Each virtual environment has its own Lib and Scripts directories.
5. Your Project Directories:

 You can create custom directories to organize your Python scripts and
modules.
  Python can access files within these directories through relative or absolute
paths.
Key Points:

 Python primarily relies on its installation directory and standard library for
functionality.
 Scripts directory is convenient for executing scripts directly.
 Virtual environments are recommended for managing project
dependencies.
 You have flexibility in organizing your own project files and directories.
 However, it is generally good practice to keep your Python scripts in a
separate folder from your other files. This will help to keep your code
organized and easy to find.
Here is a suggested folder structure for a Python project:

1. project/
2. ├── data/
3. │ ├── raw/
4. │ └── processed/
5. ├── docs/
6. │ ├── README.md
7. │ └── LICENSE
8. ├── scripts/
9. │ └── main.py
10. └── tests/
11. └── test_main.py
The data/ folder will contain any data that your script needs to run. The docs/ folder will
contain any documentation for your script. The scripts/ folder will contain your Python
scripts. The tests/ folder will contain any unit tests for your script.

In Python, there is no strict requirement for specific folders to run the programming
language itself. However, there are some common conventions and standard folders that
you might encounter in Python projects. These are not mandatory but are often used for
organizing code and resources in a standard way:

1. __pycache__: This folder is automatically generated by Python to store

compiled bytecode files (.pyc) for performance optimization. It's typically
found in the same directory as the source code.
2. venv or virtualenv: Virtual environments are often created in a folder
named venv or virtualenv. These folders contain a isolated Python
environment with its own installed packages and dependencies.
3. tests: Some projects have a folder named tests that contains unit tests
or test suites for the code in the project.
 4. docs: If documentation is included with the project, it might be stored in a
folder named docs.
5. src: In larger projects, you might find a src (source) folder that contains
the main source code of the project. This is often used to distinguish
project code from test code.
6. data or assets: Folders with names like data or assets may be used to
store data files or other non-code resources.
7. bin or scripts: This folder may contain executable scripts, or command-
line utilities associated with the project.
Remember that the organization of a Python project can vary based on the project's size,
purpose, and the preferences of the developers. For smaller scripts or projects, you might
not find all these folders, and the code may be organized differently. It's always a good
practice to follow a consistent project structure and use tools
like virtualenv or pipenv for managing dependencies.

What are the names of folders which are required to

run a C/C++ Programming Language?

In C and C++ programming, there are no specific mandatory folders required to run the
programming language itself. Unlike interpreted languages like Python, C and C++ are
compiled languages, and the resulting executable files can be run independently.

However, there are some common conventions and folders that might be present in C and
C++ projects for organizational purposes. Here are a few examples:

1. src: This folder often contains the source code files. The name "src" is short
for "source."
2. include: Header files (files with a .h extension) that are included in the
source code are often placed in an "include" folder.
3. bin or build: This folder might be used to store the compiled
binary/executable files.
4. lib: If the project involves libraries, the compiled library files (.lib, .a,
or .so files) might be placed in a "lib" folder.
5. obj or build: Intermediate object files generated during the compilation
process might be stored in a folder named "obj" or "build."
6. docs: Documentation related to the project, such as user manuals or API
documentation, might be placed in a "docs" folder.
7. tests: Unit tests or test suites for the project might be organized in a
"tests" folder.
 8. data or resources: Folders for storing data files or resources used by the
program might be named "data" or "resources."
It's important to note that the organization of C and C++ projects can vary significantly
based on factors such as project size, build system (e.g., Makefile, CMake), and team
preferences. There's no strict standard for folder names, and developers often choose a
structure that makes sense for their specific project.

What is the difference between web-console and

browser-console?

While both "web-console" and "browser-console" might sound similar, they refer to distinct
entities in the world of web development:

1. Web console:

 Concept: A generic term for a console interface within a web application or

website itself.
 Purpose: Used for debugging, logging messages, interacting with the
application's internal state, and potentially even running custom JavaScript
code specific to that application.
 Access: Typically accessed through the application's user interface or
developer tools specific to that application.
 Example: Imagine a music streaming app having a built-in console for
developers to test features or diagnose playback issues.
2. Browser console:

 Concept: A built-in tool present in web browsers like Chrome, Firefox,

Safari, etc.
 Purpose: Used for inspecting web pages, debugging JavaScript code,
monitoring network requests, and analyzing performance.
 Access: Available through browser developer tools like Chrome DevTools
or Firefox Developer Tools.
 Example: Opening the DevTools in Chrome and going to the "Console"
tab.
Key Differences:

 Scope: Web consoles are specific to individual applications, while browser

consoles are universal across all web pages within a browser.
 Focus: Web consoles primarily deal with the application's internal workings,
while browser consoles focus on broader webpage analysis and debugging.
  Access: Web consoles might require specific triggers or access controls
within the application, while browser consoles are readily available through
developer tools.

WESBITE STRUCTURE AND MAIN-POINTS OF MY

WEBSITE

!!!NO COMPROMISE WITH STUDIES!!! (IT SHOULD BE WROTE ON TOP OF MY HOME

WEBPAGE JUST BELOW MENUBAR ON WELCOME PAGE USING EVIL-FONT WITH BLOOD-RED FONT-COLOR )

Dated: 2nd Jan. 24;3rd Jan. 24;4th Jan. 24;5th Jan. 24;6th Jan. 24;7th Jan.
24;11th Jan. 24;16th Jan. 24;17th Jan. 24

My website’s welcome page should be the index page, no

need to create a separate page for that. I hope CSS-
DESIGN IS IMPLICIT AND YOU USE THE DESIRED CSS AS-
PER THE REQUIREMENT.

DESIGN THE PAGE WHERE THE TOP CENTRE PAGE

CONTAINS HEADERS LIKE ABOUT-US, THEN CONTACT-
US, THEN CONTENTS-SECTION, THEN TEMPLATES-
SECTION, THEN BLOGS SECTION, THEN BLOCK-
DIAGRAM SECTION, HOW YOU INCLUDE THE
ADMINISTRATION-PANEL, I WILL LEAVE IT ON YOU
ONLY.
Below, please write below statement, “Welcome Folks to this Informative Website,
where I’m uploading contents from different subjects in time-to-time basis which allows you to
grasp the old and new concepts in a more detailed and in meaningful manner and I want your
support to make this a website in growing from Informative Website to Web
Education Platform”.
Also provide me a space, only on INDEX-PAGE of my website for advertisement purpose, and I want
space where I upload “NEWS SECTION” relating to my contents and other purposes.
Space for Blog Activities.
Also, I Want Digital-Clock, Analog-Clock, Units {Currency, etc.} Converter and a Calendar on my
Index-Page as-well.
THEN MENTION A LINK WHERE MY ANDROID-APPLICATION DETAILS SHALL BE MONTIONED. This
Link should be shown using a separate CSS-Style manner where, below the link, this is going to be
displayed, that is, Only One Interview Question is their which is “I’m asking one question from you
my dearest students that will you find yourself capable enough to contribute to my effort by
enrolling yourself with me?”, with logo of my website at the middle inside rounded border.
WEBSITE NAME: essenceoftoday.com
THEN MENTION THE DETAILS OF MY YOUTUBE CHANNEL LINK DETAILS.

About-Us and Contact-Us should be on index-page only.

ABOUT-US
Needs to mention MESSAGE, PLEDGE, AIM, GOALS, VISION, and
MISSION of mine.

MESSAGE
I want to give only one message to all of my visitors who visits my website,
is that now time is come to change the way of studying, we have plenty of
schools, colleges, universities, libraries, teachers and professors but no
idea of studying, since it’s a big struggle to understand a single concept
and it takes a time specific to student understandings and we don’t know
how much time is going to take, since for school students from classes 1st
Standard to 12th Standard, load of studies increases. Here, my android-
application will ask anyone who wants to contribute to my effort, and
he/she could enroll themselves.

PLEDGE
My only pledge is to ensure the lifetime connection (I’m looking for
CROWDFUNDING for my effort) between the person and me, who is going
to devote his/her valuable time to prepare contents with me for my website
as-per my direction.

AIM
My Aim is to make this website reach the maximum number of learners
who believe that the contents of this website would become useful for them
to learn concepts and it might also help them to create their school
projects and school notes for their school homework and examination
related studies and picking important topics from the website on regular
basis.

GOALS
My Goals is to add the contents in my website in time-to-time basis as-per
my understanding of concepts and my style of detailing.

VISION
My Vision is to look forward to encouraging the school students to connect
with me via. my MOBILE-APPLICATION and provide their helping-hands
in designing the PROBLEMS and the SOLUTIONS as-per the SUBJECTS.

MISSION
My Mission is to change the current style of teaching and learning and way
of studying.

CONTACT-US
Only at the footer-section of the INDEX-PAGE, write below details,
 My Medical Shop’s Name: Messer(M/s) P.P. Pharma
 GST#: 09AKKPM0345A2ZH
  Drug License#: 37R/20B/1998, 37R/21B/1998
 Renewed Drug License#: UP8020B001396, UP8021B001391
 E-Mail ID: [email protected]
 Mobile: +91-9643379833
 Education and Stream and Passing Year: Bachelor’s in Technology in
Computer Science and Engineering, passed in 2008.
 College and University: Anand Engineering College affiliated to
Uttar Pradesh Technical University, Lucknow, Uttar Pradesh (West),
India

“In between, About-us and Contact-us you give me a

predefined-CSS so-that I upload definition related
contents on the WEB-PAGE, and when “read-more” link
comes, then a separate web-page should open by the
name of the TOPIC of definition and again CSS is needed
to display the related contents in responsive manner, that
is I want CSS which give me MAIN-HEADER, SUB-
HEADERS, AND CONTENTS FOLLOWING FULL ENGLISH
GRAMMAR PUNCTUATION RULES to follow, proper
paragraph with indentations etc. CSS is also needed to
help me to use numbering in-case it is going to be useful
to list details for sub-contents of contents.”

---------------------- INDEX PAGE DESIGN FINISHED-------------------------

SECOND SECTION CSS DESIGN

This page is content page where the final decision of mine is to have three separate headers
at top, by the name,
  HTML/HTML5-STRUCTURE
 CSS/CSS3/TAILWIND-CSS/SASS(SCSS)
 JAVASCRIPT(ES6)

HTML/HTML5-STRUCTURE

Under this Page, I want to display only HTML/HTML5 properties, tags and other related
terminologies which define a HTML-Structure and for that prepare a CSS Styled Page
which displays the contents according to my requirement.
Here, my target is to cover all the tags, but if you gave me the desired-CSS-Styled Web-
Page with few contents uploaded on your end, then I will upload all the remaining contents
by my own also.

CSS-PROPERTIES{CSS3/TAILWIND/SASS(SCSS)}

Under this Page, I want to display CSS Properties and for that I need a CSS from your end.
Here, my target is to cover each-&-every CSS-Properties, but if you gave me the desired-
CSS-Styled Web-Page with few contents uploaded on your end, then I will upload all the
remaining contents by my own also. Here, you could take the help of ‘dofactory website’ to
get all the contents. If you want to follow their CSS-Style for all the three headers, then It’s
okay for me. If you want to follow your own style, then any common style is also fine with
me.

JAVASCRIPT SYNTAX, VARIABLES, FUNCTIONS,

JSON ETC.

Under this Page, I want to display JavaScript Coding related contents and for that I need
CSS from your end.
Here, my target is to cover JavaScript under below points,
1. JAVASCRIPT VARIABLES, SYNTAX AND DATA-TYPES
2. JAVASCRIPT OPERATORS AND CONDITIONAL STATEMENTS
3. JAVASCRIPT LOOPS AND STRINGS
4. JAVASCRIPT ARRAYS
 5. JAVASCRIPT FUNCTIONS AND METHODS
6. JAVASCRIPT DOCUMENT OBJECT MODEL (JAVASCRIPT DOM)
7. JAVASCRIPT EVENTS
8. JAVASCRIPT CLASSES AND OBJECTS AND JSON
9. JAVASCRIPT CALLBACKS
 JAVASCRIPT PROMISES
 JAVASCRIPT ASYNC AWAIT
 JAVASCRIPT FETCH API
 JAVASCRIPT PROJECTS RELATED CONTENTS
 JAVASCRIPT OUTPUT DISPLAY ON JAVASCRIPT CONSOLE
 JAVASCRIPT RUNNING ON CHROME BROWSER
 FULL DETAILS OF GOOGLE CHROME
 EVERY DETAILS OF ALL WEB BROWSERS
 HOW JAVASCRIPT USED IN FRAMEWORKS
 EVERY VERSION OF JAVASCRIPT
So, on the page, the left-side is going to display JavaScript modules, keep that in mind
while preparing CSS, on same page, display Steps of Syntax on the right-side of the
webpage and on the middle portion of webpage, CSS for contents is needed and this
concept-design is needed in HTML/CSS/JavaScript. Follow
“https://developer.mozilla.org/enUS/docs/Learn/Getting_started_with_the_web/JavaScript
_basics” Website for JavaScript/HTML/CSS Contents and their respective placing on the
webpage.

---------------------- SECOND-SECTION DESIGN FINISHED------------------

NOTE

“Provide me the Same CSS-Styled-Web-Page for my further contents upload from

another different-different domain whenever I want, MEANS HEADERS
AUTOMATICALLY ADDS ON MENUBAR RESPONSIVELY AND CONTENTS DISPLAYED
RESPONSIVELY, then also I’m okay with it.”
I want a proper space where notes or rough-work could also be displayed on separate
web-page, so I’m open for discussion to discuss what sort of CSS Design could be
possible to achieve the same and the contents should have the database backup with
properly designed DATABASE-SCHEMA, database-schema should be very clear for all
my contents and for future contents as-well.
No compromise on using proper documented website structure with CSS.

THIRD SECTION CSS DESIGN

This page is dedicated to TEMPLATES-THEME, and templates here consist of only two
parts, which is DISPLAYING CSS3 PROPERTIES WITH THERE IMMEDIATE
OUTPUT on a webpage so that a visitor could be able to see how properties work.

Below, I am displaying all CSS Properties (no-description) so that it could

help you to get the idea on an easier note,
1. @charset Rule,
2. @keyframes Rule,
3. @media Rule,
4. align-content,
5. align-items,
6. align-self,
7. all,
8. animation-delay,
9. animation-direction,
10. animation-duration,
11. animation-fill-mode,
12. animation-iteration-count,
13. animation-name,
14. animation-play-state,
15. animation-function-timing,
16. backface-visibility,
17. background-attachment,
18. background-blend-mode,
19. background-clip,
20. background-color,
21. background-image,
22. background-origin,
23. background-position,
24. background-repeat,
25. background-size,
26. border,
27. border-bottom,
28. border-bottom-color,
29. border-bottom-left-radius,
30. border-bottom-right-radius,
31. border-bottom-style,
32. border-bottom-width,
33. border-collapse,
34. border-color,
35. border-image,
36. border-image-outset,
37. border-image-repeat,
38. border-image-slice,
39. border-image-source,
40. border-image-width,
41. border-left,
42. border-left-color,
43. border-left-style,
44. border-left-width,
45. border-radius,
46. border-right-color,
47. border-right,
48. border-right-style,
49. border-right-width,
50. border-top-color,
51. border-top,
52. border-top-left-radius,
53. border-top-right-radius,
54. border-top-style,
55. border-top-width,
56. border-style,
57. border-spacing,
58. border-width,
59. bottom,
60. box-shadow,
61. box-decoration-break,
62. box-sizing,
63. caption-side,
64. caret-color,
65. clear,
66. clip,
67. column-count,
68. column-fill,
69. column-gap,
70. columns,
71. column-rule-color,
72. column-rule,
73. column-rule-style,
74. column-rule-width,
75. column-span,
76. column-width,
77. content,
78. cursor,
79. counter-increment,
80. counter-reset,
81. direction,
82. display,
83. empty-cells,
84. filter,
85. flex,
86. flex-basis,
87. flex-direction,
88. flex-flow,
89. flex-grow,
90. flex-shrink,
91. flex-wrap,
92. font-family,
93. font-kerning,
94. font-size-adjust,
95. font-size,
96. font-stretch,
97. font-style,
98. font-variant,
99. font-weight,
100. grid,
101. grid-area,
102. grid-auto-columns,
103. grid-auto-flow,
104. grid-auto-rows,
105. grid-column,
106. grid-column-end,
107. grid-column-gap,
108. grid-column-start,
109. grid-gap,
110. grid-row,
111. grid-row-end,
112. grid-row-gap,
113. grid-row-start,
114. grid-template,
115. grid-template-areas,
116. grid-template-columns,
117. grid-template-rows,
118. hanging-punctuation,
119. height,
120. hyphens,
121. isolation,
122. justify-content,
123. left,
124. letter-spacing,
125. line-height,
126. list-style,
127. list-style-image,
128. list-style-position,
129. list-style-type,
130. margin-bottom,
131. margin-left,
132. margin-right,
133. margin-top,
134. max-height,
135. max-width,
136. min-height,
137. min-width,
138. mix-blend-mode,
139. mask-image,
140. object-fit,
141. object-position,
142. order,
143. outline-color,
144. outline-offset,
145. outline-style,
146. outline-width,
147. overflow-x,
148. overflow-y,
149. padding-bottom,
150. padding-left,
151. padding-right,
152. padding-top,
153. page-break-after,
154. page-break-before,
155. page-break-inside,
156. perspective,
157. perspective-origin,
158. pointer-events,
159. quotes,
160. resize,
161. right,
162. scroll-behavior,
163. cssText,
164. length,
165. parentRule,
166. table-layout,
167. tab-size,
168. text-align,
169. text-align-last,
170. text-decoration,
171. text-decoration-color,
172. text-decoration-line,
173. text-decoration-style,
174. text-indent,
175. text-justify,
176. text-overflow,
177. text-transform,
178. text-shadow,
179. top,
180. transform,
181. CSS transition property,
182. transition-delay,
183. transition-duration,
184. transition-property,
185. Unicode-bidi,
186. user-select,
187. vertical-align,
188. visibility,
189. white-space,
190. word-break,
191. word-spacing,
192. word-wrap,
193. will-change,
194. writing-mode,
195. z-index…
196. CSS-SELECTORS, look below,
197. [attribute*=value]
198. [attribute=value]
199. [attribute$=value]
200. [attribute|=value]
201. [attribute~=value]
202. [attribute^=value]
203. #id
204. *
205. active
206. after
207. before
208. checked
209. Class
210. default
211. disabled
212. element
213. element(element)
214. element, element
215. element1~element2
216. empty
217. enabled
218. first-child
219. first-of-type
220. first-letter
221. first-line
222. focus
223. hover
224. intermediate
225. in-range
226. invalid
227. lang
228. last-child
229. last-of-type
230. link
231. not
232. nth-child ()
233. nth-last-child ()
234. nth-last-of-type ()
235. nth-of-type ()
236. optional
237. only-child
238. only-of-type
239. out-of-range
240. placeholder
241. read-only
242. read-write
243. required
244. root
245. selection
246. target
247. valid
248. visited
249. CSS-FUNCTIONS, look below,
250. attr ()
251. blur ()
252. brightness ()
253. calc ()
254. circle ()
255. conic-gradient ()
256. contrast ()
257. cubic-bezier ()
258. drop-shadow ()
259. ellipse ()
260. env ()
261. grayscale ()
262. hsl ()
263. hsla ()
264. hue-rotate ()
265. inset ()
266. invert ()
267. linear-gradient ()
268. matrix ()
269. matrix3d ()
270. max ()
271. min ()
272. opacity ()
273. perspective ()
274. polygon ()
275. radial-gradient ()
276. repeating-conic-gradient ()
277. repeating-linear-gradient ()
278. repeating-radial-gradient ()
279. rgb ()
280. rgba ()
281. rotate ()
282. rotate3d ()
283. rotateX ()
284. rotateY ()
285. rotateZ ()
286. saturate ()
287. scale ()
288. scale3d ()
289. scaleX ()
290. scaleY ()
291. scaleZ ()
292. sepia ()
293. skew ()
294. skewX ()
295. skewY ()
296. translate ()
297. translate3d ()
298. translateX ()
299. translateY ()
300. translateZ ()
301. url ()
302. var ()
303. TAILWIND CSS INTERACTIVITY, look below,
304. Appearance
305. Cursor
306. Outline
307. Pointer Events
308. Resize
309. Select
310. TAILWIND CSS TRANSITION and ANIMATION, look below,
311. Transition Property
312. Transition Duration
313. Transition Timing Function
314. Transition Delay
315. TAILWIND CSS FILTERS, look below,
316. Filter
317. Blur
318. Brightness
319. Contrast
320. Drop Shadow
321. Grayscale
322. Hue Rotate
323. Invert
324. Saturate
325. Sepia
326. Backdrop Filter
327. Backdrop Blur
328. Backdrop Brightness
329. Backdrop Contrast
330. Backdrop Grayscale
331. Backdrop Hue Rotate
332. Backdrop Invert
333. Backdrop Opacity
334. Backdrop Saturate
335. Backdrop Sepia
336. HTML TAGS, look below,
337. !DOCTYPE html
338. abbreviation
339. acronym
340. address
341. anchor
342. applet
343. area
344. article
345. aside
346. audio
347. base
348. basefont
349. bdi
350. bdo
351. bgsound
352. big
353. blockquote
354. body
355. bold
356. break
357. button
358. caption
359. canvas
360. center
361. cite
362. code
363. colgroup
364. column
365. comment
366. data
367. datalist
368. dd
369. define
370. delete
371. details
372. dialog
373. dir
374. div
375. dl
376. dt
377. embed
378. fieldset
379. figcaption
380. figure
381. font
382. footer
383. form
384. frame
385. frameset
386. head
387. header
388. heading
389. hgroup
390. hr
391. html
392. iframes
393. image
394. input
395. ins
396. isindex
397. italic
398. kbd
399. keygen
400. label
401. legend
402. list
403. main
404. mark
405. marquee
406. menuitem
407. meta
408. meter
409. nav
410. nobreak
411. noembed
412. noscript
413. object
414. optgroup
415. option
416. output
417. paragraphs
418. param
419. phrase {<em> </em>}
420. pre
421. progress
422. q
423. rp
424. rt
425. rubv
426. s
427. samp
428. script
429. section
430. small
431. source
432. spacer
433. span
434. strike
435. strong
436. style
437. sub {}
438. sup {}
439. summary
440. svg
441. table
442. tbody
443. td
444. template
445. tfoot
446. th
447. thead
448. time
449. title
450. tr
451. track
452. tt
453. underline
454. var
455. video
456. wbr
457. xmp
458. HTML ATTRIBUTES, look below,
459. HTML src attribute
460. HTML alt attribute
461. HTML width attribute
462. HTML height attribute
463. HTML id attribute
464. HTML title attribute
465. HTML href attribute
466. HTML style attribute
467. HTML lang attribute
468. HTML GLOBAL ATTRIBUTES, look below,
469. accesskey
470. autocapitalize
471. autofocus
472. class
473. contenteditable
474. contextmenu
475. data-*
476. dir
477. draggable
478. enterkeyhint
479. hidden
480. id
481. inputmode
482. is
483. itemid
484. itemprop
485. itemscope
486. itemtype
487. lang
488. nonce
489. part
490. slot
491. spellcheck
492. style
493. tabindex
494. title
495. translate
496. HTML EVENT ATTRIBUTES {WINDOW EVENT ATTRIBUTES}, look below,
497. onafterprint
498. onbeforeprint
499. onbeforeunload
500. onerror
501. onhashchange
502. onload
503. onoffline
504. ononline
505. onpageshow
506. onresize
507. onunload
508. HTML EVENT ATTRIBUTES {FORM EVENT ATTRIBUTES}, look below,
509. onblur
510. onchange
511. oncontextmenu
512. onfocus
513. oninput
514. oninvalid
515. onreset
516. onsearch
517. onselect
518. onsubmit
519. HTML EVENT ATTRIBUTES {KEYBOARD EVENT ATTRIBUTES}, look below,
520. onkeydown
521. onkeypress
522. onkeyup
523. HTML EVENT ATTRIBUTES {MOUSE EVENT ATTRIBUTES}, look below,
524. onclick
525. ondblclick
526. onmousedown
527. onmousemove
528. onmouseout
529. onmouseover
530. onmouseup
531. onwheel
532. HTML EVENT ATTRIBUTES {DRAG EVENT ATTRIBUTES}, look below,
533. ondrag
534. ondragend
535. ondragenter
536. ondragleave
537. ondragstart
538. ondrop
539. onscroll
540. HTML EVENT ATTRIBUTES {CLIPBOARD EVENT ATTRIBUTES}, look below,
541. oncopy
542. oncut
543. onpaste
544. HTML EVENT ATTRIBUTES {MISCELLANEOUS EVENT ATTRIBUTES}, look below,
545. ontoggle
546. HTML DOM COMPLETE REFRENCE, look below,
547. console.count()
548. HTML DOM ATTRIBUTE OBJECT : METHODS
549. getNamedItem()
550. item()
551. removeNamedItem()
552. HTML DOM ATTRIBUTE OBJECT : PROPERTIES
553. isId
554. length
555. specified
556. value
557. HTML DOM CONSOLE OBJECT : METHODS
558. assert()
559. clear()
560. count()
561. error()
562. group()
563. groupCollapsed()
564. groupEnd()
565. info()
566. log()
567. table()
568. time()
569. timeEnd()
570. trace()
571. warn()
572. HTML DOM CONSOLE OBJECT : DOCUMENT OBJECT PROPERTIES
573. activeElement
574. baseURI
575. body
576. cookie
577. characterSet
578. defaultView
579. designMode
580. doctype
581. documentElement
582. documentMode
583. domain
584. fullscreenElement
585. head
586. images Collection {<img></img> or <img />}
587. implementation
588. inputEncoding
589. lastModified
590. readyState
591. referrer
592. strictErrorChecking
593. title
594. URL
595. JAVASCRIPT METHODS {HTML DOM METHODS}, look below,
596. addEventListener()
597. appendChild()
598. blur()
599. click()
600. cloneNode()
601. compareDocumentPosition()
602. contains()
603. exitFullscreen()
604. focus()
605. getAttribute()
606. getAttributeNode()
607. getBoundingClientRect()
608. getElementsByClassName()
609. getElementsByTagName()
610. insertAdjacentElement()
611. insertAjacentHTML()
612. insetAdjacentText()
613. insertBefore()
614. isDefaultNamespace()
615. isEqualNode()
616. isSameNode()
617. Node.isSupported()
618. adoptNode()
619. close()
620. createAttribute()
621. createComment()
622. createDocumentFragment()
623. createElement()
624. createEvent()
625. createTextNode()
626. execCommand()
627. fullscreenEnabled()
628. getElementById()
629. getElementsByClassName()
630. getElementsByName()
631. getElementsByTagName()
632. hasFocus()
633. importNode()
634. normalize()
635. normalizeDocument()
636. open()
637. querySelector()
638. querySelectoAll()
639. removeEventListener()
640. removeAttribute()
641. removeAttributeNode()
642. removeChild()
643. replaceChild()
644. setAttributeNode()
645. renameNode()
646. write()
647. writeln()
648. HTML DOM COLLECTION {JAVASCRIPT}, look below,
649. Anchors
650. Applets
651. Embeds
652. Forms
653. Links
654. Scripts
655. Length
656. Item()
657. namedItem()
658. HTML DOM PROPERTIES {JAVASCRIPT}, look below,
659. accesskey
660. attributes
661. childElementCount
662. childNodes
663. children
664. classList
665. className
666. clientHeight
667. clientLeft
668. clientTop
669. clientWidth
670. dir
671. firstChild
672. firstElementChild
673. innerHTML
674. innerText
675. isContentEditable
676. lastChild
677. lastElementChild
678. nextSibling
679. nextElementSibling
680. nodeName
681. nodeType
682. nodeValue
683. offsetHeight
684. offsetWidth
685. offsetLeft
686. offsetParent
687. offsetTop
688. ownerDocument
689. parentNode
690. parentElement
691. previousSibling
692. previousElementSibling
693. scrollHeight
694. scrollLeft
695. scrollTop
696. scrollWidth
697. tagName
698. textContent
699. title
700. HTML DOM GEO-LOCATION PROPERTIES-&-VALUES {JAVASCRIPT}, look below,
701. GEOLOCATION-COORDINATES, values look below,
702. coordinates.latitude
703. coordinates.longitude
704. coordinates.accuracy
705. coordinates.altitude
706. coordinates.altitudeAccuracy
707. coordinates.heading
708. coordinates.speed
709. GEOLOCATION-POSITION, values look below,
710. position.coords
711. position.timestamp
712. HTML DOM HISTORY-OBJECT {JAVASCRIPT} METHODS, look below,
713. history.back()
714. history.forward()
715. history.go()
716. HTML DOM HISTORY-OBJECT {JAVASCRIPT} PROPERTIES, look below,
717. history.length
718. HTML DOM LOCATION-OBJECT {JAVASCRIPT} PROPERTIES, look below,
719. hash
720. host
721. hostname
722. href
723. origin
724. pathname
725. port
726. protocol
727. search
728. HTML DOM LOCATION-OBJECT {JAVASCRIPT} METHODS, look below,
729. assign()
730. reload()
731. replace()
732. HTML DOM NAVIGATOR-OBJECT {JAVASCRIPT} PROPERTIES, look below,
733. appCodeName
734. appNme
735. appVersion
736. cookieEnabled
737. geolocation
738. language
739. onLine
740. platform
741. product
742. userAgent
743. HTML DOM NAVIGATOR-OBJECT {JAVASCRIPT} METHODS, look below,
744. javaEnabled()
745. taintEnabled()
746. HTML DOM SCREEN-OBJECT {JAVASCRIPT} PROPERTIES, look below,
747. availHeight
748. availWidth
749. colorDepth
750. height
751. pixelDepth
752. width
753. HTML DOM STYLE-OBJECT {JAVASCRIPT} PROPERTIES, look below,
754. ailgnContrnt
755. alignItems
756. alignSelf
757. animation
758. animationDelay
759. animationDirection
760. animationDuration
761. animationFillMode
762. animationIterationCount
763. animationName
764. animationTimingFunction
765. animationPlayState
766. background
767. backgroundAttachment
768. backgroundColor
769. backgroundImage
770. backgroundPosition
771. backgroundRepeat
772. backgroundClip
773. backgroundOrigin
774. backgroundSize
775. backfaceVisibility
776. border
777. borderBottomStyle
778. borderBottomColor
779. borderBottomLeftRadius
780. borderBottomRightRadius
781. borderBottom
782. borderBottomWidth
783. borderCollapse
784. borderColor
785. borderImage
786. borderImageOutset
787. borderImageRepeat
788. borderImageSlice
789. borderImageSource
790. borderImageWidth
791. borderLeft
792. borderLeftColor
793. borderLeftStyle
794. borderLeftWidth
795. borderRadius
796. borderRight
797. borderRightColor
798. borderRightWidth
799. borderSpacing
800. borderStyle
801. borderTop
802. borderTopColor
803. borderTopLeftRadius
804. borderTopRightRadius
805. borderTopStyle
806. borderTopWidth
807. borderWidth
808. boxShadow
809. boxSizing
810. captionSide
811. clear
812. clip
813. color
814. columnCount
815. columnFill
816. columnGap
817. columnRule
818. columnRuleColor
819. columnRuleStyle
820. columnRuleWidth
821. columns
822. columnSpan
823. counterIncrement
824. counterReset
825. cursor
826. direction
827. display
828. emptyCells
829. filter
830. flex
831. flexBasis
832. flexDirection
833. flexFlow
834. flexGrow
835. flexShrink
836. flexWrap
837. cssFloat
838. font
839. fontFamily
840. fontSize
841. fontStyle
842. fontVariant
843. fontWeight
844. fontSizeAdjust
845. height
846. isolation
847. justifyContent
848. left
849. letterSpacing
850. lineHeight
851. listStyle
852. listStyleImage
853. listStylePosition
854. listStyleType
855. margin
856. marginBottom
857. marginLeft
858. marginRight
859. marginTop
860. maxHeight
861. maxWidth
862. minHeight
863. minWidth
864. objectFit
865. objectPosition
866. opacity
867. order
868. orphans
869. outline
870. outlineColor
871. outlineOffset
872. outlineDesign
873. outlineWidth
874. overflow
875. overflowX
876. overflowY
877. padding
878. paddingBottom
879. paddingLeft
880. paddingRight
881. paddingTop
882. pageBrakeAfter
883. pageBrakeBefore
884. pageBreakInside
885. perspective
886. perspectiveOrigin
887. position
888. quotes
889. resize
890. right
891. tableLayout
892. tabSize
893. textAlign
894. textAlignLast
895. textDecoration
896. textDecorationColor
897. textDecorationLine
898. textDecorationStyle
899. textIndent
900. textOverflow
901. textShadow
902. textTransform
903. top
904. transform
905. transformOrigin
906. transformStyle
907. transition
908. transitionProperty
909. transitionDuration
910. transitionTimingFunction
911. transitionDelay
912. unicodeBidi
913. userSelect
914. verticalAlign
915. visibility
916. width
917. wordbreak
918. wordSpacing
919. wordWrap
920. Z-Index
921. HTML DOM WINDOW-OBJECT {JAVASCRIPT} PROPERTIES, look below,
922. windowClosed
923. defaultStatus
924. frameElement
925. frames
926. innerHeight
927. innerWidth
928. length
929. localStorage
930. name
931. opener
932. outerHeight
933. outerWidth
934. pageXOffset
935. parent
936. screenLeft
937. screenTop
938. screenX
939. screenY
940. sessionStorage
941. self
942. status
943. top
944. HTML DOM WINDOW-OBJECT {JAVASCRIPT} METHODS, look below,
945. alert()
946. atob()
947. Blur()
948. Focus()
949. btoa()
950. clearTimeout()
951. clearInterval()
952. confirm()
953. getComputedStyle()
954. moveBy()
955. moveTo()
956. Open()
957. Close
958. print()
959. prompt()
960. resizeBy()
961. resizeTo()
962. scrollTo()
963. setTimeout()
964. setInterval()
965. stop()
966. HTML DOM STORAGE-OBJECT {JAVASCRIPT} METHODS, look below,
967. key()
968. getItem()
969. setItem()
970. removeItem()
971. clear()
972. HTML DOM STORAGE-OBJECT {JAVASCRIPT} PROPERTIES, look below,
973. Length
974. HTML DOM AUDIO/VIDEO-OBJECT {JAVASCRIPT} PROPERTIESS-AND-METHODS, look
below,
975. AUDIO OBJECT PROPERTIES
i) audioTracks
ii) autoplay
iii) buffered
iv) controller
v) controls
vi) crossOrigin
vii) currrentSrc
viii) currentTime
ix) defaultMuted
x) defaultPlaybackRate
xi) duration
xii) ended
xiii) error
xiv) loop
xv) mediaGroup
xvi) muted
xvii) networkState
xviii) paused
xix) playbackRate
xx) played
xxi) preload
xxii) readyState
xxiii) seekable
xxiv) seeking
xxv) src
xxvi) textTracks
xxvii) volume
976. AUDIO OBJECT METHODS
i) addTextTrack()
ii) canPlayType()
iii) fastSeek()
iv) getStartDate()
v) load()
vi) play()
vii) pause()
977. VIDEO OBJECT PROPERTIES
i) audioTracks
ii) autoplay
iii) buffered
iv) controller
v) controls
vi) crossOrigin
vii) currrentSrc
viii) currentTime
ix) defaultMuted
x) defaultPlaybackRate
xi) duration
xii) ended
 xiii) error
xiv) height
xv) loop
xvi) mediaGroup
xvii) muted
xviii) networkState
xix) paused
xx) playbackRate
xxi) played
xxii) poster
xxiii) preload
xxiv) readyState
xxv) seekable
xxvi) seeking
xxvii) src
xxviii) startDate
xxix) textTracks
xxx) videoTracks
xxxi) volume
xxxii) width
978. VIDEO OBJECT METHODS
i) addTextTrack()
ii) canPlayType()
iii) load()
iv) play()
v) pause()

This TEMPLATES-THEME page also requires a WEB-API integration for third-party

who wants to integrate my templates in their project.

---------------------- THIRD-SECTION DESIGN FINISHED------------------

----------------PROJECT DESIGN AND USAGE OF A PANEL----------------

I’m expecting that the ADMINISTRATION PANEL should be designed only using P.H.P.
Programming Language and must include below features, look below,
 THE ADMINISTRATION PANEL should have basic search mechanism as one of
the main features and below are the points dedicated to “what-to-search” and
“placement of search related keywords on buttons”, look below,
 To toggle between webpages,
 To have keywords based on definitions_headings,
  To have keywords based on 3rd section of the website to search CSS-based
templates,
 To have keywords to search project folders,
 To have keywords for import,
 To have keywords for export,
 To have keywords for file-saving in various extensions,
 To have keywords to group files and folders as-per the need,
 Only, searching on PANEL is needed, no-need to inscribe it on any of the
webpages.,
 The Administration Panel should incorporate multiple-choice type questions-answers
sessions and descriptive type question-answers sessions as-well.
 The Administration Panel should incorporate the features of ENGLISH-TO-HIND
and VICE-VERSA translation and allow me to upload contents in HINDI
LANGUAGE as-well.
 The Administration Panel should incorporate the features of automatic PROBLEM-
DESIGNING so-that I could design problems for showing it in my BLOGS-
SECTION or/and WEB-PAGES.
 CRUD Operations to perform,
 Taking care of IMAGES uploaded by me related to my contents,
 Counting of words present in a selected part of the webpage from ADMINISTRATOR
and in-case, counting of full words present in a SECTION OF A WEBPAGE,
 Counting and editing of headings present in a selected part of the webpage from
ADMINISTRATOR,
 ADMINISTRATOR could be able to use MOUSE so-that he could select any part of
paragraphs of any content, either to export/import or to save as/save or to edit/delete
or to move to/from database,
 MASTER LOGIN FORM IN A MOST ADVANCED VERSION IS DESIRED WITH
REGISTRATION-FORM ALSO,
 Visitors Tracking Ability should be having,
 Google Analytics Features, if possible,
 A simple dashboard allowing an administrator to do basic calculations should be
there,
 Ability to create a Temporary Webpage based upon the need should be the part of the
features of administration panel,
 Should track all project folders at the same time,
 Should track all contents whenever administrator wants,
 ADMINISTRATION PANEL should be hided from the visitors, so that an
ABSTRACTION-LAYER should be present in the structure of the website,
 Should interact with server and database synchronously,
 Allowing me to save contents of WEBPAGE to DATABASE as needed,
 Should allow me to import and export information to the formats like,
 Excel, or
 Word, or
 JSON,
 Or above-all-three.,
 Should allow me to navigate and to save the important parts of my website, contents
or others in pdf-file and image-file format,
 Should allow me to upload and download attachments (.pdf, .doc, .xlsx, .csv, .ppt.,
etc...),
 Should allow me to create folders or sub-folders whenever there is a need,
 PANEL should be accessible from any sections of my website,
 PANEL should allow me to show and hide of webpages as-per my need,
 Should allow me to interact with the WEB-APIs of other providers and, to share my
WEB-API to others,
 Handing over the source-code with proper documentation to me, when remaining fees
is paid.,
 Please give me an Application Programming Interface where I as an
ADMINISTRATOR would be able to share contents present in my website to any
third-party website-owner or company, that is my WEB-API based URL could be
added in-their website.

For Design Part, maintain a master folder having all HTML-CSS for contents like below,

I. JavaScript,
II. CSS3,
III. HTML5,
IV. P.H.P.,
V. Java,
VI. Python,
VII. C/C++,
VIII. QUIZ-COMPETITION {MULTIPLE-CHOICE TYPE AND DESCRIPTIVE
QUESTIONS-ANSWERS TYPE,
IX. INTELLIJI, VS-CODE AND ANDROID-STUDIO INSTALLATION,
X. Data Structure and Algorithms,
XI. Data-Modeling,
XII. Database Schema Designing,
XIII. Block Diagrams/Class Diagrams/Flowcharts/UML Diagrams,
XIV. Microsoft Excel, and
XV. May add later-on, also,
XVI. OXFORD DICTIONARY,
XVII. English Grammar,
XVIII. Essays,
XIX. Letter,
XX. Application,
XXI. Rough-Work, and Notes,
XXII. English Dictionary,
XXIII. Mathematics, Statistics, Machine Learning, Artificial Intelligence,
XXIV. Physics,
XXV. Chemistry, and Statistics and,
XXVI. CONTENTS REGARDING BIOLOGY WITH DIAGRAMS SAVING,
XXVII. May add later-on.

After creating master folder, divide the HTML-CSS as-per the contents as I mentioned
above in respective sub-folders for different sections of website.

-----------PROJECT DESIGN AND USAGE OF A PANEL FINISHED--------

FOURTH SECTION CSS DESIGN

This section is dedicated to have three sub-headers, like below,

1) BLOG-SECTION,
2) NOTES/ROUGH-WORK SECTION AND,
3) <svg> & <canvas> related contents are going to use here, so in my case UML-
Diagrams is my requirement which helps me to elaborate my contents related to
Logic-Building and Algorithms
Need to give a predefined-CSS from the master-CSS only, I upload contents on my own,
and only simple BLOG is my requirement.

---------------------- FOURTH-SECTION DESIGN FINISHED -----------------

----------------- FINAL TRANSCRIPT TO START THE WORK ----------------

It’s a note to the developers that you must create a MASTER-CSS-FILE where you must
have an all the necessary CSS Coding for my contents related to different subjects,
pictures to display if only picture or diagram is needed to upload by ADMINISTRATOR
and then either allow the ADMINISTRATOR to create the folder from the
ADMINISTRATION-PANEL so that a fully structured MASTER-CSS-FILE could be divided
into separate CSS-FILES as-per my contents to save in different folders or sub-folders as
the case may be or your team is going to do that for me and you could check page 53
and page 54 for different contents.
Kindly, make a separate CSS File for INDEX-PAGE and WELCOME-PAGE and BLOG-PAGE.
It’s a note to the developers that I want a responsively designed PHP BASED
ADMINISTRATION PANEL (only confined and seen by me only on mandatory basis) which
comprise to have all necessary feature as I mentioned earlier.
I gave one copy of this entire requirement to you and on is with me, I want in return a
final SRS-Document with your confirmation regarding making website as-per my words
in this draft on letter-head of yours.
Regards,
Rachit Mathur
+91-9643379833
[email protected]

---------------------------------- TRANSCRIPT DONE ---------------------------

Which book can be treated as the Bible of C++?

I have listed books for all kinds of programmers. I hope this helps.

Beginner: Introductory, no previous programming experience

1. Programming: Principles and Practice Using C++ (Bjarne Stroustrup)

(updated for C++11/C++14) An introduction to programming using C++
by the creator of the language. A good read, that assumes no previous
programming experience, but is not only for beginners.
Introductory, with previous programming experience

1. C++ Primer * (Stanley Lippman, Josée Lajoie, and Barbara E. Moo)

(updated for C++11) Coming at 1k pages, this is a very thorough
introduction into C++ that covers just about everything in the language in
 a very accessible format and in great detail. The fifth edition (released
August 16, 2012) covers C++11. [Review]
2. A Tour of C++ (Bjarne Stroustrup) The "tour" is a quick (about 180 pages
and 14 chapters) tutorial overview of all of standard C++ (language and
standard library and using C++11) at a moderately high level for people
who already know C++ or at least are experienced programmers. This book
is an extended version of the material that constitutes Chapters 2-5 of The
C++ Programming Language, 4th edition.
3. Accelerated C++ (Andrew Koenig and Barbara Moo) This basically covers
the same ground as the C++ Primer but does so on a fourth of its space.
This is largely because it does not attempt to be an introduction
to programming, but an introduction to C++ for people who've previously
programmed in some other language. It has a steeper learning curve, but,
for those who can cope with this, it is a very compact introduction into the
language. (Historically, it broke new ground by being the first beginner's
book to use a modern approach at teaching the language.) [Review]
4. Thinking in C++ (Bruce Eckel) Two volumes; is a tutorial style free set of
intro level books. Downloads: vol 1, vol 2. Unfortunately, they’re marred by
a number of trivial errors (e.g., maintaining that temporary errors are
automatically const), with no official errata list. A partial 3rdparty errata list
is available at ("Thinking In C++"), but it’s apparently not maintained.
* Not to be confused with C++ Primer Plus (Stephen Prata), with a significantly less
favorable review.

Best practices

1. Effective C++ (Scott Meyers) This was written with the aim of being the best
second book C++ programmers should read, and it succeeded. Earlier
editions were aimed at programmers coming from C, the third edition
changes this and targets programmers coming from languages like Java. It
presents ~50 easy-to-remember rules of thumb along with their rationale
in a very accessible (and enjoyable) style. [Review]
2. Effective STL (Scott Meyers) This aims to do the same to the part of the
standard library coming from the STL what Effective C++ did to the
language as a whole: It presents rules of thumb along with their
rationale. [Review]
Intermediate

1. More Effective C++ (Scott Meyers) Even more rules of thumb than Effective
C++. Not as important as the ones in the first book, but still good to know.
2. Exceptional C++ (Herb Sutter) Presented as a set of puzzles, this has one of
the best and thorough discussions of the proper resource management
and exception safety in C++ through Resource Acquisition is Initialization
 (RAII) in addition to in-depth coverage of a variety of other topics including
the pimpl idiom, name lookup, good class design, and the C++ memory
model.[Review]
3. More Exceptional C++ (Herb Sutter) Covers additional exception safety
topics not covered in Exceptional C++, in addition to discussion of effective
object-oriented programming in C++ and correct use of the STL. [Review]
4. Exceptional C++ Style (Herb Sutter) Discusses generic programming,
optimization, and resource management; this book also has an excellent
exposition of how to write modular code in C++ by using nonmember
functions and the single responsibility principle. [Review]
5. C++ Coding Standards (Herb Sutter and Andrei Alexandrescu) "Coding
standards" here doesn't mean "how many spaces should I indent my
code?" This book contains 101 best practices, idioms, and common pitfalls
that can help you to write correct, understandable, and efficient C++
code. [Review]
6. C++ Templates: The Complete Guide (David Vandevoorde and Nicolai M.
Josuttis) This is the book about templates as they existed before C++11. It
covers everything from the very basics to some of the most advanced
template metaprogramming and explains every detail of how templates
work (both conceptually and at how they are implemented) and discusses
many common pitfalls. Has excellent summaries of the One Definition Rule
(ODR) and overload resolution in the appendices. A second edition is
scheduled for 2016. [Review]
7. Effective Modern C++ (Scott Meyers) This book describes how to write truly
great software using C++11 and C++14—i.e., using modern C++.
Advanced

1. Modern C++ Design (Andrei Alexandrescu) A groundbreaking book on

advanced generic programming techniques. Introduces policy-based
design, type lists, and fundamental generic programming idioms then
explains how many useful design patterns (including small object allocators,
functors, factories, visitors, and multi methods) can be implemented
efficiently, modularly, and cleanly using generic programming. [Review]
2. C++ Template Metaprogramming (David Abrahams and Aleksey Gurtovoy)
3. C++ Concurrency In Action (Anthony Williams) A book covering C++11
concurrency support including the thread library, the atomics library, the
C++ memory model, locks and mutexes, as well as issues of designing and
debugging multithreaded applications.
4. Advanced C++ Metaprogramming (Davide Di Gennaro) A Pre-C++11
manual of TMP techniques, focused more on practice than theory. There
are a ton of snippets in this book, some of which are made obsolete by
type traits, but the techniques, are nonetheless, useful to know. If you can
 put up with the quirky formatting/editing, it is easier to read than
Alexandrescu, and arguably, more rewarding. For more experienced
developers, there is a good chance that you may pick up something about
a dark corner of C++ (a quirk) that usually only comes about through
extensive experience.
Reference Style - All Levels

1. The C++ Programming Language (Bjarne Stroustrup) (updated for C++11)

The classic introduction to C++ by its creator. Written to parallel the classic
K&R, this indeed reads very much alike it and covers just about everything
from the core language to the standard library, to programming paradigms
to the language's philosophy. (Thereby making the latest editions break the
1k page barrier.) [Review] The fourth edition (released on May 19, 2013)
covers C++11.
2. C++ Standard Library Tutorial and Reference (Nicolai Josuttis) (updated for
C++11) The introduction and reference for the C++ Standard Library. The
second edition (released on April 9, 2012) covers C++11. [Review]
3. The C++ IO Streams and Locales (Angelika Langer and Klaus Kreft) There's
very little to say about this book except that, if you want to know anything
about streams and locales, then this is the one place to find definitive
answers. [Review]
C++11 References:

1. The C++ Standard (INCITS/ISO/IEC 14882-2011) This, of course, is the final

arbiter of all that is or isn't C++. Be aware, however, that it is intended
purely as a reference for experienced users willing to devote considerable
time and effort to its understanding. As usual, the first release
was quite expensive ($300+ US), but it has now been released in electronic
form for $60US
2. Overview of the New C++ (C++11/14) (PDF only) (Scott Meyers) (updated
for C++1y/C++14) These are the presentation materials (slides and some
lecture notes) of a three-day training course offered by Scott Meyers, who's
a highly respected author on C++. Even though the list of items is short,
the quality is high.
Classics / Older
Note: Some information contained within these books may not be up-to-date or no longer
considered best practice.

1. The Design and Evolution of C++ (Bjarne Stroustrup) If you want to

know why the language is the way it is, this book is where you find answers.
This covers everything before the standardization of C++.
2. Ruminations on C++ - (Andrew Koenig and Barbara Moo) [Review]
 3. Advanced C++ Programming Styles and Idioms (James Coplien) A
predecessor of the pattern movement, it describes many C++-specific
"idioms". It's certainly a very good book and still worth a read if you can
spare the time, but quite old and not up-to-date with current C++.
4. Large Scale C++ Software Design (John Lakos) Lakos explains techniques to
manage very big C++ software projects. Certainly, a good read, if it was
only up to date. It was written long before C++98, and misses many
features (e.g., namespaces) important for large scale projects. If you need to
work in a big C++ software project, you might want to read it, although
you need to take more than a grain of salt with it. The first volume of a new
edition is expected in 2015.
5. Inside the C++ Object Model (Stanley Lippman) If you want to know how
virtual member functions are commonly implemented and how base
objects are commonly laid out in memory in a multi-inheritance scenario,
and how all this affects performance, this is where you will find thorough
discussions of such topics.

Source: Stack Overflow

Navigating interview preparation can be a tricky exercise, so having a good source during
the process is all the more important.

Interview Kickstart is the gold standard in tech interview prep. It is the only technical
interview prep platform that hosts 17 technical domain courses. Our programs include a
comprehensive curriculum, unmatched teaching methods, guidance of 300+ FAANG+
instructors & SMEs, and career coaching to help you nail your next tech interview.

Some of the key focus areas of the training courses for Tech Interview Prep at Interview
Kickstart are:

 Solving coding problems with power patterns - Guided coding practice

with FAANG tech leads.
 Technical & Behavioral Coaching - Book daily problem-solving sessions
with FAANG coaches.
 Highly realistic FAANG style mock interviews - Practice interviewing with
FAANG Hiring Managers and get detailed personalized feedback.

WEBSITE TITLE(URL):
https://www.essenceoftoday.org/#
To,
The Team of Name2Brands
{especially, Mr. Aman Mishra and Mr. Amit Mondal},
SUB: Final Requirement Description with BLUEPRINT and DESIGN-
PATTERN with Website Layout Outline with Administration Panel
Functionality Description
I have your demonstration website designed by your team and It makes me fully
assured of the proper usage of CSS3 Styling by your team-members, this website is
just to add my profile presence when I starts by own coaching business.
I want a very well balanced (advanced) LOGIN-FORM and
REGISTRATION-FORM login-logout, cookie-session features in my
website, in fact I want two such forms, one is the part of Administration-
Panel and other is the part of one webpage (that webpage supposed to be
the last webpage as-per my description). I stick to my point regarding
mandatory panel functionalities and the elaborated description of it is in
my first requirement-draft, we both devote our time to build the final
design document and I took one copy from you accordingly. My website
pages’ theme should include colors which is the part of my LOGO.
Mr. Amit Mondal is an experience holder professional with full of confidence of
FRONTEND Web-Design and BACKEND Functionality of a Website using Django and
Python as told me earlier of that.
I hope Mr. Amit Mondal is aware of the initial proposal which Mr. Aman Mishra
shared to me at the very start of our conversation regarding full WEBSITE
DEVELOPMENT. I hope you all are aware that this website should open in cross-
browser mode in a responsive manner and that is why I’m expecting that ‘-ms- ‘;’ -
webkit- ‘;’ -moz- ‘& ‘-o- ‘for all web browsers should be the part of my all CSS-
Styling-Files respectively.
Now, I’m going to start with my guidelines which are needed to fulfil in order to
make my website designed as-per my desire. Remember, a properly structured
code is only accepted by my end, and you have to maintain “two or three or more
than three" MASTER-CSS-FILES for my website project.

“I’m starting with depicting each and every points starting from Welcome
Page Design and Headers-Design and Administration Panel Functionality
Description along-with Website Layout Outline of my choice.”
Please write at the top-center position of the Welcome-Page, “!!! NO
COMPROMISE WITH THE STYLE OF STUDY !!!”.
My Welcome Page should be the “index-page” of my website and most
importantly and the second webpage should comprise “ABOUT-US” section
and “CONTACT-US” section, then “CONTENTS” {details mentioned below by
me} section comes and at-last one “BLOG-PAGE” section is needed which
might have two headers only {headers detail description is described by
me in coming lines} and ESSENCEOFTODAY is only header needed on
INDEX-PAGE (WELCOME-PAGE) of my website {as you give a link on the
demonstrative-website} and it should be there on INDEX-PAGE only. The
LINK {by the name, ESSENCEOFTODAY} at the top-center-position of the
webpage, which upon clicking, open other webpage with new MENU-BAR
{its details, I mentioned below} and CSS3 Styling and Administration Panel
Functionalities are also going to covered by me and you might employ
necessary JavaScript Coding, wherever needed for my PROJECT
{https://www.essenceoftoday.org/#}.
MENUBAR
ESSENCEOFTODAY {“on INDEX-PAGE OR FIRST WEBPAGE”, it should be an
only link at the top and four SUB-LINKS (ABOUT-US (“second webpage”) 
“urlhttps://www.essenceoftoday/about_us”), (CONTACT US (“second
webpage only” mainly the “footer-page” is fine and no “CONTACT-US
FORM” is needed), (CONTENTS(“third webpage”) 
“urlhttps://www.essenceoftoday/contents”) and (BLOGS-PAGE (“fourth
webpage”)  “urlhttps://www.essenceoftoday/blogs_page”)} and below-
that, I need a simple animation Cover-Page, mentioning “my website name”
and below that mentioning a “paragraph” like “It is an education
platform/portal to help school and college students in dealing
with subjects which is a part of the curriculum of schools and
colleges along-with aiming an effort to asks the students to
contribute to the ESSENCEOFTODAY by giving their time to
prepare and share the concepts which become noteworthy to
other students.”
CSS STYLING FOR WELCOME-PAGE
Below the cover-page, I want to display the definitions, three definitions on a
single row is sufficient for me and I want more than four such rows and it should
keep on increasing via administration-panel functionality, on my welcome-page
(index-page).
Definitions like, “Integration: It’s a mathematical concept to find a unit area
of any plane and such plane is distinguished by a finite polynomial
equation under the prescribed limit and following the proper rules of
calculus to find the unit area of that plane.”, {LINK: ReadMore  a new
web-page opens by the definition topic, “Integration” and url
https://www.essenceoftoday/# which now becomes
https://www.essenceoftoday/integration}

CSS3 STYLING ADMINISTRATION PANEL

Prepare a MASTER-CSS-FILE where you are In Administration Panel, I’m expecting a

put all CSS Codes for definitions display with very important functionality which allows

further reading option with opening of a new me to create new definitions by adding

webpage as discussed above. more rows (or columns) for new definition

topic and also to maintain the entire

content of new webpages whenever a

visitor wishes to click “readmore link” with

proper database schema design to use crud

operations in it.
In Master-CSS-File and Administration-Panel, apart from the above, add a mechanism
on any part of my welcome page, where I could able to see the advertisements, I could
be able to add more headers and sub-headers as-per my need, I could be able to
analysis the tracking of visitors, I could be able to take online video-recorded sessions
(I’m expecting a space on welcome-page for the same), I could be able to append or
edit or delete contents on footer-section and also on the panel provide me the
mechanism to instantaneously linking of my welcome-page with social media accounts of
mine {like WhatsApp-business, LinkedIn-business, Instagram-business, X-business and
Facebook-Page}. Also, make a separate CSS3-FILE of contents-placing (I myself
manage the required contents for each and every topic only CSS-Styling is
needed as I repeat myself once again to clarify any remaining doubt in your
mind) for topics which I listed below, please go through,
A. ENGLISH VOCABULARY {OXFORD-DICTIONARY KIND OF CONTENTS
WITH WORD-PLACING IN THE BOOK}, GRAMMAR AND LITERATURE;
B. BIOLOGY WITH DIAGRAMS AND SUB-TOPICS;
C. CHEMISTRY WITH DIAGRAMS AND SUB-TOPICS;
D. PHYSICS WITH DIAGRAMS AND SUB-TOPICS;
E. ALL SORT OF ENGINEERING SUBJECTS WITH DIAGRAMS AND SUB-
TOPICS;
F. MATHEMATICS AND STATISTICS;
G. UML DIAGRAMS AND FLOWCHARTS (YOU JUST PROVIDE ME HTML5’S
<svg> and <path> mostly for arrows and text-boxes);
H. PROGRAMMING LANGUAGES WITH DATA-STRUCTURE-AND-ALGORITHMS
IMPLEMENTATION (HERE, CONSIDER LEFT SIDE OF SCREEN FOR
TOPICS AND RIGHT SIDE OF SCREEN FOR SYNTAX {AND SUB-TOPICS
BREAKDOWN} WITH CENTRE BODY FOR RELATED CONTENTS
ELABORATION AND ALSO INSIDE THE ADMINISTRATION PANEL’S
FUNCTIONALITY I WANT TO HAVE AN AUTHORITY TO EDIT LEFT,
RIGHT AND BODY OF SCREEN AS-PER-MY-WILL);
I. ALSO LATER ADDITION OF MORE CONTENTS, SUB-CONTENTS, NEW
SUB-HEADERS, NEW HEADERS, etc., SHOULD BE THEIR IN THE
FUNCTIONALITIES OF ADMINISTRATION-PANEL.

CSS STYLING FOR ABOUT-US AND CONTACT-US PAGES

No Special CSS-Styling is Needed for about-us section only below contents needs
to placed which I’m mentioning here below,

{MESSAGE
“I want to give only one message to all of my visitors who visits my website,
is that now the time is come to change the way of studying. We have
schools, colleges, universities, libraries (digital as-well), professors and
teachers but no idea on the proper way or style of studying and I knew that
it’s a big struggle to understand a single concept by your own and it takes a
specific time to make understand the same concept to students and we
don’t know how much time a concept is going to take to become
understandable by the student(s) since for school students from classes 1st
Standard to 12th Standard load of studies increases on yearly basis.”

PLEDGE
“My only pledge is to ensure the lifetime connection (I’m looking for
CROWDFUNDING for my effort) between the person and me, who is going
to devote his/her valuable time to prepare contents with me for my website
as-per my direction.”

AIM
“My Aim is to make this website reach among the maximum number of
learners who believe that the contents of this website will help them to
learn concepts in a unique fashion and also it might help them to create
their “school projects” & “school notes for their school homework” &
“examination related studies” & “picking important topics from the
website on regular basis” as-per their liking.”

GOALS
“My Goals is to add the contents in my website in time-to-time basis as-per
my understanding of concepts and my style of detailing.”

VISION
“My Vision is to look forward to encouraging the school students to
connect with me via. my MOBILE-APPLICATION (either Android or React-
Native) and provide their helping-hands in designing the PROBLEMS and
the SOLUTIONS as-per the SUBJECTS.”

MISSION
“My Mission is to change “the current style of teaching” and “the current
style of learning” and “the current way of studying” to give a skilled
student to the Nation.”}
, and for “contact-us” section provide me a “CSS-styling” so that I could add my
details by my own in efficient manner only in the footer-section of my second
webpage.
Now, at the last I am showing the outline of GUI discussed so-far.
Initial URL: https://www.essenceoftoday.org/# 
Final URL: https://www.essenceoftoday.org/about_us  and Web-Page Layout is
showing below,
ESSENCE_OF_TODAY {link on menubar} at the top center-position
and upon clicking opens four sub-menus, i.e. ABOUT_US {submenu},
CONTACT_US {submenu}, CONTENS {submenu} and BLOGS
{submenu} should be open on a new webpage (its styling and administration-
panel functionality, I’m covering separately and when visitor click the top-link URL
becomes https://www.essenceoftoday.org/contents is going to happen), and inside
welcome-page, go through the design below,
First the COVER-PAGE  below the cover-page, definitions is going to place as-per
the CSS-Styling-Rules three columns per row with more than four rows should be
there, and when definitions finished and readmore link blink, then new webpage
opens with URL: https://www.essenceoftoday.org/definition-topic-name
WELCOME-PAGE ABOUT-US AND CONTACT-US DESIGN
DESCRIPTION FINISHED

CONTENT-PAGE CSS-STYLING
INITIAL URL: https://www.essenceoftoday.org/contents
Now, when contents page is hovered by the visitor and new webpage opens
then five sub-headers on the menubar section should appears and on the body
of the content I want a space for video and CSS(3) for the overview of the
coming contents in the near future {that is, headers and body-contents, sub-
contents, …}, on the body of contents webpage and you provide me the CSS-
Styling so-that I could mention what sort of contents currently we are having
and what about future planning also in declarative and point-wise manner, like
that below,
 a. HTML5{here I’m planning to include contents related to HTML5-Canvas,
HTML5 MathML, and HTML5 “<svg> and <path>” as well apart from regular
tags by my own}, and it should be the new-webpage when visitor clicks the first-
subheader, URL: https://www.essenceoftoday.org/contents/html_5;
b. CSS3{here I’m planning to add contents related to ANIMATIONS and
SCSS(SASS) and Tailwind-CSS as well by my own}, and it should again be the
new-webpage when visitor clicks the first-subheader, URL:
https://www.essenceoftoday.org/contents/css_3;
c. JAVASCRIPT {here I’m planning to include all sort of contents related to
JAVASCRIPT with LIBRARIES and FRAMEWORKS with SPECIFIC
DIRECTORY STRUCTURES and INSTALLATION PROCEDURES and a WEB-
CONSOLE to check the output of JavaScript-Coding as well}, and it should again
be the new-webpage when visitor clicks the first-subheader, URL:
https://www.essenceoftoday.org/contents/javascript;
d. TEMPLATES SECTION {CSS3 Coding with corresponding Output (Output is just
like an image only), no need to employ codepen like of concept by my own}, and
URL: https://www.essenceoftoday.org/contents/templates_section;
e. Extended Contents Region {Use existing CSS-Styling only over-here as-well,
later-on I add contents}, and URL:
https://www.essenceoftoday.org/contents/extended_contents_region;

CSS3 STYLING ADMINISTRATION PANEL

Inside MASTER-CSS-FILE, put all CSS Codes In Administration Panel, add

where left-hand side of the webpage is for index functionality which allows me to

of html5 contents and right hand side of the employ CRUD operations in whole

webpage is for syntax of tags and other webpage with a proper database

properties and main body for Topics schema.

and Sub-topics.

Inside MASTER-CSS-FILE, put all CSS Codes In Administration Panel, add

where left-hand side of the webpage is for index functionality which allows me to

of css3 contents and right hand side of the employ CRUD operations in whole

webpage is for syntax of properties and webpage with a proper database

values and main body for Topics schema.

and Sub-topics.
Inside MASTER-CSS-FILE, put all CSS Codes In Administration Panel, add

where left-hand side of the webpage is for index functionality which allows me to

of javascript contents and right hand side of the employ CRUD operations in whole

webpage is for syntax of coding and features webpage with a proper database

and main body for Topics schema and web-console at the bottom

and Sub-topics. of a web-page. Web-Console should be

available for my internal use only.

Inside MASTER-CSS-FILE, CSS Codes should In Administration Panel, add

be like, left hand-side of webpage is for index of functionality which allows me to

of CSS/CSS3/TAILWIND-CSS/SCSS(SASS) employ CRUD operations in whole

contents and right hand side of webpage is for webpage with a proper database schema.

syntax of CSS/CSS3/TAILWIND-CSS/SCSS(SASS)

contents and the main body is for contents-description

(topics and sub-topics) with immediate output of

each property in image format only.

url: https://www.essenceoftoday.org/contents/extended_contents_region/#

Same styling is needed here, a {separate MASTER-CSS-FILE} is needed or {existing

MASTER-CSS FILE} is needed, I left it to developers only. The main thing is the
ADMINISTRATION PANEL FUNCTIONALITY, and below points will clarify what I want
in it, please see,

 In above url in place of ‘#’, I want to add my own headers and sub-headers with
contents and this all could be managed by panel only.
 CRUD and Proper Database Schema is needed.
 In master-css-file, styling related to UML-Design or Block-Diagrams (Data-Models)
is should be there on priority basis to solve my purpose since flowcharts of
procedures is also I want to showcase in my website, and don’t worry of contents, I
managed by my own as already determined to do it.

CONTENTS-PAGE DESCRIPTION FINISHED

 BLOGS PAGE CSS-STYLING
Blogs-Page’s URL: https://www.essenceoftoday.org/blogs/#
The last part of my website design description and here I want only two webpages instead of
having same old way of displaying blogs. On body of the BLOGS-PAGE, build a connection of
the page with my all social-media accounts with a space for video-interaction (only basic
connectivity just to populate the page, main-thing is two sub-headers) as I mentioned earlier in
this draft also and a “space for online classes through video either real-time or
recorded one, and only one video is sufficient and when video is posted would
depends on Administrator only” and menu and sub-menu is like, “SUBMENU:
blogs_page” and “INNER-MENUS: online_selling_section and
recruitment_helping_section”. I separate this section in two distinct webpages and I’m
mentioning the corresponding URLs,
First web-page’s URL: https://www.essenceoftoday.org/blogs/online_selling

AND
Second web-page’s URL: https://www.essenceoftoday.org/blogs/recruitment_helping

CSS STYLING FOR ONLINE-SELLING WITH PANEL

The online selling webpage section is a very basic way to arrange a row-&-column format to
display images (don’t consider it as an e-commerce, since I don’t have any plans to
start this as a business but My father is taken an agency from someone
wayback on Aug’21 and since then, the manufacturer can’t able to hire
professionals even for his product’s marketing till today and we sell his
company’s products using our intelligence without visiting any doctor, my
father is proficient in counter-selling. I’m thinking to help him and this
webpage is going to do the same for me, since I’m goanna increase
“essenceoftoday” presence amongst seekers) and I’m not taking any sort of extra
advantage of your decent behavior but, I put forward the approach keeping in mind that
as-per the proposal, you are required to give me the ADMINISTRATION PANEL and CSS/CSS3
is not a problem for you.

CSS/CSS3 AND ADMINISTRATION-PANEL DESCRIPTION: Here, I want a fully-responsive

form login/register mandatory on the administration-panel where I register my visitors {either
students/other visitors} who visits the pages that is, either online selling webpage or students who
wants to contribute to my website contents.
Just give me “10by5 rows*columns” where I post the products images for displaying and
when someone clicks any picture and below that only quantity field is supposed to be there for
them to ask and immediately after that, my contact number (either landline or mobile) should
appeared and “I’m not providing any payment gateway facility nor a facility
of cash on delivery” but I ask to pay us directly to our current bank account number (State
Bank of India), so-that the person contacted me directly instead of performing formalities
common to ecommerce kind of websites, which I don’t want. I don’t have any stores other than
shop, which I show to Aman as-well.

CSS STYLING FOR RECRUITMENT-HELPING WITH PANEL

The recruitment helping webpage section is not a naukri.com kind of approach but here I’m
discussing my own unique way and for that you give me the required Styling with Panel
Functionality.

I’m having EIGHT-PLUS of experience in Recruitment Industry and I knew all sort of iffs-&-
butts of the Industry. My purpose is to have a series of questions handled by administrator for an
enrolled candidate and based on that questions/answers I build his/her resume via. CSS-
Styling by my own and send him/her for the desired position in a company based on the
working-profile.
CSS/CSS3 AND ADMINISTRATION-PANEL DESCRIPTION: Here, I want a fully-
responsive form login/register on the webpage as I mentioned earlier and when
registration is finished then on the body-portion of the webpage I want only a
single display section where I post an advertisement (only single advertisement at a
time only I want and advertisement should be on text-format only, images/logo not
needed) for an opening in a company and below that, questions related to the job-
profile is going to posted by the administrator {is it possible in a web-page to have a
space for a visitor to answer the questions???} and based on that, I will offer
him/her to build the desired profile-resume and send him/her to the concerned
company.
I’m expecting a fully documented route-map for my website-project from
Name2Brands’s team against of my draft, on company’s letterhead. I’m also
expecting to finish every legal formality by your team as-well.
I’m giving my promise to pay the full amount and also acts as a reference for your
company’s future endeavor as-well, since for me this website could act as a
turning-point in my life and benefits my future aspects of my opening as a coaching
teacher with giving utmost importance on correct way of style of teaching and
providing knowledge on an easy manner.

Thanks with Regards,

Rachit Mathur
+91-9643379833
[email protected]

NAMETOBRANDS TEAM (AMIT MONDAL AND AMAN MISHRA)

Dated: 5th May, 2024
FINAL BLUEPRINT OF THE WEBSITE WITH DESIGN DETAILS OF EVERY WEBPAGE
ALONGWITH DETAILS OF USING DATABASE SCHEMA OR RECORDS FOR
DIFFERENT SORTS OF CONTENTS WITH ADMINISTRATION PANEL
FUNCTIONALITIES DETAILS OF EVERY SECTION(PARTS) OF THE WEBSITE
“https://essenceoftoday.org/#”.
Do’s/Don’ts for Administration Panel CRM’s Design Team [built on
{PYTHON[DJANGO]}]
Do’s:

 In my first draft (I shared the complete booklet of the requirement when

I meet personally with you), I mention to have a web-console integration in my
JAVASCRIPT WEBPAGE section for my internal use only, which is going to
accomplished by Amit Mondal (as he assured me), and for my TEMPLATES
WEBPAGE section, I want an A.P.I. (Restful or any-approach) INTEGRATION,
so-that any visitor or any client who wants to incorporate small CSS3 templates
on their webpages{website(s)} for their own use, could able to do so via.
Application Programming Interface.
 As per the recent demonstration I got from yours team on the C.R.M., the
functionalities I want, I’m detailing below pointwise,
 I want a fully responsive and advanced Login/Logout/Registration Form
on my Administration Panel with fields as-per my choice and could be
editable from me {field-label with increase and decrease of fields as-per
my choice} whenever I want.
  I could apply crud-operation to the field/record/tables/schema in the
database {MYSQL, in my-case} from the Administration Panel.
 I could monitor the tracking of my visitors, could allow the placing of
advertisements on specified section on the INDEX/WELCOME PAGE of
my website.
 I could display my recent notifications on Welcome-Page, Contents-
Page and Blogs-Page of my website which is just a proposal in few-
lines to ask anyone who wants to contribute to the contents-building
for my website.
 I could be able to upload and download any attachment on my system as
well as into the database and from the database.
 I want only on Administration Panel the search bar with searching
mechanism.
 As-per demonstration, footer-section edition should comprise every field,
that is,
 SOCIAL MEDIA LINKS;
 MY DRUG LISENCE NUMBER;
 MY GST NUMBER;
 MY EMAIL;
 MY COMPLETE EDUCATIONAL BACKGROUND;
 Administration Panel could allow me to replace diagrams, appending new
topics on the body of any webpage in my website (with CSS-Styling intact)
and new sub-headers, new sub-sub-headers, new sub-sub-sub-headers.
 I’m covering contents from all domains which I’m listing below,
 Biology {contents and diagrams};
 Physics {contents and diagrams};
 Chemistry {contents and diagrams};
 Oxford Dictionary {literature and grammar};
 All Computer related Information {hardware and software};
 Etc…
 I also want to hide and show any webpage whenever I want.
 I also want that A.P.I. should trigger through panel only.
 I want to have a functionality which allows me to save the text in my
website into ‘.pdf format’.
Don’ts

 Do not compromise with all the points.

Do’s/Don’ts for Webpage Design Team {built on (CSS3/HTML5/JAVASCRIPT)}
Do’s:
  URL Structure  https://www.essenceoftoday.org/#;
 It is an INDEX-Page and would be the WELCOME-Page for my website;
 “!!!NO COMPROMISE WITH THE STYLE OF STUDY!!!” on the Top-Center of
the webpage only;
 Just below on center of the webpage, I want only one Header {Header-Title:
“ESSENCEOFTODAY”};
 Then, I want a Cover-Page and what is inside of that cover-page, please go
through below points,
a. On left “my full picture” and below that write message below, “It
is an education platform and portal to help school and college
students in dealing with school and college subjects along-with
aiming an effort to asks the students to contribute to the
ESSENCEOFTODAY by giving their time to prepare and share the
concepts along-with problems designing and corresponding
solutions which is becoming noteworthy to other students in a long
run”;
 Also include my all social media links only on cover-page in an artistic
manner;
 After the cover page, the only section which I want is the definition section and
its design is covering by below points,
 I want three definitions on the width of the webpage separated by space;
 I want four such rows for my different-different topic;
 I want to open a new webpage opened when the visitor clicks the
“read_More” Link and the url becomes
https://www.essenceoftoday.org/current-definition-topic and new
webpage opens with the possibility of adding more contents by the
Administrator with the help of an Administration-Panel {built on
Django(Python)} with contents stored as data in MYSQL Database having
properly design schema;
 Same functionality and design is repeated for each and every definitions
and here the topic of definition on the welcome-page should be managed
by the Administrator only through Administration Panel;
Don’ts

 Do not restrict the addition of new definition-topics (that is, more rows as
required) whenever I bring new topics and posted on the welcome page and if, I
want to use space to write new definition topic on the already written definition
then, I expect that the previous definition and its related webpage contents
should be saved inside the MYSQL Database and its contents couldn’t be over-
ride and when I again post the same definition I could see the contents once-
again coming from the database;
  I do not need any footer-section on my WELCOME-PAGE;
WELCOME PAGE DESIGN
!!!NO COMPROMISE WITH STYLE OF STUDY!!!  1st Section {just a message,
center}

ESSENCEOFTODAY (Header-Link)  2nd Section {header-link, only one link on

welcome-page, center}

COVER-PAGE-DESIGN (details already mentioned point-wise)  3rd Section {cover-

page, center}

DEFINITION-TOPICS WITH DETAILS (readMore link and other features)  4th Section
{Last-Section, definitionsTopic/Details/readMore Link/New Web-Page}
1st Definition Topic 2nd Definition Topic 3rd Definition Topic
with details… with details… with details…
4th Definition Topic 5th Definition Topic 6th Definition Topic
with details… with details… with details…
7th Definition Topic 8th Definition Topic 9th Definition Topic
with details… with details… with details…
10th Definition Topic 11th Definition Topic 12th Definition Topic
with details… with details… with details…
… and it kept on increasing and all above could be managed by administration-panel
with proper database schema for above definition related contents and opening of new
web-pages as-per definition-topic when readMore link has been clicked by the visitor
and that too could be managed by panel and database schema design.
WELCOME PAGE DESIGN FINISHED

ESSENCEOFTODAY LINK DESIGN

Now, since the welcome-page designing is finishes, I’m discussing the design of
‘ESSENCEOFTODAY’ link, which comprises of four sub-headers, that is,
  ABOUT-US webpage (2nd Webpage), url:
https://www.essenceoftoday.org/about_us/# ;
 CONTACT-US webpage (2nd Webpage, HERE ONLY, I WANT FOOTER-
SECTION AND NO CONTACT-US FORM I WANT IN SEPARATE), url:
https://www.essenceoftoday.org/contact_us/# ;
 CONTENTS webpage (3rd Webpage), url:
https://www.essenceoftoday.org/contents/# ;
 BLOGS webpage (4th Webpage), url:
https://www.essenceoftoday.org/blog_page/# ;

ABOUT-US SUB-HEADER LINK DESIGN

You already show me that part in the demonstration template of yours, please take
care of margins and fonts.
ABOUT-US SUB-HEADER LINK DESIGN FINISHED

CONTACT-US SUB-HEADER LINK DESIGN

Here provide me the fields in the administration-panel to fill the footer-section by me.
I’m supposed to write my details, social-media links and my shops license details and
gst# etc.
CONTACT-US SUB-HEADER LINK DESIGN FINISHED

CONTENTS SUB-HEADER LINK DESIGN

When, any visitor hovers the link, then five new sub-sub-headers should open, below is
their separate url(s),
 https://www.essenceoftoday.org/contents//html/# ,
 https://www.essenceoftoday.org/contents/css/# ,
 https://www.essenceoftoday.org/contents/javascript/# ,
 https://www.essenceoftoday.org/contents/templates/# ,
 https://www.essenceoftoday.org/contents/extended_contents_region/# ,

Also, on the body of a “contents webpage”, put a space for my video-session, only one
recorded (or live, “is live-streaming is possible?”) video session embed on the webpage
so that I interact with my visitors and detailing them about my future plans, and other
things, might be manageable on administration panel’s end and here provide CSS
where I wrote a ‘short detailing with points’ for my sub-sub-sub headers and
contents of the webpage(s).

EXTENDEDCONTENTSREGION SUB-SUB-HEADER LINK DESIGN

Do’s:

 When, any visitor hovers this link then again sub-header should open and the
title of sub-header(s) and contents of a webpage(s) should be decided and
posted by the administrator whenever he/she wishes to do so.
 Proper Database Schema is needed for this section and for whole website on a
whole.
 Here an administrator upload more contents apart from html, css, and
javascript and the loads of contents already told by me several times, for this
Master-File and Administration Functionality should have all possibilities.
Don’ts:

 Do not provide new styling to contents and headers contents and for every
header-title and body-contents I want a same styling.

HTML SUB-SUB-HEADER LINK DESIGN

Do’s:

 I cover every contents that falls under HTML and HTML5 and on body of the
webpage with the proper styling and panel, I upload the said contents as-per my
convenience, I’m focusing on below topics,
 All Tags and Properties;
 HTML5 <svg> and <path> tags (this is for creating UML diagrams,
mostly arrows and boxes used in flowcharts is my need);
 HTML5 wildcards, etc…

DESIGN OF A PAGE IS HINTED BELOW

HTML TAGS HTML BODY HTML TAGS SYNTAX
LISTING ON CONTENTS ON ON THE RIGHT SIDE
THE RIGHT SIDE CENTER OF THE OF THE WEBPAGE
PROVIDE CSS WEBPAGE PROVIDE PROVIDE CSS
CSS
Don’ts:
  Here, administration panel could allow me edit left section, right section and
body section of the webpage without any discomfort.

HTML SUB-SUB-HEADER LINK DESIGN FINISHED

CSS SUB-SUB-HEADER LINK DESIGN

Do’s:

 I cover every contents that falls under CSS and CSS3 and on body of the
webpage with the proper styling and panel, I upload the said contents as-per my
convenience, I’m focusing on below topics,
 All Properties associated with CSS/CSS3 {primary or secondary};
 Animations associated with CSS/CSS3;
 Colors, textures-detailing, etc…

DESIGN OF A PAGE IS HINTED BELOW

CSS PROPERTIES CSS PROPERTIES CSS PROPERTIES SYNTAX
LISTING ON DETAILING ON ON THE RIGHT SIDE
THE RIGHT SIDE CENTER OF THE OF THE WEBPAGE
PROVIDE CSS WEBPAGE PROVIDE PROVIDE CSS
CSS

Don’ts:

 Here, administration panel could allow me edit left section, right section and
body section of the webpage without any discomfort.
 Don’t stress on output of CSS Properties for this webpage, I’m covering that in
my templates-section.

CSS SUB-SUB-HEADER LINK DESIGN FINISHED

JAVASCRIPT SUB-SUB-HEADER LINK DESIGN

Do’s:

 I cover every contents that falls under JAVASCRIPT and on body of the webpage
with the proper styling and panel, I upload the said contents as-per my
convenience, I’m focusing on below topics,
 All FUNCTIONS/FEATURES associated with JAVASCRIPT with ALL-
VERSIONS {primary or secondary};
  JavaScript Console-based contents with outputs;
 etc…
 I’m also expecting a Web-Console only for this webpage either embed on the
webpage or the part of the administration panel, so that I could able to see the
output of my JavaScript Contents that is, it is for my personal use only.

DESIGN OF A PAGE IS HINTED BELOW

JAVASCRIPT JAVASCRIPT JAVASCRIPT
FUNCTIONS FUNCTIONS FUNCTIONS SYNTAX
LISTING ON DETAILING ON ON THE RIGHT SIDE
THE RIGHT SIDE CENTER OF THE OF THE WEBPAGE
PROVIDE CSS WEBPAGE PROVIDE PROVIDE CSS
CSS

Don’ts:

 Here, administration panel could allow me edit left section, right section and
body section of the webpage without any discomfort.
 I want contents based on notes of a student which comprises of main heading,
sub-heading, points and many other ways of detailing/explaining, I want all
those in my CSS-Styling as-well-as in my Administration Panel also.

JAVASCRIPT SUB-SUB-HEADER LINK DESIGN FINISHED

TEMPLATES-SECTION SUB-SUB-HEADER LINK DESIGN

Do’s:

 In this very special page of my website, I want to show every CSS/CSS3

Properties with the outputs with one property at a time and combination of
properties as-per my requirement.
 I want an A.P.I. integration functionality for this page only, my motive is to have
a set of APIs which I allow to share to someone who wants the contents of this
page.

DESIGN OF A PAGE IS HINTED BELOW

CSS PROPERTIES CSS PROPERTIES CSS PROPERTIES SYNTAX
LISTING ON DETAILING WITH ON THE RIGHT SIDE
THE RIGHT SIDE OUTPUT ON THE OF THE WEBPAGE
PROVIDE CSS BODY OF WEBPAGE PROVIDE CSS
 PROVIDE CSS

Don’ts:

 Here Contents Styling is same and output (in image format only) is expecting by
me, no real time output is needed and if Image-format-output is seeming vague,
then follow the same style for CSS-contents and via API, I share my code to
concerned visitor who needs.

TEMPLATES-SECTION SUB-SUB-HEADER LINK DESIGN FINISHED

CONTENTS SUB-HEADER LINK DESIGN FINISHED
ESSENCEOFTODAY LINK DESIGN FINISHED
BLOGS SUB-HEADER LINK DESIGN
When, any visitor hovers the link, then five new sub-sub-headers should open, below is
their separate url(s),
 https://www.essenceoftoday.org/blogs/online_selling and,
 https://www.essenceoftoday.org/blogs/recruitment_helping
Also, on the body of a “blogs webpage”, put a space for my video-session, only one
recorded (or live, “is live-streaming is possible?”) video session embed on the webpage
so that I interact with my visitors and detailing them about my future plans, and other
things, might be manageable on administration panel’s end and here provide CSS
where I wrote a ‘short detailing with points’ for my sub-sub-sub headers and
contents of the webpage(s) with inputs from my side from my various social media
handles.
ONLINE_SELLING SUB-SUB-HEADER LINK DESIGN
Do’s:

 I need on my webpage body, rows-column configuration under the proportion of

10*5 where I upload images of my products (medicines items-&-gifts items)
under the styling part and below every image, I want very-first field of quantity
availability, email and contact number and at last my current account number
(it is optional and I’m settle with three/four fields only as per-case).
 Administration Panel should have the necessary functionalities for image
uploading and image changes as-per my will.

DESIGN OF A PAGE IS HINTED BELOW

 10*5 rows*columns array for storing images and under every image three fields
are needed that is,
I. First Field for Quantity Availability;
II. Second Field is for email, and;
III. Thirds Field is for contact#.
Don’ts:

 It is not an e-commerce platform, please don’t consider that and provide me

necessary CSS-Styling and fields just below it.
 I’m not expecting any sort of payment-gateway integration with my webpage.
 Any visitor who visits my webpage if wants to click on any image then very first,
he/she contacts me either through email or through telephonic-call and no e-
commerce kind of functionalities is needed by me.

ONLINE_SELLING SUB-HEADER LINK DESIGN FINISHED

RECRUITMENT_HELPING SUB-SUB-HEADER LINK DESIGN
Do’s:

 Here, I want a fully-responsive form login/register on the body of the

webpage as I mentioned earlier and when registration is finished then on the
body-portion of the webpage I want only a single display section where I post
an advertisement (only single advertisement at a time only I want and
advertisement should be on text-format only, images/logo not needed) for an
opening in a company and below that, questions related to the job-profile is
going to posted by the administrator {is it possible in a web-page to have a
space for a visitor to answer the questions???} and based on that, I will offer
him/her to build the desired profile-resume and send him/her to the
concerned company.

DESIGN OF A PAGE IS HINTED BELOW

LOGIN/LOGOUT-FORM and REGISTRATION-FORM on body of a webpage then

as-per the administrator’s choice, a text-based advertisement is display by the
administrator on that webpage’s body and just below that I ask several questions
related to that particular job profile and if visitor wishes to answer than he/she
should first enroll with essenceoftoday.
Don’ts:
  It is not naukri.com or indeed.com job-portal platform but a simple blog where I
place only one job opportunity whenever I have to and you provide me necessary
CSS-Styling and administrator functionalities and database-schema to fulfil this.

RECRUITMENT_HELPING SUB-HEADER LINK DESIGN FINISHED

BLOGS SUB-HEADER LINK DESIGN FINISHED
Date Closed: 18th May. 2024
WEBFLOW for USER-INTEFCAE DESIGN

My website theme should follow colors which is their inside my LOGO that is menu-
section, footer-section and body-of-webpage.

At the top-center of welcome page, one link is needed which when clicked four sub-
links opens, the first two sub-links are about-us and contact-us and the contents of
both are on same page then contents sub-link which when clicked five sub-links
created, one is covering html/html5 contents, second is covering css/css3 contents,
third is covering javascript contents, fourth link is templates section (css/css3 contents
with output) and fifth link is extended contents section, fourth sub-link is for blogs
section which when click two sub-links opens one link is for online_selling, here provide
me 10*5 rows*columns for images and below every image three fields and last link is
for recruitment_helping, here registration form is needed then when login is done
visitor could see the current job opening (only one at a time) and just below that my
question should be there.

On Welcome Page, after the link, I want a cover-page and below that definitions are
needed by me 6*3 rows*columns with read-more link as desired by me. Also, I want a
space for advertisement either on top-left or top-right or on both-sides if possible once
my website has enough visitors footfall.

On Contents and Blogs web-page, I want a space for video and summary (point-wise)
for my contents and extended-contents.

WEBFLOW for USER-INTEFCAE DESIGN FINISHED

Date Closed: 18th May. 2024
WEBFLOW for USER-INTEFCAE DESIGN IN DETAIL

Dear Shailesh Thakur and Amit Mondal,

I’m again writing a webflow using the fully elaborated way and in point-wise manner
for FIGMA generation, as-per my conversation on 20th May. 2024, Shailesh Sir misses
many points and I ask him to let me write down all the design points for every webpage
of my website https://essenceoftoday.org.

“Please make a NOTE (Amit Mondal and Team) here that I want more
than one MASTER CSS FILE, why because my website is not limited to
contents related html/css/javascript but since I’m uploading contents from
various other subject domains, English dictionary format, etc., So when I
got those MASTER CSS FILES in separate folder then it would be easier to
upload contents (topic-wise, point-wise, elaboration, diagrams in picture-
format of biology, physics chemistry mathematics etc., english dictionary
etc., literary-work etc., flowcharts etc., statistics, etc.) through
ADMINISTRATION-PANEL in near future with ease.”

My website consists of more than one page, I first write down my desired URLs point-
wise then I elaborate the much needed design for my each and every webpage(s),
please see,

 https://essenceoftoday.org/#  Welcome Page or Index Page;

 On Top Centre of the page, only one link ESSENCEOFTODAY should be
mentioned and no any kind of menubar is entertained by me and when
visitor clicks-on then sub-menubar opens with four links like,
 https://essenceoftoday.org/aboutUS/
 https://essenceoftoday.org/contactUS/
 https://essenceoftoday.org/contentsPage/
 https://essenceoftoday.org/blogsPage/
 https://essenceoftoday.org/adhyaan/
 https://essenceoftoday.org/gurukul/
 Below that link, I want a Cover-Page where a message should be shown,
like “It is an education platform and portal to help school and college
students in dealing with school and college subjects along-with aiming an
effort to asks the students to contribute to the ESSENCEOFTODAY by
giving their time to prepare and share the concepts which become
noteworthy to other students” with my FULL-PHOTOGRAPH in the left of
cover-page.
 Below the Cover-Page, my definitions will start which is arrange in
rows*columns format as 6*3.
  https://essenceoftoday.org/topic_definitions  This page opens only when
visitor wants to see more in the definition in welcome-page after clicking
the readMore-Link and that is the dynamic webpage(s).
 https://essenceoftoday.org/aboutUS  ABOUT-US Page;
 Put all my messages here only on the body of Second Webpage.
 In Footer-Section, I write all my contacts, I don’t want contact-form.
 https://essenceoftoday.org/contactUS  CONTACT-US Page;
 In Footer-Section of that same Second Webpage, my contact details
should be noted down and only on Second-Page I want a footer-section
not on any other-page.
 https://essenceoftoday.org/contentsPage  CONTENTS PAGE(S);
 When visitors click the link, five sub-links open, that is
 https://essenceoftoday.org/contentsPage/HTML5Contents  Here
my focus is to display each and every property of HTML/HTML5 in
my contents.
 https://essenceoftoday.org/contentsPage/CSS3Contents  Here my
focus is to display each and every property of CSS/CSS3 in my
contents.
 https://essenceoftoday.org/contentsPage/JavaScriptContents 
Here my focus is to display each and every
property/features/functions/constructs of JAVASCRIPT in my
contents with Web-Console (for my internal use) at the bottom of
the same webpage only.
 https://essenceoftoday.org/contentsPage/Templates_Section 
Here my focus is to display CSS3 Properties with its corresponding
output covering small tasks to big tasks (that is, in this webpage I
cover all aspects of designing using HTML/CSS/JAVASCRIPT by
mentioning small projects, medium projects and large-scale
projects {animations etc.}) in such a fashion that any visitor who
wants a project for his/her project or for his/her practice will
connect with me via. my API (Application Programming Interface).
 https://essenceoftoday.org/contentsPage/extended_Contents_Regio
n  Here a CSS Developer should give me a desired Master-File
filled with CSS-Coding so that I later on add more sub-menus from
the administration-panel subject-wise and body of webpage(s)
filled with properly-styled contents.
 https://essenceoftoday.org/blogsPage  BLOGS PAGE(S)
 https://essenceoftoday.org/blogsPage/online_selling/
 https://essenceoftoday.org/blogsPage/recruitment_helping/
 https://essenceoftoday.org/blogsPage/rough_notes/
 https://essenceoftoday.org/blogsPage/enrollment_form/
 FIGMA WORK STARTS FROM HERE

1. Welcome Page Design: It is the Very First Page of my website

https://essenceoftoday.org and Index-Page in technical terminology. Its URL-
Structure is https://essenceoftoday.org/# and its design points is mentioned
below, When any visitor visits this page, then he/she see following design-
patterns content-wise on the webpage and points are,
A. At the Top Center of Webpage, only one Link is going to be on display
and no menubar other than that is entertained by me, Link is
“ESSENCEOFTODAY” in a responsive manner.
B. On hovering the link, four sub-links open responsively, it’s a part of CSS-
Design Team to take care of that.
C. Placement of LOGO and website color theme is left to the website
development team, put a theme as-per the color of my logo if possible
and if possible give me any single color logo.
D. Website Development Team should also be providing me a space on my
welcome-page for advertisement-purpose or for some information from
my end, the space is only single and should be responsively aligned with
the welcome-page contents.
E. Administration Panel Functionalities have following features,
a. Dynamic editing and extending of contents on any webpage;
b. Should have every right to access my database and could also
add/edit/create/delete any records into the database with dynamic
modification of fields, if needed;
c. Could be able to upload and download attachments and place the
attachments on the webpage responsively;
d. Could able to see the traffic-of-visitors on the Administration
Panel;
e. Proper Authorization and Authentication features with Advanced
Login/Logout with Sessions and Cookies with proper visitor Time-
out, if requires.
f. Should have a fully advanced visitor registration and user
login/logout forms with fields of registration covering every aspect
of information followed by proper database schema.
g. It should have the functionality to manage video(s) on following
webpages of my website like,
 Contents Page,
 Blogs Page,
 Adhyyan Page and,
  Gurukul Page.
F. Below that Link, I want a Cover Page and the contents of a cover-page is
mentioned below,
a. My Message: It is an education platform and portal to help school
and college students in dealing with school and college subjects
along-with aiming an effort to asks the students to contribute to
the ESSENCEOFTODAY by giving their time to prepare and share
the concepts along-with problems designing and corresponding
solutions which is becoming noteworthy to other students in a long
run.
b. My All Social-Media Links like,
01. LinkedIn-Business Home-Page URL,
02. Instagram-Business Home-Page URL,
03. YouTube Channel Profile URL,
04. Twitter Home-Page URL and,
05. Facebook Business-Page URL.
c. Then the last-section of the welcome-page appears which is the
Definitions Section here I want at the start to have a definition
topics arranged in columns-By-rows manner with configuration is
my mind is 3-By-6.
d. CSS Design Team should arrange my definition topics like this only
in rows and columns in a responsive manner and when some
contents is written of the particular topic then CSS Design Team
will give me a read-more link and the purpose of that link is when
a visitor wishes to go deeper of the topic, then read-more link
could leads him or her to a dynamically created url, its general
structure is https://essenceoftoday.org/topic_definition_name/#
and Website Development Team’s responsibility is to provide a
separate css file for this for contents-styling and Administration-
Panel could allow me to extend or edit any content(s) whenever I
want and its figma-design I told later in this draft.
2. Topic Definition Name Page Design: Here Shailesh Sir, you’re required to
provide a layout with white background for placing contents just like a brilliant
student used to save his notes in his notes book(s), that is,
a. Main Topic Title;
b. Followed by description and paragraphs extends as-per the length
of the topic (CSS Design Team’s responsibility is to make this
length dynamic with storage of contents into the database with
proper database-schema) and sub-topic and its description;
c. If needed, placement of upload images on webpage just below the
ending paragraph and I don’t want to place image on left side or
on right side.
 d. Provide me bullets or numbering and sub-numbering in-case the
format is needed.
e. Shailesh Sir, it is for single webpage and my design for all
dynamically created webpage (as-per the Topic Definition) is same,
So don’t need to think twice neither for number of pages and
styling of pages under
https://essenceoftoday.org/topic_definition_name/# and feel free
to clear any doubt with me and no need to provide more figma on
this, since only one page is sufficient.
3. ABOUT-US and CONTACT-US Page Design: CSS Design Team is required to
show following messages on this webpage responsively and it is not mean to be
edited on anyhow basis, please see,
 Message: I want to give only one message to all of my visitors who visits
my website, is that now the time is come to change the way of studying.
We have schools, colleges, universities, libraries (digital as-well),
professors and teachers but no idea on the proper way or style of studying
and I knew that it’s a big struggle to understand a single concept by your
own and it takes a specific time to make understand the same concept to
students and we don’t know how much time a concept is going to take to
become understandable by the student(s) since for school students from
classes 1st Standard to 12th Standard load of studies increases on yearly
basis.
 Pledge: My only pledge is to ensure the lifetime connection (I’m looking
for CROWDFUNDING for my effort) between the person and me, who is
going to devote his/her valuable time to prepare contents with me for my
website as-per my direction.
 Aim: My Aim is to make this website reach among the maximum number
of learners who believe that the contents of this website will help them to
learn concepts in a unique fashion and also it might help them to create
their “school projects” & “school notes for their school homework” &
“examination related studies” & “picking important topics from the
website on regular basis” as-per their liking.
 Goals: My Goals is to add the contents in my website in time-to-time basis
as-per my understanding of concepts and my style of detailing.
 Vision: My Vision is to look forward to encouraging the school students to
connect with me via. my MOBILE-APPLICATION (either Android or
React-Native) and provide their helping-hands in designing the
PROBLEMS and the SOLUTIONS as-per the SUBJECTS.
 Mission: My Mission is to change “the current style of teaching” and “the
current style of learning” and “the current way of studying” to give a
skilled student to the Nation.
Shailesh Sir, this page should have three sections only, About-Us and Contact-Us on
menu-bar when link on welcome page is clicked by the visitor and this webpage opens
dynamically, my statements on body of webpage and my contacts on footer-section of
this webpage only (Website Design Team, please make a note on that). What is
required as a content in footer section, see below points,
 All Social Media Icons (links);
 My YouTube Channel handler or URL;
 Rest of the details I add by myself via. Administration Panel.
Website Design team should give me a proper CSS styling for footer section of this
webpage of my website https://essenceoftoday.org.
4. Contents Page Design: This Webpage have a main body with menu-headers at
top which comprises of five sub-headers, I’m again mentioning the same,
 https://essenceoftoday.org/contentsPage
α https://essenceoftoday.org/contentsPage/HTML5Contents
α https://essenceoftoday.org/contentsPage/CSS3Contents
α https://essenceoftoday.org/contentsPage/JavaScriptContents
α https://essenceoftoday.org/contentsPage/Templates_Section
α https://essenceoftoday.org/contentsPage/Extended_Contents_Regio
n
Shailesh Sir, when a visitor visits this webpage, then he/she could see below
points, please make a note,
 Here, I’m going to display points (& sub-points) regarding my contents in
short-details and wrote the summary of it in paragraph format.
 Below, website design team give me a space where only one video of mine
should be their where visitor could hear and see what I’m saying relating
to studies and my further strategies for my coaching classes business
(start-up).
 At last, I’m mentioning details of my video in paragraph format just
below the video.
 Now, I give design points for all my sub-headers in a separate manner,
please go through,
 For HTML5-CONTENTS webpage, Shailesh Sir and Amit
Mondal and his Website Development Team are well aware of the
type of contents needed under HTML5 contents, that is ‘HTML-
TAGS’.
 Here I’m covering every feature present in HTML5 i.e., core-tags,
advanced-tags, Canvas Element(s) for animation(s), MathML for
mathematics symbols, Special Characters and ASCII Characters
etc.
 I’m expecting from CSS Design Team to select left-end of this
webpage for displaying list of HTML-TAGS in index-like-manner
which is very common in now a day, right-end of this webpage to
display Syntax of each and every Tags and the Center Body of the
webpage for displaying the detailing of each and every tags.
 I’m expecting a responsive link between left-end of this webpage to
the right-end and with the body of the webpage as-well i.e. a
visitor could easily scroll down the body of the webpage through
index on the left-end of the webpage.
 Shailesh Sir, only one sample or example of content placing would
be sufficient for this webpage.
 For CSS3-CONTENTS webpage, Shailesh Sir and Amit Mondal
and his Website Development Team are well aware of the type of
contents needed under CSS3 contents, that is ‘CSS3-PROPERTIES’.
 Here I’m covering every feature present in CSS/CSS3 i.e., all-
properties and libraries-&-frameworks like
Bootstrap/SCSS/SASS/TailwindCSS etc.
 I’m expecting from CSS Design Team to select left-end of this
webpage for displaying list of CSS3 Properties in index-like-manner
which is very common in now a day, right-end of this webpage to
display Syntax of each and every Property and the Center Body of
the webpage for displaying the detailing of each and every
property.
 I’m expecting a responsive link between left-end of this webpage to
the right-end and with the body of the webpage as-well i.e. a
visitor could easily scroll down the body of the webpage through
index on the left-end of the webpage.
 Shailesh Sir, only one sample or example of content placing would
be sufficient for this webpage.
 For JAVASCRIPT-CONTENTS webpage, Shailesh Sir and Amit
Mondal and his Website Development Team are well aware of the
type of contents needed under JAVASCRIPT contents, that is all
sort of functions, properties, libraries, frameworks and
programming-constructs.
 Here I’m covering every feature present in JAVASCRIPT i.e.,
JavaScript Definitions, Functions, Features, Properties,
Embedding-JavaScript and other Programming-Constructs etc.
 I’m expecting from CSS Design Team to select left-end of this
webpage for displaying list of JAVASCRIPT Features in index-like-
manner which is very common in now a day, right-end of this
webpage to display Syntax of each and every Feature and the
 Center Body of the webpage for displaying the detailing of each
and every feature.
 I’m also expecting to have a functionality in Administration Panel
to let me have my own Web-Console, Amit Mondal told to me
earlier that it could be easily achievable. Don’t let any visitor to
have an access of the web-console except me since I’m going to
use it for running of JavaScript Constructs and checking of output.
 I’m expecting a responsive link between left-end of this webpage to
the right-end and with the body of the webpage as-well i.e. a
visitor could easily scroll down the body of the webpage through
index on the left-end of the webpage.
 Shailesh Sir, only one sample or example of content placing would
be sufficient for this webpage.
 For TEMPLATES-SECTION webpage, Shailesh Sir and Amit
Mondal my contents type is a collection of HTML5, CSS3 &
JAVASCRIPT, i.e. here my motive is to display every project
possible either the project-size is small, or project-size is big or
project-size is large or even-more, since here I show the usage of
the combining of html/css/javascript to achieve a well-defined goal
with output check is done by me on external basis before uploading
the contents.
 I’m expecting from CSS Design Team to select left-end of this
webpage for displaying index and list of index comprises of Project-
Names only and rest of the part of the webpage middle-and-right
are covering my contents in-details.
 I’m also expecting to have a functionality in Administration Panel
to let me have my own A.P.I. (Application Programming Interface),
the wholesole purpose of the API is to allow me to give my API to
any other client of mine who took API from me to access my
Project(s) in the Templates Section of the Template Webpage.
 Shailesh Sir, for sample I leave it on you only or you can skip this
as-well.
 For EXTENDED-CONTENTS-SECTION webpage, this
webpage’s figma is not needed at the moment and this webpage
might have more sub webpage(s) which I add as-per the
functionality present in the Administration Panel, i.e. I could add
the sub-headers (i.e.,
https://essenceoftoday.org/contentsPage/Extended_Content_Regio
n/Physics_Contents_ByExample/ ), and I thereby add my contents,
sub-contents, points, definitions, formulae, diagrams etc. on body
of the webpage on my own as-per the sub-headers-topic with the
 help of Administration Panel in a pre-defined responsive way as-
suitable and sub-headers could be increasing or decreasing
depends on Administrator only.
 Proper Database-Schema is required for this whole Website Project
with C.R.U.D. operations is applied on each-&-every webpage
through Administration Panel.
5. Blogs Page Design: This Webpage have a main body with menu-headers at top
which comprises of four sub-headers,
 https://essenceoftoday.org/blogsPage
α https://essenceoftoday.org/blogsPage/onlineSelling
α https://essenceoftoday.org/blogsPage/recruitmentHelping
α https://essenceoftoday.org/blogsPage/Rough_Notes
α https://essenceoftoday.org/blogsPage/Enrollment_Form
Shailesh Sir, when a visitor visits this webpage, then he/she could see below
points, please make a note,
 Here, I’m going to display points (& sub-points) regarding my blogs
related contents in short-details and wrote the summary of it in
paragraph format.
 Below, website design team give me a space where only one video of mine
should be their where visitor could hear and see what I’m saying relating
to studies and my further strategies for my coaching classes business
(start-up).
 At last, I’m mentioning details of my video in paragraph format just
below the video.
 I’m requesting to Website Development Team to provide me two fully
advanced forms one on administration-panel and one on
recruitment_helping webpage as a first option or second option is to give
only one form on last webpage (i.e.
https://essenceoftoday.org/blogsPage/Enrollment_Form) which is fully
administered by the administrator (i.e., by me) with addition and deletion
of fields as-per my choice with proper database schema at the backend.
 Now, I give design points for all my sub-headers in a separate manner,
please go through,
 For onlineSelling webpage when the visitor opens the blogs page
and clicks to get into this webpage, then the webpage look is
mentioned below by me,
 One Responsive Title, “!!!Welcome to Online Selling Blogs
Page!!!”.
 Below that, on Body of the webpage you are supposed to
give me CSS-Stylings for displaying pictures in a
column*row format (I mentioned about it on several basis),
 the desired format is 5*8 (columns*rows) and below every
picture I need only three fields, that is,
 First field is displaying quantity of available item
displayed,
 Second Field is for mentioning my mail-ID for proper
mail-conversation,
 Third Field is for the contact number so-that any
visitor could reach me direct.
 Shailesh Sir, it is just like a blog which I’m desiring to
have.
 Don’t misinterpret this webpage with ecommerce and I do
not want any type of payment-gateway and any sort of
micro-services, my aim is just to display items to help my
father medicines agency and my recent gift’s shop, any
visitor wishes to buy any product from this webpage could
either contact me through email or through telephonic-call.
 For recruitmentHelping webpage when the visitor opens the blogs
page and clicks to get into this webpage, then the webpage look is
mentioned below by me,
 One Responsive Title, “!!!Welcome to Recruitment Helping
Blogs Page!!!”.
 Below that, on Body of the webpage you are supposed to
give me CSS-Styling which ensures that any visitor who visits
this webpage could see only one opening posted by the
administrator at a time with the kind of opening and
number of positions needed and roles-&-responsibilities
needed for that particular profile and along with that, with
the help of Administration Panel an administrator could
able to asks few questions from the visitor with his answers
on the webpage only one at a time only and multiple
answering by more than one visitor(s) is not-allowed and the
format of questions/answers I’m going to ask is I mentioning
below, that is,
 Administration Panel could allow me to post multiple
questions on below of the Job-Posting-Information by
me.
 Administration Panel could allow me to receive
answers which is saved into the database having
proper database schema.
 Shailesh Sir, it is just like a blog which I’m desiring to
have.
  Don’t misinterpret this webpage with naukri-or-indeed type
of job-portals and I do not want any type of features for
searching, multiple job-postings, keywords, resume
searching etc. on this webpage, my only aim is just to
engage a visitor if he/she desires a Job, and my eight plus
years of experience in Recruitment Industry will allow me to
help them in searching for the desired placement and asks
them to let me create their online Resume, if they want.
 For roughNotes webpage,
 Here I’m expecting to have a dashboard kind of view where
I ask any visitor who wishes to give me his/her content or
based on our mutual deal provide me a content in any
format, I could upload his/her contents related document on
this webpage of mine and with the help of Administration
Panel, could able to save it in the database having proper
database schema.
 Give me more than one options to display attachments like,
 .pdf format;
 .doc format;
 .jpg format;
 .png format;
 .jpeg format;
 .xlsx format;
 .xlsm format; or,
 .xls format
 Shailesh Sir, you leave this page since there is no specific
direction of FIGMA Design in my mind, if you’ve drew some
idea of it, then you were welcome.
 For enrollmentForm webpage,
 If only one form is reliable, then don’t give me that form on
the Administration Panel as I earlier want, but I choose this
webpage to help me to get connected with the visitors of
mine.
 Here I’m expecting an advanced form covering all aspects
for information gathering of visitors by my end.
 Through administration panel, I could apply CRUD
operations on each-&-every field of the form for
Registration Purpose.
 I Want Login Form on Administration Panel and on Very
Last Webpage of my website that is, on this webpage only
(https://essenceoftoday.org/blogsPage/Enrollment_Form)
 with user authentication and user authorization is must for
Login/Logout/Registration etc.
 I’m not declaring fields here since it is understood by the
website development team about what to provide, fields-
with-proper-labels-and-constraints.
 Shailesh Sir, you leave this page since there is no specific
direction of FIGMA Design in my mind, if you’ve drew some
idea of it, then you were welcome.
6. Adhyyan Page Design: This Webpage requires a CSS-Styling in a format where I
could interact with students/visitors and with the help of Administration Panel I
could discuss about a random topic, the topic which I initiate and ask anyone to
contribute himself/herself in order to extend the topic further for providing
future benefits to some other students’ in dire needs and here I want below CSS-
Styling,
 Placing of Video of mine on the body of the webpage,
 CSS for displaying contents following all paragraph-writing rules, and
 Administration Panel to handle the visitor who connects with me on this
webpage of mine, i.e., https://essenceoftoday.org/adhyyan.
7. Gurukul Page Design: This Webpage requires a CSS-Styling in a format where I
could write the contents in Hindi and Sanskrit along with regular English and
here also I want below CSS-Styling,
 Placing of Video of mine on the body of the webpage,
 CSS for displaying contents following all paragraph-writing rules, and
 Administration Panel to handle Sanskrit and Hindi Contents along with
video for the webpage https://essenceoftoday.org/gurukul/.
FIGMA WORK FINISHED
WEBFLOW for USER-INTEFCAE DESIGN IN DETAIL FINISHED
Date Closed: 5th Jun. 2024/21st Jun. 2024