neslihanerwebauthoring

[neslihanerwebauthoring]

Responsive Web Design

Responsive themes adhere to the responsive web design strategy, which strives to create websites that provide the best possible user experience across a variety of devices and screen resolutions, such as desktop computers, tablets like the iPad, smartphones, and other mobile devices. A responsive WordPress theme adapts its layout to the size and resolution of the screen.

On smaller screens, such as smart phones, responsive themes provide improved reading and usability. It also precludes you from generating a mobile version tailored to a specific device. Previously, sites had to produce a separate mobile version for each platform, such as iPhone, Android, and so on. Without the use of additional themes or plugins, responsive design allows a single website to be accessed across a variety of devices.

Tablets and smartphones are being used by an increasing number of people to access the internet. As a result, we're seeing an upsurge in the number of responsive themes made by WordPress theme businesses. If a significant number of your website's users access it via a mobile device, you should definitely consider creating a mobile version or upgrading to a responsive WordPress theme.

[neslihanerwebauthoring]

What is a WordPress plugin?

A plugin for WordPress is a piece of software that "plugs into" your WordPress site. Plugins allow you to create nearly any type of website, from e-commerce stores to portfolios to directory sites, by adding new functionality or extending current functionality on your site.

Depending on their capabilities, plugins can make minor modifications to your site or make significant changes. You might, for example, use a plugin to add a WhatsApp share button to your website or make it fully multilingual. You may also use a plugin to help with payment gateways or allow people to book appointments online if you run an e-commerce firm.

Other plugins can improve your contact forms, create stunning sliders, backup your site in the event of data loss, and make email opt-in simple, among other things.

While many plugins make modifications to your site's front end, others make changes to the back end to make maintenance easier for your team. These plugins may, for example, allow you to check your site for broken links, conduct A/B testing, or place your site in maintenance mode.

[neslihanerwebauthoring]

What Is WordPress & What Is It Used For?

"What is WordPress?" you might be wondering. "What is the purpose of WordPress?" WordPress is used to power approximately a third of all websites on the internet. This robust site builder and content management system (cms) strives to make it easy for anyone to create an online presence in minutes, with capabilities for everyone from personal blogs to significant organizations. WordPress is flexible, scalable, and always a free platform to utilize. Here are some of the most critical aspects of the world's most popular website creation software.

Mike Little and Mike Mullenweg founded WordPress.org, a company that makes WordPress available to anyone who wants to construct a website or blog, in 2003. WordPress' inventors aimed to "democratize publishing" by creating a site-building application that would allow anyone to have a voice and presence online by constructing it and keeping it forever free.

The qualities that made WordPress so appealing to bloggers and other types of Internet publications also appealed to a much broader audience, including some of the world's most well-known corporations.

WordPress is a free, open-source website-building application based in the PHP computer language. It's released under the GNU General Public License, which allows anyone to use it and alter it to fit their own needs and share those changes with others. WordPress can be downloaded at any time or deployed as part of a hosting web package because "open source" software is publicly available and always accessible.

[neslihanerwebauthoring]

Planning & Designing a website

Today, web development is all the rage. It has become critical for organizations to have a well-functioning website or web application to meet their customers' digital needs. Almost every business, regardless of industry, focuses on developing a well-designed website to sell its services.

However, the web development process is more than just coding. It is critical to follow a disciplined method to avoid difficulties with a hundred factors to consider.

A web development process is precisely that: a methodical approach to achieving excellent results. To create a unique website, you should follow the seven phases of the web development life cycle.

These are the seven steps to design and build a new website.

Research and Analysis.

Planning and Strategy.

Designing.

Content Creation.

Development.

Testing and Quality Assurance.

Deployment and Maintenance.

1-Research and Analysis

The majority of individuals overlook this crucial stage of the web building process. Gathering information about the project and the client is critical for ensuring that your design and development is on track.

Your developers won't be able to give the best solution unless they have a clear understanding of what they're working on and what the requirements are.

2-Planning and Strategy

During the planning stage, all components of the website, including design, technology, content, and marketing, are strategized. 

Informed decisions on the structure and features of the website are made based on the information obtained and assessed in the previous step.

3-Designing and Wireframing

The web design stage entails the creation of a website layout and the involvement of innovative UI-UX designers.

The layout entails creating a primary draft, which could be graphical, to gain a sense of the website's design. The layout's objective is to give an information structure to your clients, allowing them to take a visual tour of the material and basic features.

4-Content Creation

Content creation entails presenting helpful information about your firm in an appealing, easy-to-understand fashion. Calls to action, clever headlines, formatting, line editing, composing, and updating texts are all tasks that need to be completed.

5-Code and Development

The development phase involves the actual building of the website. Developing the client-side and server-side of the website is accomplished in this stage. It is the most time-consuming part of the website development process.

6-Testing and Quality Assurance

Following the development of the website, a series of rigorous tests are carried out to ensure that any problems in the system are eliminated. 

The Quality Assurance team painstakingly tests the functionality, usability, compatibility, and performance of the web app using methodologies such as Unit testing, Stress testing, and Load testing.

7-Deployment and Maintenance

Website creation is a complicated procedure that necessitates following a series of processes to achieve satisfactory outcomes. According to their project, each company deviates from the typical website development timeframe, adding or removing appropriate steps.

According to your project management strategy, you can alter the method. However, acquiring relevant data and sufficient planning for any software development project is critical.

[neslihanerwebauthoring]

What is Web Development?

Web development is the process of creating internet-based websites and web applications. From building a simple static one-page website to developing a full-fledged powerful web application with a content management system, we have got you covered. 

Website development includes; the coding of the application logic, incorporating databases and managing user queries, designing user interfaces, hosting the website on servers, and maintaining and updating. 

Each activity involved in the web development process can be classified into server-side, client-side, and full-stack development.

Layers of Web Development

Server Side

All of the procedures that take place behind the scenes in a website are referred to as backend or server-side development. 

The backend's key components are database management, server administration, and logical component management.

These are not visible to users, yet your website will be a blank page incapable of performing any operations without a solid back-end development team.

Client-Side

This layer, often known as the frontend, is responsible for the site's visual presentation and design. 

Frontend developers employ CSS, HTML, and JavaScript to provide a seamless user experience through responsive web pages. 

Your website will not attract customers if it has a robust user interface.

Full Stack

Full-Stack development encompasses the entire web development process by combining the frontend and backend. 

The complete stack of tasks and technologies involved in the website development life cycle are dealt with at this layer.

A full-stack engineer is skilled in UI-UX design, database management, server hosting, and browser code.

Together, these three levels make up the web development life cycle. 

For both website and web application development, the process is the same.

Understanding the web development life cycle is critical if you or your team are working on a development project.

[neslihanerwebauthoring]

CSS: Introduction to Typography

A web page usually consists of text. It's almost 90% of the web. Typography and font size are so important while creating a web page. Because of that choosing the right font is a significant part of how the readers experience a website. To select a typeface we should use the font-family property. In CSS there are five general font families. These are;

Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance. (Such as Times New Roman, Georgia, Garamond etc.)

Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look. (such as Arial, Verdana, Helvetica etc.)

Monospace fonts - here all the letters have the same fixed width. They create a mechanical look. (such as Courier New,Lucida Console, Monaco etc.)

Cursive fonts imitate human handwriting. (such as Brush Script MT Lucida Handwriting )

Fantasy fonts are decorative/playful fonts.( such as Copperplate, Papyrus)

In CSS, we use the font-family property to specify the font of a text.  

Example

Specify some different fonts for three paragraphs:

.p1 {  font-family: "Times New Roman", Times, serif; } .p2 {  font-family: Arial, Helvetica, sans-serif; } .p3 {  font-family: "Lucida Console", "Courier New", monospace; }

If a typeface consists of more than one word, we should write the typeface into the quotation marks.  

p{

  font-family:Georgia, Palatino, "Times New Roman";

}

Font Stacks: It is good practice to supply a list of alternative fonts.  

https://www.cssfontstack.com/

Styling Text Properties

1. Font-style: This property has three values:

normal - The text is shown normally

italic - The text is shown in italics

oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

2. Font-weight: It is changed the text in 2 ways such as normal and bold.

3. Font-size : To specify font sizes we use the font-size property.  

The values can include:  

• px - Pixels  

• pt - Points  

• % - Percentage  

• em - Em Size  

• rem - Root Em Size

Rem :  

10px = 0.625rem  

12px = 0.75rem  

14px = 0.875rem  

16px = 1rem (base)  

18px = 1.125rem  

20px = 1.25rem  

24px = 1.5rem  

30px = 1.875rem  

32px = 2rem

[neslihanerwebauthoring]

What is CSS?

CSS means Cascading Style Sheets is the language for using to style a Web page. With CSS, we can control text color and style or background or borders color, text size or columns size, the position of text or images, etc. To sum up, CSS describes how HTML elements are displayed on the screen, paper, or in other media.

There are three methods to add CSS. They are Inline, Embedded, and External. External style sheets method is the most popular way to add CSS files into HTML. With this method, separate documents link to the HTML page.  

To link a CSS file we use the element .  

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

This links a file called "style.css" which is contained in the same folder as the HTML file and the <link> tag should be placed in the <head> element.

<head>

<meta charset="utf-8">

<title>Our Web Page</title>

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

</head>

How to work CSS;

CSS is a rule-based language — you define rules specifying groups of styles that should be applied to particular elements or groups of elements on your web page.  

CSS rules should consist of three main parts. These are The selector, Properties, and Values.  

Selector {   Property 1 : value;                 Property 2 : value;               Property 3 : value;             }

 For example:

        h1

           {

               Color: red;

                Text-align: center;

           }

H1 is the selector and these changes will be applied to h1 elements in the document.

p {  

color:red;  

font-family:Verdana;  

margin:20px;

}  

p is the selector. This means these changes will be applied to all paragraph elements in our document.

The CSS Id selector and class selector are different than The CSS element selector. Class selectors are shown by a dot and Id selectors are identified by a # symbol.  

For example;

.center {  text-align: center;  color: red; }

In this example all HTML elements with class="center" will be red and center-aligned.

��............................

#sidebar{

  border:1px solid #000;

  padding:10px;

}

This ruleset will be applied to the following element

<aside id="sidebar">…</div>

[neslihanerwebauthoring]

What is semantic elements in HTML?

Semantic elements have a meaning, for example, <article> element.

Non-semantic elements don't have any meaning, for example, <div> element.

In HTML there are some semantic elements that can be used to define different parts of a web page.

These are <header>, <article>, <aside>, <footer>, <main>, <nav>

<section> etc.

The <header> element usually refers to the logo, search form, and introductory information in the HTML document.

The <section> element defines a section in a document. The <section> element can be used Chapters, Introduction, News items, Contact information etc.

The <article> element specifies independent, self-contained content.

The <nav> element defines a set of navigation links. 

The <aside> tag defines a section that related to the content around it in the HTML document.

The <footer> tag includes copyright or author information in the HTML document.

This part is the hardest part of HTML for me.

I usually mix up the order of the elements.

While searching for more information about HTML elements, I found the following image regarding the order of elements.

[neslihanerwebauthoring]

HTML Links & Attributes

Links take place on almost all web pages. They allow users to jump from page to page. The most important part is a link does not have to be text. A link can be an image or any other HTML element!

The HTML <a> tag defines a hyperlink. The most important attribute of the <a> element is the href attribute, which indicates the link's destination. "href" attribute should be inside the opening tag.

<a href="http://griffith.ie">Griffith College</a>

When linking to pages on the same site, you do not need the full URL. When linking to pages on the same site, you do not need the full URL.

To use an image as a link, we just put the <img> tag inside the <a> tag with the source (src) attribute, which includes the location and name of the image.

<img src="car.jpg">

The required alt attribute for the <img> tag specifies an alternate text for an image if the image for some reason cannot be displayed.

<img src="/images/example.png" alt="Example image">

The HTML class attribute is used to specify a class for an HTML element. Multiple HTML elements can share the same class.

The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.

[neslihanerwebauthoring]

HTML Lists

HTML lists are separated two major groups as Unordered HTML list and Order HTML list.

An unordered list starts with the <ul> tag and ends </ul>.

Each list item starts with the <li> tag and finishes </li> tag.

Lists items should be inside between unordered list tags such as  

<ul>

 <li>Sports</li>

 <li>News</li>

 <li>Comments</li>

</ul>

An ordered list starts with the <ol> tag and ends </ol> tag.

Each list item starts with the <li> tag and ends with </li>tag.

The list items will be marked with numbers by default:

<ol>

 <li>Sports</li>

 <li>News</li>

 <li>Comments</li>

</ol>

Semantic Elements

The <strong> and <em> tags are used for emphasizing parts of a text. The <strong> tag should be used to indicate strong importance. The strong elements will be shown in bold by a browser. The <em> tags are used for emphasis. It will be shown in italics by a browser.  

<body> <p><strong>Emphasized text goes here</strong> but not here</p> </body>

Sample Output:

Emphasized text goes here but not here

...........................

<body> <p><em>Stress emphasized text goes here</em> but not here</p> </body>

Sample Output:

Stress emphasized text goes here but not here

[neslihanerwebauthoring]

What is HTML?

HTML (Hypertext Markup Language) is the language for describing the structure of Web pages. It means it is a computer language that makes up most web pages and online applications. There are many sub-elements used to build a web page. So, How HTML works?  

HTML includes many types of tags. The text should be saved as an HTML file. This file is viewed through a browser, such as Internet Explorer, Google Chrome, Firefox or Opera.

The purpose of a web browser is to read HTML documents and display them correctly. A browser doesn’t display the HTML tags clearly.

An HTML element is defined by a start tag, some content, and an end tag.

<tagname>Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag.

For example:

<h1>My First Heading</h1>

<p>My first paragraph</p>

Some HTML elements have no closing elements (like the <br> element). These elements are called void elements. They don't have an end tag!

<p>This is a <br> paragraph with a line break.</p>

These are some major elements of HTML.

The <!DOCTYPE html> declaration defines that this document is an HTML5 document

The <html> element is the root element of an HTML page

The <head> element contains meta information about the HTML page

The <title> element specifies a title for the HTML page  

The <body> element defines the document's body, such as headings, paragraphs, images, links etc.

The <h1> element defines a large heading

The <p> element defines a paragraph

[neslihanerwebauthoring]

I'm Neslihan from Turkey. Let me briefly introduce myself and my educational background. I was born and raised in Istanbul, Turkey. I studied Translation studies and child education and also; I have been to Poland as an Erasmus student twice. I enjoy traveling, meeting new people from different cultures and countries, dancing, and cooking.

I'd like to tell you how started my journey.

I just arrived in Dublin on September 19th and then attended the first class, Web Writing. Suddenly I found myself in a different world that used unfamiliar language and terms. I remember my first impression of Web Authoring. I felt very nervous. There were many questions in my mind, such as how can I remember and use all these elements. But day by day I'm getting used to all the tags and the concept of coding.

Sometimes you can't decide your future alone and suddenly something happens. Now, I am a Master's student at Interactive Digital Media. I just said "Hello" to a new world.

I am looking forward to learning new things and improving myself.