jelena0906nincevic

[jelena0906nincevic]

The last thing I did was install WordPress; I do not know if it's correct, but this blog serves me personally as some of my notes I've gone through so far.

So, here is how my work with WordPress went…

After installing WordPress, I installed the theme. To install the theme, I download the theme from to Wordprees.org and extract it, to transfer the theme to the server we need open FileZilla. In the FileZilla in WordPress folder is wp-content and I transferred theme in theme folder. To make activate theme we just need customize theme in WordPress.

I chose to work with Twenty Twenty theme. So next thing that I do it was making child theme.

To make child theme first thing to do is create new folder that will contain child theme. Inside the folder I created CSS file (stile.css). The mandatory thing that we need put in stile.css is theme name, template, version, text domain and code to import stile sheet from the parent theme. Important thing is to change name to name of theme that we are using. In my situation was twentytwenty/stile.css.

Next thing that I do was installing plugins. So, I download Really Simple SSL plugins from WordPress.org. I upload the plugin into the wp content-Plugin folder on FileZilla just like the themes.

After installing all, I started to play with WordPress.

In the end WordPress is a lot simpler than I thought.

And now I have work on  how build a website…🤓

[jelena0906nincevic]

For web site planning we need to sketch, visualize, test, prototype and understand the dynamic behaviors on different devices with different proportions & resolutions.

The most important to RESEARCH and PLAN a website before you build it.

The BRIEF represents a starting point of a project

-          The client brief (What does client want?)

-          Creative brief (This is produced by the designer in response to the Client Brief)

RESEARCH

As with any research, so we have to ask the right questions for this as well.

- What is the purpose of the site?

- What are the goals?

- What is the vision of what the site should do?

We need to define audiences & goals (Who are the users of the site?)

Idea generation:

1. Content

2. Functionality

3. Design

 PLANNING

1. Plan content.

2. Site map

3. Name pages

4. Write brief description of each page

The most crucial part of a page is the NAVIGATION. The navigation should be intuitive, natural, and easy to understand quickly. The key is consistency.

For Design we need to check what is the ‘tone’ or ‘mood’ of the site? (Serious, Fun, Sombre or Neutral). What graphics, fonts, textures, colors will convey this tone?

On the end believe or not after all the technologies, first that we need to do is take pen and paper to write purpose of the site.🙃

[jelena0906nincevic]

Hi, Christmas time is finish, new year started and after break I have to start do so many assignments so many deadlines…🤯

All modern websites are made from HTML, CSS & JavaScript. All are also built using server-side technologies, including scripting languages and a database.

There are Static Websites and Dynamic Websites.

Static Websites- is one where the content doesn’t change unless the page is manually edited.

Everyone who visits gets the same page.

Dynamic Websites- can serve up different content, usually stored n a database, to different users.

Some of examples of Dynamic Websites- Facebook, Amazon, G-mail…

 Scripting languages- Server-side scripts run on a web server and interpret requests to provide customized web pages depending on the user's request.

Examples: PHP, ASP, Python, Ruby, Java

Databases- is an organized collection of data, typically stored and accessed on a computer.

A database management system is the software that allows users to interact with a database.

Content Management Systems- is a software application which allows users to add, edit, delete content on a website.

Examples of CMS: Drupal, Joomla, WordPress, Moodle

For now, WordPress is making me crazy, I finally install WordPress and now there is issue with my password….  

Hope everything will be fine😉

[jelena0906nincevic]

On the last class we learned about Responsive Web Designing (RWD)

RWD is a process of designing a single website to be compatible on different devices. Also known as Adaptive Web Designing (AWD) to give an optimal viewing user experience across a wide variety of devices starting from mobile phones to desktop computers. Of all Responsive Web Designing offers I think the most important is excellent user experience.

3 Ingredients:

1. Flexible, grid-based layout

2. Flexible images and media

3. Media queries

Pixels are not Flexible we should use ems/rems. The context is 16px (because we are using the default).

target / context = result

example: 24 / 16 = 1.5

Percentages also useful for box margins and padding

For the #container div, we will express it as a percentage of the browser window.

target / context = result   expressed as a percentage x 100

Images

solution to some problems:

img {

max-width:100%;

}

Media Queries allow as to write CSS that targets particular media types (screen, print etc.) and sizes.

IN CSS

@media screen and (min-width: 1024px) {

#content {

width:50%;

}

}

The query is split into two components the name of a feature (min-width) and a corresponding value (1024px)

Before we begin writing media queries, we need to do:

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

into the <head> of our page and it makes the browser’s viewport equal to the width of the devices screen.

[jelena0906nincevic]

Last few days I was working on assignment “Personal Profile Site”.

I have to say finally I understand when to use id and class, I used class a few times to make some changes and id to set up font, margin, width and background color.

With html I did not have that much issue like with css. When I listened to lectures, I was thinking that css was much easier.

I had the most problems with Griffith college logo. I copied image from Griffith College website and saved as png to images file. So, all of that was ok, but when I try to put the logo on the right-hand side of the screen, that was issue.

First, I put a link to the Griffith College website, using the Griffith logo as the link and put that on <p> element using class, like this:

<p class = "logo"> <ahref="https://www.griffith.ie/"target="_blank"</a> <img src = "images / logo.png" alt = "Logo" width = "150"> </p>

I try to move logo on the right-side using float: right; but it did not work, logo was moved on right side but outside of footer I do not know why???

So, I researched and find in https://stackoverflow.com/ that I can use text-align: right; and it works, I hope it is fine it looks good.

This was great practice and I have a feeling that working on this assignment I have learn a lot.

[jelena0906nincevic]

On the last class we started learning CSS.

With CSS we can control text, color, size and position.

There are three ways to add CSS – INLINE, EMBEDDED and EXTERNAL

The best way to add CSS is EXTERNAL

An external CSS stylesheet can be applied to any number of HTML documents by placing a <link> element in each HTML document. The attribute rel of the <link> tag has to be set to "stylesheet", and the href attribute to the relative or absolute path to the stylesheet. (CSS Notes for Professionals)

<link rel="stylesheet" href="css/style.css"/>

There are 3 main parts to CSS rules: The Selector, Properties and Values

Curly Brackets contain the property / value pairs

Selector {property: value;}

Important to remember - External CSS files NEVER have HTML in them!

CASCADING- generally, rules are applied in the order you define them

If we have conflicting rules the last rule applies. A more specific selector will override another, even if it is defined earlier.

So, CSS seems simple and clear. Every time I listen to a lecture, I have a feeling ok it's not that hard but when I start working, I get lost.

For example, on the lab I get stuck when I need to used id and class.

<!--Give the ul a class with the value "displayed"--> <!--Give the ul an id with the value "navlinks"-->

On the end I resolved <ul class="displayed" id="navlinks">…but… it takes time….

[jelena0906nincevic]

It looks like as time goes; my blog is going to be more serious. I am just wondering, all this time, who is going to remember up all these rules. 😳

So, let us start with new things…

HTML STRUCTURE/LAYOUT

SEMANTIC ELEMENTS HTML

Header, main navigator, content, side bar and footer

In HTML5 we have elements to denote all these areas.

<header> <nav> <article> <section> <aside> <footer>

BLOCK LEVEL ELEMENTS and INLINE-LEVEL ELEMENTS

By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.

Block-level elements may appear only within a <body> element.

Some examples of block level elements <div>, <h1>, <ul> or <p>

Some examples of inline level elements <a>, <em>, <strong>

GENERIC GROUPING ELEMENTS

<div> element has no meaning or purpose other than to aid styling. It is a CSS hook…

<span> is an inline generic grouping element. Its most common use is to apply styling using CSS.

 Important is the class attribute- allows us to identify one or more elements in a document.

Using a combination of elements, id and class attributes we can give a page structure.

HTML FORMS

Forms are used to accept information and provide interactivity

Types of forms: Search form, Order form, Newsletter sign-up form, Survey form, Add to Cart form, and so on

<form> <input> <textarea> <select> <option><label> <fieldset>

In creating forms, we are using some common attributes:

-type=”text”

-name

-id

-size

-value

-required (HTML5)

-placeholder (HTML5)

[jelena0906nincevic]

Hi, today the lecture went well, surprisingly I did not struggle that much!!!

Today we were learning links and images.

First thing to do was created folders and files and selected them in good order.

Links are created with using <a> elements and href attribute. There are three types of links Absolute, Relative and Root-Relative.

Absolute links we use only for directing users to a different website.

Relative links we use to point another file in our website, the only thing we need to supply is the path.

Root-relatives links are similar as relative links, but instead of being

relative to the current page, they are relative to the “root” of the entire website.

Especially important thing to use is target attribute, that defines where to display the page when the user clicks the link. We can use the target attribute to ask the browser to open a link in a new window/tab.

There are two ways to add images, by the HTML and CSS.

Adding images by the HTML we are using <img/>tag and src attribute

Images does not have content, so they are self-closed.

Images dimensions are important, dimensions of the images depend on size of project, is particularly important to resize images. We can use <img/> element’s with width attribute. Dimension values are specified in pixels, and we should never include a unit.

 So, looooots of things to remember from today!!!!

<!--only thing to do is practice, practice, practice…-->

[jelena0906nincevic]

Hi, really, I am not sure how to start this blog, maybe to start with today’s class.

So, on the first part of the lecture (theoretical part) I was thinking great I get it and cannot wait to start practice. I understand all html structure (root element, element<head>, element <body> and all that goes in that <meta>,<title><p> and <h1…h6>)I learn broke elements <br>, strong elements <strong> and that we close </> all element in HTML5 that have content. We learn about HTML list and how there are 3 lists (unordered, ordered and description list), we will use unordered <ul> and ordered<ol> lists.

So, theoretical part goes great, BUT when we start doing lab I got stuck and stuck and stuck….

I was struggling with https://html5.validator.nu/ sincerely I was very frustrated. First lab and already problems. But after few times trying and go step by step I did it. All the tasks that was asked to be done are done.

[jelena0906nincevic]

“Hello World” First week, first “coding”😂💪