Home Page Design || HTML, CSS

~ Ꭺ𝔣𝔱𝔢𝔯 𝔇𝔞𝔯𝔨

[PROJECT - 1]

📌 LINK

YouTube || How To Make Website Using HTML And CSS | Website Design With HTML And CSS

https://youtu.be/PgAZ8KzfhO8?si=mmTQiXeyeWfWQLBO

Site එකේ content එක.

මේක ඇවිල්ලා interior design කරන කම්පැනි එකක homepage එකක්.

Home page එක විතරයි. Navigation tab තිබුනට කොහෙටවත් link කරලා නෑ.. නිකංම homepage එක.

මේකෙ තියෙනවා;

👾 company logo එක

👾 Tab කීපයක් එක්ක navigation bar එකක්

👾 page එකේ මැද text එකක් එක්ක tag line ටිකක්

👾 ඊලඟට බටන් දෙකක්

👾 button වලයි navigation tab වලයි, පොඩි transition ටිකක් තියෙනවා, colors වෙනස් වෙන lines appear වෙනව වගේ.

Tutorial එකෙන් ඉගෙනගත්තු වැදගත්ම දේවල්

👾 text document

text editor එකට ඇවිල්ලා නෙවේ මෙයා file හැදුවෙ.. නිකං folder එකෙ text file එකක් create කරලා ඒකට html, css extension දාලා. ඊලඟට ඒ file එක text editor එකෙන් open කළා. ඒක අලුත් දෙයක්..🤔

👾 index.html & style.css

ඊලඟට, මේ page එක හැදුවෙ file දෙකකින්. එකක් index.html එක. අනික style.css එක.

Index.html එකේ තමා page එකෙ ඔක්කොම item ටික තියෙන්නෙ.

Style.css එකේ තමා ඔක්කොම design ටික.

කොටින්ම logo එකෙ size එක හදන එක පවා කළේ style.css එකේ. Page එකට background pic එකක් දැම්මෙත්, css file එකේ .banner එකෙන්. ඒ එකක්වත් index.html එකට ගත්තෙ නෑ.

අන්තිමට html file එකේ head එකට css file එක link කරලා තමා design ටික ඒකට අරගත්තෙ, ක්ලාස් එකේ කලා වගේ ඔක්කොම ටික head එකේ ලිව්ව නෙවෙයි..🤔 ඒකත් අලුත්.. ඒ වගේම පැහැදිලි කියලා හිතෙනවා.. දිගටම follow කරන්න වටිනවා..🤔🌝

👾 එතකොට css file එක link කළේ මෙහෙම. style.css තමා ඒකෙ නම.

👾 divisions

මේකෙ තියෙන div ටික මුලින්ම කියන් ගියොත්,

මුලින්ම banner කියලා div එකක් හැදුවා.
ඊටපස්සෙ ඒක ඇතුලෙ navBar එකයි, content එකයි div දෙකක් දැම්ම. navBar එකේ තමා logo එකයි, navigation tab ටිකයි තියෙන්නෙ.
Content එකේ තමයි, heading, text, button ටික තියෙන්නෙ. Button 2 දැම්මෙත් වෙනම div එකක් ඇතුලට.

👾 div එකක් ගත්තු විදිහ.

Banner, navBar, content වගේ නමක් තියෙන ඒවට කලේ .banner කියලා enter කරපු එක. එතකොට <div class="banner"> </div> ටික ඉබේම ආවා. නමක් දාන් නැතුව හදපු button දාන div එක විතරයි type කරලා ගත්තෙ.

ඔය තමා මූලිකම ටික. Style.css එකේ දාපු අලුත් දේවල් ගොඩක් තියේ.. ඒවා එකින් එක පස්සෙ විස්තර කරන්නම්.

2023/09/22

To be continued..