From 323688ad95a8119516c318a2ed82ef444a5a1fdd Mon Sep 17 00:00:00 2001 From: Janith Udayanga Date: Tue, 1 Oct 2019 15:42:59 +0530 Subject: [PATCH 1/8] Update README.md --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index ea9bbaa..f459d3b 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Below is an overview of the terms. Open the similarly named HTML file and its CS Videos (2018): [Intro to Web Apps](https://www.youtube.com/channel/UCxbfCtXxHRLvN5cfnehpFLg/videos) -## basic +## Basic A plain vanilla HTML page with no CSS. @@ -14,13 +14,13 @@ A plain vanilla HTML page with no CSS. File: basic.html -## simple +## Simple This page has a CSS file attached. [View page.](http://macloo.github.io/html_css_templates/simple2.html) File: simple2.html -## box-sizing +## Box-Sizing Web pages by beginners often look horribly different in different Web browsers. Often this can be traced back to the ways in which `margin` and `padding` are specified in the CSS. Some web browsers interpret some aspects of `margin` and `padding` differently from other browsers. @@ -32,7 +32,7 @@ Video: [How box-sizing fixes a width problem (demo)](https://www.youtube.com/wat [Example page](http://macloo.github.io/html_css_templates/boxsizing.html) -## flexbox +## Flexbox Beginners can get very confused about the differences among `flex`, `float`, `grid`, and `inline-block` (all covered below). Think of `flex` as the modern solution to solving challenges with a set of small items (or boxes) on a page. However, for a full-page layout solution, look to `grid` instead. @@ -46,7 +46,7 @@ Resource 3 (video): [Flexbox Tutorial: Real Layout Examples](https://www.youtube [Example page](http://macloo.github.io/html_css_templates/flexbox.html) -## floats +## Floats In CSS, float declarations are commonly used to place elements (such as images, or sidebars) on a page. They pose challenges for beginners, in large part because usually they must be "cleared" after use. @@ -60,7 +60,7 @@ Video: [Clearing floats](https://www.youtube.com/watch?v=cEgwqCWuJXs&list=PLZFU- Video: [Comparing floats with positioning (demo)](https://www.youtube.com/watch?v=LaQZj1pXxG4&index=28&list=PLZFU-W6LLeecJuSQh20QUU_gCmS30sLTB) Relative, absolute, and fixed position are discussed after floats. -## grid +## Grid The CSS grid has revolutionized grid-style page layouts, making floats and inline-block styles unnecessary in many cases (but not all). Good planning is required before you can implement the grid effectively. See also `flexbox` above. @@ -76,7 +76,7 @@ Resource 4: [Layout Land](https://www.youtube.com/channel/UC7TizprGknbDalbHplROt Resource 5: [Grid by Example](https://www.youtube.com/watch?v=Dz9BzY21Zks&list=PLQkVA6z3dFvbnBJetfYDAF3-cG_ubgdZR) — super-short videos that each show how to do just one thing, by Rachel Andrew (check out her [website](https://gridbyexample.com/) too) -## inline-block +## Inline-Block It's possible to replace the `float` techniques with `display: inline-block`. Each method has issues, and each method requires that we use `box-sizing` to make it work properly. Beginners must understand that they cannot use the two together; it's an either/or choice. @@ -90,13 +90,13 @@ This stylesheet is widely used throughout the web design community to smooth out Resource: [Normalize.css](https://necolas.github.io/normalize.css/) -## universal selector +## Universal Selector The web design community expresses various opinions about use of the universal selector (\*) in CSS. It should not be overused. I use it for `box-sizing` in most of my CSS stylesheets. Resource: [Universal selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) (MDN) -## viewport / responsive pages +## Viewport / Responsive Pages All the pages here use the viewport meta tag in the HTML `head` element. It helps to make your pages look good on small screens, i.e. mobile. However, just slapping the tag on your page does not instantly fix everything. From ad9b229e01779c8805ff9bebd0da882f7767542e Mon Sep 17 00:00:00 2001 From: Janith Udayanga Date: Tue, 1 Oct 2019 15:49:20 +0530 Subject: [PATCH 2/8] Update simple.html --- simple.html | 8 -------- 1 file changed, 8 deletions(-) diff --git a/simple.html b/simple.html index ac0520f..542b189 100644 --- a/simple.html +++ b/simple.html @@ -16,14 +16,6 @@

A simple page for all device sizes

No media query is required here, because the CSS adapts to any screen size.

- Sita - -

Ravana carries Sita away to Lanka, where Sita is kept under the heavy guard of rakshasis. Ravana demands Sita marry him, but Sita, eternally devoted to Rama, refuses. Rama and Lakshmana learn about Sita's abduction, and immediately set out to save her. During their search, they meet the demon Kabandha and the ascetic Shabari, who direct them towards Sugriva, the monkey king, and Hanuman.*

- - Rama - -

Having received Hanuman's report on Sita, held prisoner in Lanka, Rama and Lakshmana proceed with their allies towards the shore of the southern sea. There they are joined by Ravana's renegade brother Vibhishana. The monkeys construct a giant floating bridge across the ocean, and the princes and their army cross over to Lanka. A lengthy battle ensues, in which Rama eventually kills Ravana.*

-

Below is a screenshot of the page as it would appear on an iPhone 6, rendered by Chrome Dev Tools.

Screenshot From 0ac49c8e57b74f35994ab34f600ec1f576ce564a Mon Sep 17 00:00:00 2001 From: Janith Udayanga Date: Fri, 25 Sep 2020 06:26:15 +0000 Subject: [PATCH 3/8] Update simple.html --- simple.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/simple.html b/simple.html index 542b189..ee6cb58 100644 --- a/simple.html +++ b/simple.html @@ -3,6 +3,8 @@ + + Simple page for all device sizes @@ -10,9 +12,9 @@ -

A simple page for all device sizes

+

A simple page for all device sizes.

-

The idea here is to style a page so that it looks nice and is readable on devices of all sizes. Using flexible units of measurement in CSS (such as rem and percent), as well as max-width, makes this possible. Keep in mind the optimal line length for readability of the text. Depending on the font, a width of 700px yields a line length of about 80-90 characters with browser default settings. Although that is more than optimal, a line-height of 1.5rem (or 150%) makes it reasonable.

+

The idea here is to style a page so that it looks nice and is readable on devices of all sizes. Using flexible units of measurement in CSS (such as rem and percent), as well as Max-Width, makes this possible. Keep in mind the optimal line length for readability of the text. Depending on the font, a width of 700px yields a line length of about 80-90 characters with browser default settings. Although that is more than optimal, a line-height of 1.5rem (or 150%) makes it reasonable.

No media query is required here, because the CSS adapts to any screen size.

From e328c99766e5413b5316f6eccf23eb886b0e3b44 Mon Sep 17 00:00:00 2001 From: Janith Udayanga Date: Fri, 2 Oct 2020 12:14:22 +0530 Subject: [PATCH 4/8] Added columns example file --- Columns.html | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 Columns.html diff --git a/Columns.html b/Columns.html new file mode 100644 index 0000000..9891325 --- /dev/null +++ b/Columns.html @@ -0,0 +1,47 @@ + + + + + Ekanayaka EMTP + + + + +
+ Personal Information + Qualifications + Skills Performed + Photo Gallery +
+ + +
+ +
+ My photo +
+ + +
+

Name : Ekanayaka EMTP

+

+ BSC Management (UG), RUSL
+ MAAT +

+

Theme : Nature Lover

+

Address : No 117/A Malwatta road,
+ Godakawela

+

Education : Primary and Secondary
+ - R/Dharmapala Navodya School
+
+ Tertiary
+ - Rajarata University of Sri Lanka +

+

+ Passion : Become the leading Entrepreneur in flowery plantation industry in Sri Lanka +

+
+
+ + + \ No newline at end of file From 487e4771a79a0898cffc7266bb524933ae35e488 Mon Sep 17 00:00:00 2001 From: Janith Udayanga Date: Fri, 2 Oct 2020 06:46:14 +0000 Subject: [PATCH 5/8] Removed natigation menu removed navigation menu since it is not relevant to this tutorial --- Columns.html | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/Columns.html b/Columns.html index 9891325..79f4b68 100644 --- a/Columns.html +++ b/Columns.html @@ -6,22 +6,13 @@ - -
- Personal Information - Qualifications - Skills Performed - Photo Gallery -
- -
- +
My photo
- +

Name : Ekanayaka EMTP

@@ -44,4 +35,4 @@

Name : Ekanayaka EMTP

- \ No newline at end of file + From 2949f730e41ea6f36ef87ca7eed282ab341d1479 Mon Sep 17 00:00:00 2001 From: Janith Udayanga Date: Fri, 2 Oct 2020 06:48:03 +0000 Subject: [PATCH 6/8] Create column.css --- css/column.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 css/column.css diff --git a/css/column.css b/css/column.css new file mode 100644 index 0000000..421df7e --- /dev/null +++ b/css/column.css @@ -0,0 +1,17 @@ +* { + box-sizing: border-box; +} + +/* Create two equal columns that floats next to each other */ +.column { + float: left; + width: 50%; + padding: 10px; +} + +/* Clear floats after the columns */ +.row:after { + content: ""; + display: table; + clear: both; +} From 578d5a4519c6e4451ed362447aefc1ce5cbf34bc Mon Sep 17 00:00:00 2001 From: Janith Udayanga Date: Fri, 2 Oct 2020 06:53:08 +0000 Subject: [PATCH 7/8] Updated readme Updated readme with documentary for two column layout. --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index f459d3b..b356541 100644 --- a/README.md +++ b/README.md @@ -103,3 +103,13 @@ All the pages here use the viewport meta tag in the HTML `head` element Resource 1: [Stop using the viewport meta tag (until you know how to use it)](http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho) Resource 2: [Use CSS media queries for responsiveness](https://developers.google.com/web/fundamentals/design-and-ui/responsive/#css-media-queries) + +## HTML Two Column Layout + +When creating simple html sites very often you have to create two or more column layouts. In this file you can see how to create two column layouts with the help of html and css. + +Resource 1: [How to create columns in HTML](https://www.educative.io/edpresso/how-to-create-columns-in-html) + +The web design community expresses various opinions about use of the universal selector (\*) in CSS. It should not be overused. I use it for `box-sizing` in most of my CSS stylesheets. + +Resource: [Universal selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) (MDN) From b55be24f3ff6e75dc0589fd782cd346df2b3dedf Mon Sep 17 00:00:00 2001 From: Janith Udayanga Date: Fri, 2 Oct 2020 06:53:55 +0000 Subject: [PATCH 8/8] Update README.md --- README.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/README.md b/README.md index b356541..83db7ed 100644 --- a/README.md +++ b/README.md @@ -109,7 +109,3 @@ Resource 2: [Use CSS media queries for responsiveness](https://developers.google When creating simple html sites very often you have to create two or more column layouts. In this file you can see how to create two column layouts with the help of html and css. Resource 1: [How to create columns in HTML](https://www.educative.io/edpresso/how-to-create-columns-in-html) - -The web design community expresses various opinions about use of the universal selector (\*) in CSS. It should not be overused. I use it for `box-sizing` in most of my CSS stylesheets. - -Resource: [Universal selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) (MDN)