100 days of code (from day 15)

in #coding5 years ago

Day 15 concluded our HTML tutorial, while we continued with CSS. It's been fun all through. Today is Day 17 and I'll be dropping all what we've done from day 15 till date. Don't mind the tenses, they were written on the said date.

Day 15
We rounded up with forms today by creating a bigger form with everything we've learnt so far. The text form, radio buttons, select options, checkboxes and a submit button. A new code was introduced; the "fieldset" and "legend", which made the form to be in box while the text housing the legend span across the box.

Here is the code I made to create the form.


Capture.PNG

As you can see, the text fields were created after forming the fieldset. Those text fields contains the main details. Then, I moved on to the radio buttons and select options. The remaining part of the code is shown below:

Capture2.PNG

Then, the output....

Capture1.PNG

When you click on the select options, it will bring out other phone options to select from.

Interesting, right? Well, that's the end of form creation. Let's wait and see what tomorrow will bring.

Day 16
The form rounded up our HTML tasks. Today, we moved on to CSS (Cascading Style Sheets). CSS are the codes written to beautify out HTML page, and we started by adding some colors to our texts. After learning various ways of adding CSS codes to our file, we decided to start with the inline styling.

According to the task, three H1 tags were to be created and styled. This is my output below:


Capture.PNG

The first header has a gold background color and a brown text. The second has a green background color and a white text. The third has a brown background color and a cyan text. All the headers has the same width; 200px to be exact.

We've gotten to the stage where beautiful webpages will be shown. Stay tuned and expect more. If you haven't join the train, it's not too late. Click on the task link and join us. Meanwhile, I'm looking forward to the next task.

See you on day 17!

Day 17
Hello and welcome to day 17. It's the second day of learning CSS, and today something new was introduced. We went further with the other way of inputting our CSS codes: the internal styling. Here, our style file is placed in the head tag.

The code and the output is shown below:


Capture.PNG

As you can see, the styling was done before the body codes was written. The body was made to have a violet background color and the paragraph in the body tag has it's background color and color of texts, too.

That's it about internal styling. See you tomorrow!

Sort:  

Thanks for using eSteem!
Your post has been voted as a part of eSteem encouragement program. Keep up the good work! Install Android, iOS Mobile app or Windows, Mac, Linux Surfer app, if you haven't already!
Learn more: https://esteem.app
Join our discord: https://discord.gg/8eHupPq

Coin Marketplace

STEEM 0.18
TRX 0.15
JST 0.029
BTC 62938.05
ETH 2552.06
USDT 1.00
SBD 2.63