├── 01 What is HTML5 & CSS3 in web design
└── helloworld.html
├── 02 What is the head vs body vs html tag in a web design page
└── understanding-bodyhtmlhead.html
├── 03 How to add structure to your website using Div Tags
└── divtags.html
├── 04 How to create a seperate cascading style sheet in HTML & CSS
├── divtags.html
└── style.css
├── 05 How to create index.html and styles.css
├── index.html
└── style.css
├── 06 How to add an images to a website using HTML what is alt
├── __MACOSX
│ ├── ._index.html
│ ├── ._style.css
│ └── images
│ │ └── ._logo-adare-restaurant.png
├── images
│ └── logo-adare-restaurant.png
├── index.html
└── style.css
├── 07 How to change the font style size & color of h1 p in HTML CSS
├── __MACOSX
│ ├── ._index.html
│ ├── ._style.css
│ └── images
│ │ └── ._logo-adare-restaurant.png
├── images
│ └── logo-adare-restaurant.png
├── index.html
└── style.css
├── 08 How to make a clickable link in html & change the color
├── images
│ └── logo-adare-restaurant.png
├── index.html
└── style.css
├── 09 How to add a stretching background image to a website
├── images
│ ├── .DS_Store
│ ├── background-adare-restaurant.jpg
│ └── logo-adare-restaurant.png
├── index.html
└── style.css
├── 10 How make a div tag transparent using HTML & CSS in VS Code
├── images
│ ├── .DS_Store
│ ├── background-adare-restaurant.jpg
│ └── logo-adare-restaurant.png
├── index.html
└── style.css
├── 11 How to create a simple website text navigation in HTML & CSS
├── images
│ ├── .DS_Store
│ ├── background-adare-restaurant.jpg
│ └── logo-adare-restaurant.png
├── index.html
└── style.css
├── 12 How to css style more than one class tag at a time compound classes
├── images
│ ├── .DS_Store
│ ├── background-adare-restaurant.jpg
│ └── logo-adare-restaurant.png
├── index.html
└── style.css
├── 13 How to add footer
├── images
│ ├── .DS_Store
│ ├── background-adare-restaurant.jpg
│ └── logo-adare-restaurant.png
├── index.html
└── style.css
├── 14 How to add a simple email button to a website using mailto in HTML
├── __MACOSX
│ ├── ._index.html
│ ├── ._style.css
│ └── images
│ │ ├── ._.DS_Store
│ │ ├── ._background-adare-restaurant.jpg
│ │ └── ._logo-adare-restaurant.png
├── images
│ ├── .DS_Store
│ ├── background-adare-restaurant.jpg
│ └── logo-adare-restaurant.png
├── index.html
└── style.css
├── 15 How to add Google Maps to your website using embed codes
├── images
│ ├── .DS_Store
│ ├── background-adare-restaurant.jpg
│ └── logo-adare-restaurant.png
├── index.html
└── style.css
├── LICENSE
└── README.md
/01 What is HTML5 & CSS3 in web design/helloworld.html:
--------------------------------------------------------------------------------
1 |
22 |
23 |
24 |
25 |
This is my heading 1
26 |
Heading 2
27 |
This is body text.
--------------------------------------------------------------------------------
/02 What is the head vs body vs html tag in a web design page/understanding-bodyhtmlhead.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Document
11 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
Hello Dan
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/03 How to add structure to your website using Div Tags/divtags.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Div Tags
8 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
First Box
23 |
24 |
25 |
26 |
Second Box
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/04 How to create a seperate cascading style sheet in HTML & CSS/divtags.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Div Tags
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
14 |
15 |
--------------------------------------------------------------------------------
/05 How to create index.html and styles.css/style.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: greenyellow;
3 | font-size 100px;
4 | }
5 |
6 | h2 {
7 | color: blue;
8 | }
9 | h3 {
10 | color: aqua;
11 | }
--------------------------------------------------------------------------------
/06 How to add an images to a website using HTML what is alt/__MACOSX/._index.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/06 How to add an images to a website using HTML what is alt/__MACOSX/._index.html
--------------------------------------------------------------------------------
/06 How to add an images to a website using HTML what is alt/__MACOSX/._style.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/06 How to add an images to a website using HTML what is alt/__MACOSX/._style.css
--------------------------------------------------------------------------------
/06 How to add an images to a website using HTML what is alt/__MACOSX/images/._logo-adare-restaurant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/06 How to add an images to a website using HTML what is alt/__MACOSX/images/._logo-adare-restaurant.png
--------------------------------------------------------------------------------
/06 How to add an images to a website using HTML what is alt/images/logo-adare-restaurant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/06 How to add an images to a website using HTML what is alt/images/logo-adare-restaurant.png
--------------------------------------------------------------------------------
/06 How to add an images to a website using HTML what is alt/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Adare Restaurant
8 |
9 |
10 |
11 |
12 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/06 How to add an images to a website using HTML what is alt/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #2F3035;
3 | }
4 |
5 |
6 | .container {
7 | margin-left: auto;
8 | margin-right: auto;
9 | width: 1024px;
10 | }
11 |
12 | header {
13 | background-color: blue;
14 | height: 118px;
15 | }
16 |
17 | nav {
18 | background-color: red;
19 | height: 40px;
20 | }
21 |
22 | main {
23 | background-color: orange;
24 | height: 400px;
25 | }
26 |
27 | footer {
28 | background-color: greenyellow;
29 | height: 100px;
30 | }
31 |
--------------------------------------------------------------------------------
/07 How to change the font style size & color of h1 p in HTML CSS/__MACOSX/._index.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/07 How to change the font style size & color of h1 p in HTML CSS/__MACOSX/._index.html
--------------------------------------------------------------------------------
/07 How to change the font style size & color of h1 p in HTML CSS/__MACOSX/._style.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/07 How to change the font style size & color of h1 p in HTML CSS/__MACOSX/._style.css
--------------------------------------------------------------------------------
/07 How to change the font style size & color of h1 p in HTML CSS/__MACOSX/images/._logo-adare-restaurant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/07 How to change the font style size & color of h1 p in HTML CSS/__MACOSX/images/._logo-adare-restaurant.png
--------------------------------------------------------------------------------
/07 How to change the font style size & color of h1 p in HTML CSS/images/logo-adare-restaurant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/07 How to change the font style size & color of h1 p in HTML CSS/images/logo-adare-restaurant.png
--------------------------------------------------------------------------------
/07 How to change the font style size & color of h1 p in HTML CSS/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Adare Restaurant
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
let's meat
22 |
We love sharing good food with great people. We bring over 30 years industry experience and passion to Adare. With a dishes that are carefully designed to bring you a truly satisfying Irish food experience that you are sure to remember.
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/07 How to change the font style size & color of h1 p in HTML CSS/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #2F3035;
3 | }
4 |
5 |
6 | .container {
7 | margin-left: auto;
8 | margin-right: auto;
9 | width: 1024px;
10 | }
11 |
12 | header {
13 | height: 118px;
14 | text-align: center;
15 | }
16 |
17 | nav {
18 | background-color: red;
19 | height: 40px;
20 | }
21 |
22 | main {
23 | height: 400px;
24 | text-align: center;
25 | padding-top: 80px;
26 | padding-left: 240px;
27 | padding-right: 240px;
28 | }
29 |
30 | footer {
31 | background-color: greenyellow;
32 | height: 100px;
33 | }
34 |
35 | h1 {
36 | font-size: 84px;
37 | color: white;
38 | font-family: Arial, Helvetica, sans-serif;
39 | }
40 |
41 | p {
42 | font-size: 18px;
43 | color: white;
44 | font-family: Arial, Helvetica, sans-serif;
45 | }
--------------------------------------------------------------------------------
/08 How to make a clickable link in html & change the color/images/logo-adare-restaurant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/08 How to make a clickable link in html & change the color/images/logo-adare-restaurant.png
--------------------------------------------------------------------------------
/08 How to make a clickable link in html & change the color/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Adare Restaurant
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
let's meat
22 |
We love sharing good food with great people. We bring over 30 years industry experience and passion to Adare. With a dishes that are carefully designed to bring you a truly satisfying Irish food experience that you are sure to remember.
29 |
30 |
31 |
--------------------------------------------------------------------------------
/08 How to make a clickable link in html & change the color/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #2F3035;
3 | }
4 |
5 |
6 | .container {
7 | margin-left: auto;
8 | margin-right: auto;
9 | width: 1024px;
10 | }
11 |
12 | header {
13 | height: 118px;
14 | text-align: center;
15 | }
16 |
17 | nav {
18 | background-color: red;
19 | height: 40px;
20 | }
21 |
22 | main {
23 | height: 400px;
24 | text-align: center;
25 | padding-top: 80px;
26 | padding-left: 240px;
27 | padding-right: 240px;
28 | }
29 |
30 | footer {
31 | background-color: greenyellow;
32 | height: 100px;
33 | }
34 |
35 | h1 {
36 | font-size: 84px;
37 | color: white;
38 | font-family: Arial, Helvetica, sans-serif;
39 | }
40 |
41 | p {
42 | font-size: 18px;
43 | color: white;
44 | font-family: Arial, Helvetica, sans-serif;
45 | }
46 |
47 | a {
48 | color: white;
49 | font-family: Arial, Helvetica, sans-serif;
50 | /* text-decoration: none; */
51 | }
--------------------------------------------------------------------------------
/09 How to add a stretching background image to a website/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/09 How to add a stretching background image to a website/images/.DS_Store
--------------------------------------------------------------------------------
/09 How to add a stretching background image to a website/images/background-adare-restaurant.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/09 How to add a stretching background image to a website/images/background-adare-restaurant.jpg
--------------------------------------------------------------------------------
/09 How to add a stretching background image to a website/images/logo-adare-restaurant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/09 How to add a stretching background image to a website/images/logo-adare-restaurant.png
--------------------------------------------------------------------------------
/09 How to add a stretching background image to a website/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Adare Restaurant
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
let's meat
22 |
We love sharing good food with great people. We bring over 30 years industry experience and passion to Adare. With a dishes that are carefully designed to bring you a truly satisfying Irish food experience that you are sure to remember.
29 |
30 |
31 |
--------------------------------------------------------------------------------
/09 How to add a stretching background image to a website/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | height: 100%;
3 | }
4 |
5 |
6 | body {
7 | background-color: #2F3035;
8 | background-image: url(images/background-adare-restaurant.jpg);
9 | background-size: cover;
10 | background-repeat: no-repeat;
11 | background-position: center;
12 | }
13 |
14 |
15 | .container {
16 | margin-left: auto;
17 | margin-right: auto;
18 | width: 1024px;
19 | }
20 |
21 | header {
22 | height: 118px;
23 | text-align: center;
24 | }
25 |
26 | nav {
27 | background-color: red;
28 | height: 40px;
29 | }
30 |
31 | main {
32 | height: 400px;
33 | text-align: center;
34 | padding-top: 80px;
35 | padding-left: 240px;
36 | padding-right: 240px;
37 | }
38 |
39 | footer {
40 | background-color: greenyellow;
41 | height: 100px;
42 | }
43 |
44 | h1 {
45 | font-size: 84px;
46 | color: white;
47 | font-family: Arial, Helvetica, sans-serif;
48 | }
49 |
50 | p {
51 | font-size: 18px;
52 | color: white;
53 | font-family: Arial, Helvetica, sans-serif;
54 | }
55 |
56 | a {
57 | color: white;
58 | font-family: Arial, Helvetica, sans-serif;
59 | /* text-decoration: none; */
60 | }
--------------------------------------------------------------------------------
/10 How make a div tag transparent using HTML & CSS in VS Code/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/10 How make a div tag transparent using HTML & CSS in VS Code/images/.DS_Store
--------------------------------------------------------------------------------
/10 How make a div tag transparent using HTML & CSS in VS Code/images/background-adare-restaurant.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/10 How make a div tag transparent using HTML & CSS in VS Code/images/background-adare-restaurant.jpg
--------------------------------------------------------------------------------
/10 How make a div tag transparent using HTML & CSS in VS Code/images/logo-adare-restaurant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/10 How make a div tag transparent using HTML & CSS in VS Code/images/logo-adare-restaurant.png
--------------------------------------------------------------------------------
/10 How make a div tag transparent using HTML & CSS in VS Code/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Adare Restaurant
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
let's meat
22 |
We love sharing good food with great people. We bring over 30 years industry experience and passion to Adare. With a dishes that are carefully designed to bring you a truly satisfying Irish food experience that you are sure to remember.
29 |
30 |
31 |
--------------------------------------------------------------------------------
/10 How make a div tag transparent using HTML & CSS in VS Code/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | height: 100%;
3 | }
4 |
5 |
6 | body {
7 | background-color: #2F3035;
8 | background-image: url(images/background-adare-restaurant.jpg);
9 | background-size: cover;
10 | background-repeat: no-repeat;
11 | background-position: center;
12 | }
13 |
14 |
15 | .container {
16 | margin-left: auto;
17 | margin-right: auto;
18 | width: 1024px;
19 | }
20 |
21 | header {
22 | height: 118px;
23 | text-align: center;
24 | }
25 |
26 | nav {
27 | background-color: rgba(0, 0, 0, 0.338);
28 | height: 40px;
29 | }
30 |
31 | main {
32 | height: 400px;
33 | text-align: center;
34 | padding-top: 80px;
35 | padding-left: 240px;
36 | padding-right: 240px;
37 | }
38 |
39 | footer {
40 | background-color: greenyellow;
41 | height: 100px;
42 | }
43 |
44 | h1 {
45 | font-size: 84px;
46 | color: white;
47 | font-family: Arial, Helvetica, sans-serif;
48 | }
49 |
50 | p {
51 | font-size: 18px;
52 | color: white;
53 | font-family: Arial, Helvetica, sans-serif;
54 | }
55 |
56 | a {
57 | color: white;
58 | font-family: Arial, Helvetica, sans-serif;
59 | /* text-decoration: none; */
60 | }
--------------------------------------------------------------------------------
/11 How to create a simple website text navigation in HTML & CSS/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/11 How to create a simple website text navigation in HTML & CSS/images/.DS_Store
--------------------------------------------------------------------------------
/11 How to create a simple website text navigation in HTML & CSS/images/background-adare-restaurant.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/11 How to create a simple website text navigation in HTML & CSS/images/background-adare-restaurant.jpg
--------------------------------------------------------------------------------
/11 How to create a simple website text navigation in HTML & CSS/images/logo-adare-restaurant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/11 How to create a simple website text navigation in HTML & CSS/images/logo-adare-restaurant.png
--------------------------------------------------------------------------------
/11 How to create a simple website text navigation in HTML & CSS/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Adare Restaurant
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
26 |
27 |
28 |
let's meat
29 |
We love sharing good food with great people. We bring over 30 years industry experience and passion to Adare. With a dishes that are carefully designed to bring you a truly satisfying Irish food experience that you are sure to remember.
36 |
37 |
38 |
--------------------------------------------------------------------------------
/11 How to create a simple website text navigation in HTML & CSS/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | height: 100%;
3 | }
4 |
5 |
6 | body {
7 | background-color: #2F3035;
8 | background-image: url(images/background-adare-restaurant.jpg);
9 | background-size: cover;
10 | background-repeat: no-repeat;
11 | background-position: center;
12 | }
13 |
14 |
15 | .container {
16 | margin-left: auto;
17 | margin-right: auto;
18 | width: 1024px;
19 | }
20 |
21 | header {
22 | height: 118px;
23 | text-align: center;
24 | }
25 |
26 | nav {
27 | background-color: rgba(0, 0, 0, 0.338);
28 | height: 40px;
29 | text-align: center;
30 | }
31 |
32 | main {
33 | height: 400px;
34 | text-align: center;
35 | padding-top: 80px;
36 | padding-left: 240px;
37 | padding-right: 240px;
38 | }
39 |
40 | footer {
41 | background-color: greenyellow;
42 | height: 100px;
43 | }
44 |
45 | h1 {
46 | font-size: 84px;
47 | color: white;
48 | font-family: Arial, Helvetica, sans-serif;
49 | }
50 |
51 | p {
52 | font-size: 18px;
53 | color: white;
54 | font-family: Arial, Helvetica, sans-serif;
55 | }
56 |
57 | a {
58 | color: white;
59 | font-family: Arial, Helvetica, sans-serif;
60 | /* text-decoration: none; */
61 | }
--------------------------------------------------------------------------------
/12 How to css style more than one class tag at a time compound classes/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/12 How to css style more than one class tag at a time compound classes/images/.DS_Store
--------------------------------------------------------------------------------
/12 How to css style more than one class tag at a time compound classes/images/background-adare-restaurant.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/12 How to css style more than one class tag at a time compound classes/images/background-adare-restaurant.jpg
--------------------------------------------------------------------------------
/12 How to css style more than one class tag at a time compound classes/images/logo-adare-restaurant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/12 How to css style more than one class tag at a time compound classes/images/logo-adare-restaurant.png
--------------------------------------------------------------------------------
/12 How to css style more than one class tag at a time compound classes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Adare Restaurant
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
26 |
27 |
28 |
let's meat
29 |
We love sharing good food with great people. We bring over 30 years industry experience and passion to Adare. With a dishes that are carefully designed to bring you a truly satisfying Irish food experience that you are sure to remember.
We love sharing good food with great people. We bring over 30 years industry experience and passion to Adare. With a dishes that are carefully designed to bring you a truly satisfying Irish food experience that you are sure to remember.
38 |
39 |
40 |
--------------------------------------------------------------------------------
/13 How to add footer/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | height: 100%;
3 | }
4 |
5 |
6 | body {
7 | background-color: #2F3035;
8 | background-image: url(images/background-adare-restaurant.jpg);
9 | background-size: cover;
10 | background-repeat: no-repeat;
11 | background-position: center;
12 | }
13 |
14 |
15 | .container {
16 | margin-left: auto;
17 | margin-right: auto;
18 | width: 1024px;
19 | }
20 |
21 | header {
22 | height: 118px;
23 | text-align: center;
24 | }
25 |
26 | nav {
27 | background-color: rgba(0, 0, 0, 0.338);
28 | text-align: center;
29 | padding-top: 14px;
30 | padding-bottom: 14px;
31 | }
32 |
33 | main {
34 | height: 400px;
35 | text-align: center;
36 | padding-top: 80px;
37 | padding-left: 240px;
38 | padding-right: 240px;
39 | }
40 |
41 | footer {
42 | background-color: rgba(0, 0, 0, 0.728);
43 | padding-top: 50px;
44 | padding-bottom: 50px;
45 | }
46 |
47 | h1 {
48 | font-size: 84px;
49 | color: white;
50 | font-family: Arial, Helvetica, sans-serif;
51 | }
52 |
53 | p {
54 | font-size: 18px;
55 | color: white;
56 | font-family: Arial, Helvetica, sans-serif;
57 | }
58 |
59 | a {
60 | color: white;
61 | font-family: Arial, Helvetica, sans-serif;
62 | /* text-decoration: none; */
63 | }
64 |
65 | nav a {
66 | text-decoration: none;
67 | font-size: 12px;
68 | padding-left: 10px;
69 | padding-right: 10px;
70 | }
71 |
72 | footer p {
73 | font-size: 10px;
74 | text-align: center;
75 | color: rgb(198, 198, 198);
76 | }
77 |
78 |
--------------------------------------------------------------------------------
/14 How to add a simple email button to a website using mailto in HTML/__MACOSX/._index.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/14 How to add a simple email button to a website using mailto in HTML/__MACOSX/._index.html
--------------------------------------------------------------------------------
/14 How to add a simple email button to a website using mailto in HTML/__MACOSX/._style.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/14 How to add a simple email button to a website using mailto in HTML/__MACOSX/._style.css
--------------------------------------------------------------------------------
/14 How to add a simple email button to a website using mailto in HTML/__MACOSX/images/._.DS_Store:
--------------------------------------------------------------------------------
1 | Mac OS X 2 F x @ ATTR x x
--------------------------------------------------------------------------------
/14 How to add a simple email button to a website using mailto in HTML/__MACOSX/images/._background-adare-restaurant.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/14 How to add a simple email button to a website using mailto in HTML/__MACOSX/images/._background-adare-restaurant.jpg
--------------------------------------------------------------------------------
/14 How to add a simple email button to a website using mailto in HTML/__MACOSX/images/._logo-adare-restaurant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/14 How to add a simple email button to a website using mailto in HTML/__MACOSX/images/._logo-adare-restaurant.png
--------------------------------------------------------------------------------
/14 How to add a simple email button to a website using mailto in HTML/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/14 How to add a simple email button to a website using mailto in HTML/images/.DS_Store
--------------------------------------------------------------------------------
/14 How to add a simple email button to a website using mailto in HTML/images/background-adare-restaurant.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/14 How to add a simple email button to a website using mailto in HTML/images/background-adare-restaurant.jpg
--------------------------------------------------------------------------------
/14 How to add a simple email button to a website using mailto in HTML/images/logo-adare-restaurant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/14 How to add a simple email button to a website using mailto in HTML/images/logo-adare-restaurant.png
--------------------------------------------------------------------------------
/14 How to add a simple email button to a website using mailto in HTML/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Adare Restaurant
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
26 |
27 |
28 |
let's meat
29 |
We love sharing good food with great people. We bring over 30 years industry experience and passion to Adare. With a dishes that are carefully designed to bring you a truly satisfying Irish food experience that you are sure to remember.
38 |
39 |
40 |
--------------------------------------------------------------------------------
/14 How to add a simple email button to a website using mailto in HTML/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | height: 100%;
3 | }
4 |
5 |
6 | body {
7 | background-color: #2F3035;
8 | background-image: url(images/background-adare-restaurant.jpg);
9 | background-size: cover;
10 | background-repeat: no-repeat;
11 | background-position: center;
12 | }
13 |
14 |
15 | .container {
16 | margin-left: auto;
17 | margin-right: auto;
18 | width: 1024px;
19 | }
20 |
21 | header {
22 | height: 118px;
23 | text-align: center;
24 | }
25 |
26 | nav {
27 | background-color: rgba(0, 0, 0, 0.338);
28 | text-align: center;
29 | padding-top: 14px;
30 | padding-bottom: 14px;
31 | }
32 |
33 | main {
34 | height: 400px;
35 | text-align: center;
36 | padding-top: 80px;
37 | padding-left: 240px;
38 | padding-right: 240px;
39 | }
40 |
41 | footer {
42 | background-color: rgba(0, 0, 0, 0.728);
43 | padding-top: 50px;
44 | padding-bottom: 50px;
45 | }
46 |
47 | h1 {
48 | font-size: 84px;
49 | color: white;
50 | font-family: Arial, Helvetica, sans-serif;
51 | }
52 |
53 | p {
54 | font-size: 18px;
55 | color: white;
56 | font-family: Arial, Helvetica, sans-serif;
57 | }
58 |
59 | a {
60 | color: white;
61 | font-family: Arial, Helvetica, sans-serif;
62 | /* text-decoration: none; */
63 | }
64 |
65 | nav a {
66 | text-decoration: none;
67 | font-size: 12px;
68 | padding-left: 10px;
69 | padding-right: 10px;
70 | }
71 |
72 | footer p {
73 | font-size: 10px;
74 | text-align: center;
75 | color: rgb(198, 198, 198);
76 | }
77 |
78 |
--------------------------------------------------------------------------------
/15 How to add Google Maps to your website using embed codes/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/15 How to add Google Maps to your website using embed codes/images/.DS_Store
--------------------------------------------------------------------------------
/15 How to add Google Maps to your website using embed codes/images/background-adare-restaurant.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/15 How to add Google Maps to your website using embed codes/images/background-adare-restaurant.jpg
--------------------------------------------------------------------------------
/15 How to add Google Maps to your website using embed codes/images/logo-adare-restaurant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeMacrocosm/Basic-HTML-CSS-Training/2a6bc7b8557a43a1e3e6665142967d470e56b09c/15 How to add Google Maps to your website using embed codes/images/logo-adare-restaurant.png
--------------------------------------------------------------------------------
/15 How to add Google Maps to your website using embed codes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Adare Restaurant
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
26 |
27 |
28 |
let's meat
29 |
We love sharing good food with great people. We bring over 30 years industry experience and passion to Adare. With a dishes that are carefully designed to bring you a truly satisfying Irish food experience that you are sure to remember.
48 |
49 |
50 |
--------------------------------------------------------------------------------
/15 How to add Google Maps to your website using embed codes/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | height: 100%;
3 | }
4 |
5 |
6 | body {
7 | background-color: #2F3035;
8 | background-image: url(images/background-adare-restaurant.jpg);
9 | background-size: cover;
10 | background-repeat: no-repeat;
11 | background-position: center;
12 | }
13 |
14 |
15 | .container {
16 | margin-left: auto;
17 | margin-right: auto;
18 | width: 1024px;
19 | }
20 |
21 | header {
22 | height: 118px;
23 | text-align: center;
24 | }
25 |
26 | nav {
27 | background-color: rgba(0, 0, 0, 0.338);
28 | text-align: center;
29 | padding-top: 14px;
30 | padding-bottom: 14px;
31 | }
32 |
33 | main {
34 | height: 400px;
35 | text-align: center;
36 | padding-top: 80px;
37 | padding-left: 240px;
38 | padding-right: 240px;
39 | }
40 |
41 | footer {
42 | background-color: rgba(0, 0, 0, 0.728);
43 | padding-top: 50px;
44 | padding-bottom: 50px;
45 | }
46 |
47 | h1 {
48 | font-size: 84px;
49 | color: white;
50 | font-family: Arial, Helvetica, sans-serif;
51 | }
52 |
53 | p {
54 | font-size: 18px;
55 | color: white;
56 | font-family: Arial, Helvetica, sans-serif;
57 | }
58 |
59 | a {
60 | color: white;
61 | font-family: Arial, Helvetica, sans-serif;
62 | /* text-decoration: none; */
63 | }
64 |
65 | nav a {
66 | text-decoration: none;
67 | font-size: 12px;
68 | padding-left: 10px;
69 | padding-right: 10px;
70 | }
71 |
72 | footer p {
73 | font-size: 10px;
74 | text-align: center;
75 | color: rgb(198, 198, 198);
76 | }
77 |
78 | .maps {
79 | padding-bottom: 100px;
80 | }
81 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 CodeMacrocosm
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Restaurant Website - 15-Day HTML & CSS Training 🍽️💻
2 |
3 | Welcome to the Restaurant Website project! 🍽️
4 |
5 | This repository hosts a comprehensive 15-day training program led by Shreya Malogi. Here, you'll find a wealth of resources derived from the training workshop. These materials are designed to assist you in mastering the essentials of HTML and CSS for web development.🚀
6 |
7 | ## Project Overview
8 |
9 | By the end of this 15-day training, you will have the knowledge and skills to create your own website. Whether you're a beginner or looking to refresh your web development skills, this project is designed to guide you through the essentials of HTML and CSS. 🎓
10 |
11 | ## Modules
12 |
13 | This repository is organized into several modules, each covering a specific topic in web development. Here's a brief overview of the modules available: 📚
14 |
15 | 1. [What is HTML5 & CSS3 in web design](01%20What%20is%20HTML5%20%26%20CSS3%20in%20web%20design)
16 | 2. [What is the head vs body vs html tag in a web design page](02%20What%20is%20the%20head%20vs%20body%20vs%20html%20tag%20in%20a%20web%20design%20page)
17 | 3. [How to add structure to your website using Div Tags](03%20How%20to%20add%20structure%20to%20your%20website%20using%20Div%20Tags)
18 | 4. [How to create a separate cascading style sheet in HTML & CSS](04%20How%20to%20create%20a%20separate%20cascading%20style%20sheet%20in%20HTML%20%26%20CSS)
19 | 5. [How to create index.html and styles.css](05%20How%20to%20create%20index.html%20and%20styles.css)
20 | 6. [How to add images to a website using HTML what is alt](06%20How%20to%20add%20images%20to%20a%20website%20using%20HTML%20what%20is%20alt)
21 | 7. [How to change the font style, size & color of h1, p in HTML CSS](07%20How%20to%20change%20the%20font%20style%2C%20size%20%26%20color%20of%20h1%2C%20p%20in%20HTML%20CSS)
22 | 8. [How to make a clickable link in HTML & change the color](08%20How%20to%20make%20a%20clickable%20link%20in%20HTML%20%26%20change%20the%20color)
23 | 9. [How to add a stretching background image to a website](09%20How%20to%20add%20a%20stretching%20background%20image%20to%20a%20website)
24 | 10. [How to make a div tag transparent using HTML & CSS in VS Code](10%20How%20to%20make%20a%20div%20tag%20transparent%20using%20HTML%20%26%20CSS%20in%20VS%20Code)
25 | 11. [How to create a simple website text navigation in HTML & CSS](11%20How%20to%20create%20a%20simple%20website%20text%20navigation%20in%20HTML%20%26%20CSS)
26 | 12. [How to CSS style more than one class tag at a time compound classes](12%20How%20to%20CSS%20style%20more%20than%20one%20class%20tag%20at%20a%20time%20compound%20classes)
27 | 13. [How to add footer](13%20How%20to%20add%20footer)
28 | 14. [How to add a simple email button to a website using mailto in HTML](14%20How%20to%20add%20a%20simple%20email%20button%20to%20a%20website%20using%20mailto%20in%20HTML)
29 | 15. [How to add Google Maps to your website using embed codes](15%20How%20to%20add%20Google%20Maps%20to%20your%20website%20using%20embed%20codes)
30 |
31 | ## Why This Project? 🤔
32 |
33 | Learning web development is an exciting journey, and this project was created with a few key objectives in mind:
34 |
35 | 1. **Hands-On Learning:** We believe that the best way to learn is by doing. This project provides you with practical exercises and real-world examples to reinforce your HTML and CSS skills.
36 |
37 | 2. **Structured Training:** Web development can sometimes feel overwhelming due to its vastness. We've broken down the training into 15 modules, each focusing on a specific aspect of web development. This structured approach makes learning more manageable.
38 |
39 | 3. **Portfolio Building:** By the end of this training, you'll have the skills to create your own website. Whether it's a personal blog, a small business site, or an online portfolio, you can apply what you've learned to build your web presence.
40 |
41 | 4. **Community and Support:** Learning is more fun when you're part of a community. We encourage you to share your progress, ask questions, and collaborate with fellow learners. Together, we can make this learning journey more enjoyable and productive.
42 |
43 | ## Tech Stack Used 🛠️
44 |
45 | In this project, you'll work with a fundamental tech stack used in web development:
46 |
47 | - **HTML5:** The latest version of HTML for structuring content on web pages.
48 | - **CSS3:** The latest version of CSS for styling and layout of web pages.
49 | - **Visual Studio Code (VS Code):** A popular code editor that provides a seamless development environment.
50 | - **GitHub:** A platform for version control and collaboration, where you can access this project's code and contribute to its improvement.
51 |
52 | We've kept the stack simple to ensure that you grasp the basics of web development thoroughly. As you progress, you can explore more advanced technologies and frameworks to expand your skill set.
53 |
54 |
55 | ## Getting Started 🚀
56 |
57 | Feel free to explore the modules at your own pace. Each module comes with its own set of exercises and instructions to help you practice and learn.
58 |
59 | ## License 📜
60 |
61 | This project is open-source and available under the [MIT License](LICENSE).
62 |
63 | MIT License
64 |
65 | Copyright (c) 2020 CodeMacrocosm
66 |
67 | ## Star This Repository ⭐
68 |
69 | If you find this 15-day HTML & CSS training useful, don't forget to star this repository! Your feedback and support are greatly appreciated. 🙌
70 |
71 | ## Happy Coding! 🎉
72 |
73 | We wish you the best of luck as you embark on this web development journey. If you have any questions or need assistance, don't hesitate to reach out. Happy coding! 💻
74 |
75 |
--------------------------------------------------------------------------------
16 |