Let’s Practice HTML & CSS — 2

Ryan Kim

9 min readMar 4, 2020

The simplest way to practice HTML & CSS is doing clone codings

Slide 21 — Background HTML

Let’s build index.html.

We write down all codes in the HTML but do not have to do it all.

Type out exclamation mark(! — 느낌표) and enter. You can see the format of HTML is automatically made.

Add two <link> tag on here. The <link> tag defines a link between a document and an external resource. The <link> tag is used to link to external style sheets.

we apply style & index.css here. style.css will be applied to index.html, discover.html, and join.html all.

So, style.css is globally used because we will use Navbar and Footer.

Change <title> tag, too. A title tag is an HTML element that specifies the title of a web page. Title tags are displayed on search engine results pages (SERPs) as the clickable headline for a given result and are important for usability, SEO, and social sharing.

Did you write all? We gonna add one more thing here, class in the body tag.

The class is an attribute that specifies one or more class names for an HTML element.

The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.

Slide 22 — Background CSS

If you write down the class, you should know “Box-Model” to apply to index.html.

(박스 모델 설명)

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

(rem 설명)

rem is defined as the font-size of the root element. So, all references to rem will return the same value, regardless of ancestor font size.

(Margin 설명)

The CSS margin properties are used to create space around elements, outside of any defined borders. The default value of the margin is 8 px.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

(Padding 설명)

The padding property in CSS defines the innermost portion of the box model, creating space around an element’s content, inside of any defined margins and/or borders.

Padding values are set using lengths or percentages, and cannot accept negative values. The initial, or default, value for all padding properties is 0.

(vh, vw 설명)

view width: Relative to 1% of the width of the viewport

view height: Relative to 1% of the height of the viewport

We can adjust the ration of view using vh & vw.

(display: flex 설명)

CSS Flexible Box Layout, commonly known as Flexbox, is a CSS3 web layout model. It is in the W3C’s(World Wide Web Consortium) candidate recommendation stage. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size.

Slide 23

If you write all the CSS attributes, the background of the page will be displayed like this.

(Live-Server Installation)

You should install “live-server” here. The assistant will help you.

Slide 24 — Circle HTML

We add three div tags and write those classes. we are making circles in the background

Slide 25 — Circle CSS

(Position: Absolute 설명)

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

(Z-Index 설명)

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

(CSS RGB 설명)

The RGB color model is an additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.

(CSS Overflow 설명)

The CSS overflow property controls what happens to content that is too big to fit into an area. The overflow is clipped, and the rest of the content will be invisible

(CSS Transform 설명)

The transform the property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

(CSS ::before / ::after 설명)

The ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content.

Slide 26

We add those three circles in the background!

Slide 27 — add Navbar

The next step is creating a header part. Let’s write down the “index.html”

(img tag 설명)

The <img> tag defines an image in an HTML page. The <img> tag has two required attributes: src and alt. Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.

(box-sizing 설명)

The box-sizing property allows us to include the padding and border in an element’s total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height: Both divs are the same size now!

(<a>tag 설명)

The <a> tag defines a hyperlink, which is used to link from one page to another.

The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

Slide 28

(list-style 설명)

List-style is the icon style of the list. the basic icon is the small circle filled with black color but if you choose “none”, then we can make the icon invisible.

(Justify-content 설명)

The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. The interactive example below demonstrates some of the values using Grid Layout.

Slide 29

Check you made Navigation Bar at the top.

(강사들 돌아다니면서 에러 해결하기)

Slide 30

we build circles, Navbar, and add contents more, Lady and texts.

Slide 31

(Font-Weight 설명)

The font-weight property defines how bold you text are and there are a lot of possible values; normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, and inherit.

Slide 32

(align-items : stretch 설명)

stretch — Default. Items are stretched to fit the container

(Background Image)

The background-image property sets one or more background images for an element

(Align-items : flex-start)

align-items: flex-start; The flexbox items are aligned at the start of the cross axis.

Slide 33

Media queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution.

we can modify the ratio of our web application screen automatically for each device.

Slide 34

This is the result. You can adjust the ration of the screen with the google developer tool.

Slide 35

By the way, You have any questions when we get css with <link> tag?

(link 태그 다시 보기)

<link href=”styles.css” rel=”stylesheet”>

<link href=”index.css” rel=”stylesheet”>

how the tag recognize the location of the file without designating any direction?

There is magic. Absolute & Relative paths.

In simple words, an absolute path refers to the same location in a file system relative to the root directory, whereas a relative path points to a specific location in a file system relative to the current directory you are working on.

Slide 36

If you incorrectly designate the path, you will see the page. Thus, You should double-check the path of the files.

Slide 37 — discover page

So, we finally made the first page of this session. the first part of the discover.html page is completely the same with an index page.

Slide 38

The same process of the header page. You can copy & paste here

Slide 39

We should include these parts into a “container full-height-grow” class. Right below the header part.

Remember there are four <img> tags in the section tag.

Slide 40

Every part you write CSS, save the file. Then, you can check which elements are changed.

One thing is particular is the “.icon” class. I use icon class several times in the HTML file. That’s because I can apply CSS properties in all the same name classes.

So, all the icon classes have the same properties.

You just can modify the <img> tag in the icon classes using parent-children relations of CSS.

All CSS properties are repeated in the three HTML pages. You should notice the pattern of them.