diff --git a/README.md b/README.md index c3e02c3f..270432cd 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,61 @@ # Capstone Project For AI-enhanced Web3 Frontend Development Course Welcome to the Capstone Project for the AI-Enhanced Web3 Frontend Development Course at dProgramming University. Follow the instructions below to complete your project submission. -Follow the [course lesson project instructions here](https://dprogramminguniversity.com/freecourses/ai-enhanced-web3-frontend-development-course/freelessons/capstone-project-html-build-dapp-website-html-structure-with-ai/) on how to work with this repo to submit your project for approval and certification +Follow the [course lesson project instructions here] https://dprogramminguniversity.com/freecourses/ai-enhanced-web3-frontend-development-course/freelessons/capstone-project-html-build-dapp-website-html-structure-with-ai/on how to work with this repo to submit your project for approval and certification + +## Lesson 1 +Here I was introduced to HTML and how it is used to build the structure of webpages. + +## Lesson 2 +Here I was made to understand what HTML tags are and what they do for example +### Headings: +h1: Main heading (largest font size) +h2: Subheading (smaller font size) +h3: Sub-subheading (even smaller font size) + +### Paragraphs and Text: +p: Paragraph of text +span: Inline text container (for styling or semantics) +br: Line break + +### Links: +a: Hyperlink (anchor tag) + +### Images: +img: Image element (src attribute specifies image URL) + +## Lesson 3: +Here I learnt about HTML elements + +## Lesson 4: +Here I learnt about HTML attributes and what they do + +## Lesson 5: +I learnt how to start using HTML to crafts simple documents + +## Lesson 6: +I learnt how to use HTML to structure tables and forms for webpages and dApps + +## Lesson 7: +I learnt how to link HTML pages and how to make use of the Anchor tags and hyperlinks + +## Lesson 8: +I learnt how to embed media like images, videos and audio to webpages with the use of img, video and audio tags + +## Lesson 9: +Here I learnt new elements of HTML 5 + +## Lesson 10: +Here I learnt about HTML semantics and best practices like the use of media queries to ensure that the website is responsive + +## Lesson 11: +Here I was introduced to HTML development tools and templates and also the use of AI enhancement + +## Challenges I Faced +One of the challenges I faced was how to properly structure HTML tags and elements so that items can be easily pointed to for styling with CSS. + +## Solution +I solved this problem by constantly practicing and taking advantage of the reference for further study that they author gave us + +## My Experience +In all it was an exciting experience and I am grateful to the tutor for putting this together. \ No newline at end of file diff --git a/dpu-frontend-css/README.md b/dpu-frontend-css/README.md new file mode 100644 index 00000000..270432cd --- /dev/null +++ b/dpu-frontend-css/README.md @@ -0,0 +1,61 @@ +# Capstone Project For AI-enhanced Web3 Frontend Development Course +Welcome to the Capstone Project for the AI-Enhanced Web3 Frontend Development Course at dProgramming University. Follow the instructions below to complete your project submission. + +Follow the [course lesson project instructions here] https://dprogramminguniversity.com/freecourses/ai-enhanced-web3-frontend-development-course/freelessons/capstone-project-html-build-dapp-website-html-structure-with-ai/on how to work with this repo to submit your project for approval and certification + +## Lesson 1 +Here I was introduced to HTML and how it is used to build the structure of webpages. + +## Lesson 2 +Here I was made to understand what HTML tags are and what they do for example +### Headings: +h1: Main heading (largest font size) +h2: Subheading (smaller font size) +h3: Sub-subheading (even smaller font size) + +### Paragraphs and Text: +p: Paragraph of text +span: Inline text container (for styling or semantics) +br: Line break + +### Links: +a: Hyperlink (anchor tag) + +### Images: +img: Image element (src attribute specifies image URL) + +## Lesson 3: +Here I learnt about HTML elements + +## Lesson 4: +Here I learnt about HTML attributes and what they do + +## Lesson 5: +I learnt how to start using HTML to crafts simple documents + +## Lesson 6: +I learnt how to use HTML to structure tables and forms for webpages and dApps + +## Lesson 7: +I learnt how to link HTML pages and how to make use of the Anchor tags and hyperlinks + +## Lesson 8: +I learnt how to embed media like images, videos and audio to webpages with the use of img, video and audio tags + +## Lesson 9: +Here I learnt new elements of HTML 5 + +## Lesson 10: +Here I learnt about HTML semantics and best practices like the use of media queries to ensure that the website is responsive + +## Lesson 11: +Here I was introduced to HTML development tools and templates and also the use of AI enhancement + +## Challenges I Faced +One of the challenges I faced was how to properly structure HTML tags and elements so that items can be easily pointed to for styling with CSS. + +## Solution +I solved this problem by constantly practicing and taking advantage of the reference for further study that they author gave us + +## My Experience +In all it was an exciting experience and I am grateful to the tutor for putting this together. \ No newline at end of file diff --git a/dpu-frontend-css/frontend.html b/dpu-frontend-css/frontend.html new file mode 100644 index 00000000..a056c0e9 --- /dev/null +++ b/dpu-frontend-css/frontend.html @@ -0,0 +1,197 @@ + + + + + + Token Minter dApp + + + + + + + + +
+
+ TOUCH TECH TOKEN MINTER DAPP + + +
+
+ + +
+ +
+

This dApp allows users to mint their own tokens on the blockchain.

+
+ + +
+

Mint Your Token

+
+
+ + +
+
+ + +
+
+ +
+
+
+ + +
+

About This dApp

+

This dApp is a simple interface to mint custom tokens on the blockchain.

+
+ + +
+

Minted Tokens

+ + + + + + + + + + + + + + + + + +
Token NameAmount
Token A100
Token B200
+
+ + +
+

Set Token Pricing

+
+
+ + +
+
+ +
+
+
+ + +
+

Connect Your Wallet

+ +
+ + + + + +
+

Transaction History

+ + + + + + + + + + + + + + + + + + +
DateToken NameAmountStatus
2023-09-08Token A100Success
+
+ + +
+

Frequently Asked Questions

+
+
+

+ +

+
+
+ This dApp allows users to mint custom tokens on the blockchain. +
+
+
+
+

+ +

+
+
+ You can connect your wallet using the "Connect Wallet" button above. +
+
+
+ +
+
+
+ + + + + + + + diff --git a/dpu-frontend-css/globalstylesheet.css b/dpu-frontend-css/globalstylesheet.css new file mode 100644 index 00000000..4014916e --- /dev/null +++ b/dpu-frontend-css/globalstylesheet.css @@ -0,0 +1,35 @@ + /* Background gradient for the body */ + body { + background: linear-gradient(to right, #4facfe, #00f2fe); + color: #333; +} +/* Navbar styling */ +.navbar { + background-color: white; +} +.navbar .nav-link { + color: #555; + font-weight: 500; +} + +.navbar .nav-link:hover { + background-color: #4facfe; + color: white; + padding: 5px; + border-radius: 5px; +} +/* Button animation */ +.btn-animate { + transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; +} +.btn-animate:hover { + transform: scale(1.05); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} +/* Token item image hover effect */ +.token-item img { + transition: transform 0.3s ease-in-out; +} +.token-item img:hover { + transform: rotate(10deg); +} \ No newline at end of file diff --git a/dpu-frontend-css/media/images/image1.png b/dpu-frontend-css/media/images/image1.png new file mode 100644 index 00000000..aad37e48 Binary files /dev/null and b/dpu-frontend-css/media/images/image1.png differ diff --git a/dpu-frontend-css/media/images/image2.png b/dpu-frontend-css/media/images/image2.png new file mode 100644 index 00000000..156a59f1 Binary files /dev/null and b/dpu-frontend-css/media/images/image2.png differ diff --git a/dpu-frontend.html b/dpu-frontend.html new file mode 100644 index 00000000..01a86ed1 --- /dev/null +++ b/dpu-frontend.html @@ -0,0 +1,197 @@ + + + + + + Token Minter dApp + + + + + + + + +
+
+ TOUCH TECH TOKEN MINTER DAPP + + +
+
+ + +
+ +
+

This dApp allows users to mint their own tokens on the blockchain.

+
+ + +
+

Mint Your Token

+
+
+ + +
+
+ + +
+
+ +
+
+
+ + +
+

About This dApp

+

This dApp is a simple interface to mint custom tokens on the blockchain.

+
+ + +
+

Minted Tokens

+ + + + + + + + + + + + + + + + + +
Token NameAmount
Token A100
Token B200
+
+ + +
+

Set Token Pricing

+
+
+ + +
+
+ +
+
+
+ + +
+

Connect Your Wallet

+ +
+ + + + + +
+

Transaction History

+ + + + + + + + + + + + + + + + + + +
DateToken NameAmountStatus
2023-09-08Token A100Success
+
+ + +
+

Frequently Asked Questions

+
+
+

+ +

+
+
+ This dApp allows users to mint custom tokens on the blockchain. +
+
+
+
+

+ +

+
+
+ You can connect your wallet using the "Connect Wallet" button above. +
+
+
+ +
+
+
+ + + + + + + +