A closer look at the project

I marked the elements HTML. Firstly we shouldn’t use too much elements. This will help us with managing our code.

struktury 2 - Copy

Tomorrow I’ll work with this.

Advertisements

don’t be afraid to change idea

I created a basic format of the page, and I’m a little disappointed. Yes that was early phase of project so i decide that i will work with 2 templates.

struktury 2

3. Reset.css

Before we begin our adventure with CSS, I want to show how the reset(CSS) works and for what we should use it.

I’ll use https://css-tricks.com/snippets/css/meyer-reset/ .
I’ll put this code into reset.css and  ” @import url(reset.css); ” into style1.css. What’s important, is to use import above everything else inside style1.css.

How reset works?

CSS style is set, as a default in every browser, which can be a problem. If we want our site in any browser to look the same, we must use the reset. This procedure gives us full control over the site.

Take a look at the sites below, before and after reset style.

reset

 

2. Inside the head

Today we’ll start by looking at this code.

3post

Step by step I’ll explain what’s going on within it.

doctype

Using this command we’ll inform  browser that we are going to work using HTML5.

html

This tag is the container for all other HTML elements . In this element goes everything we are going to declare at our website.

head

Head is a place where we declare meta data, links and title.

charset

This tag declares what kind of characters we are going to use. Utf-8 represents polish characters like „ ą ; ź : ś … „.

scaledevice

Using this line of code allows us to test different resolutions within the web browser using the developer tools provided within it.

fontstyle

“Link” loads a font called „Playfair display”, meaning it can declare it’s in CSS as a font-style.

css

This link allows us to load a file called „style1.css” from the styles folder. In CSS we can declare how our HTML elements will behave on our website.

3ofseo

To explain this, look at picture below (direct link).

TIP:arrows show where our elements will be displayed

3ofseoAnswer

Another tasks (9 and 10 lines) are used for SEO (Search Engine Optimization) meaning, if we search for our website or something related to it, using a search engine such as Google.com, our website should be among the results that pops up, increasing our chances of gathering views.

Day 1,5. For “Very” Beginners

If you don’t know what HTML is, then this post is for you.

Every single one html document should contain .


<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

This is a basic structure for a html page(document).
Example:
– The <!DOCTYPE html> declaration defines this document to be HTML5
– The <html> element is the root element of an HTML page
– The <head> element contains meta information about the document
– The <title> element specifies a title for the document
– The <body> element contains the visible page content

Next post will be about <head> element.

Day 1. Visual project.

The contest has already started. Yay that was 5 day’s ago but unfortunately i was pretty busy.
Today i updated all the information about project and about myself in the section “about”.

Ok, let’s write something about main subject, I’ve started from making a visual project and thinking how my site should look like .

strukturaprojekt

For now I’ve prepared  “Main Page” and “Article Page”. That’s all for now.

Next post will be more technical.

Blog at WordPress.com.

Up ↑