Revolution in Web Design, CSS Styling of the Website

There are few who remember in the mid-90s, what web sites based on tables and crowded with content looked like. Then, exactly on September 17, 1996, CSS - Cascading Style Sheets appeared, a formatting language that defines the appearance of page elements. But more importantly, CSS was presented as a way to separate web design from content. However, web designers did not take this genius change lightly and it took years for CSS to be accepted until they saw what it could achieve in terms of the visuals of a website. It wasn't until CSS version 3 that CSS was fully accepted. As for older browsers, when they come across CSS3 parameters they can't handle, they simply skip them.

Despite the fact that you cannot learn CSS3 through one post or even through a whole book because CSS3 is learned through practice and years, you can understand this lesson as an introduction to CSS3 and we will also continue learning it through the following HTML5 & CSS3 tutorial posts. For now, you should remember that using the CSS language - Cascading Style Sheets is one of the basic ways to style and format web pages. CSS makes it possible to separate the design and appearance of a web page from its content and structure, making it easier to maintain and providing more flexibility in customizing the appearance.

From Idea to Code, The Process of Creating CSS Styles

 

First, we'll introduce you to a few key aspects of using CSS to style your site. That are:

• Selectors - CSS uses selectors to identify the HTML elements you want to style. Selectors can be based on element names, classes, IDs, or other element attributes.

• Rules - CSS rules define how selected elements should look. Rules consist of properties, such as color, font, margin, and values assigned to those properties.

• Cascading - the basic feature of CSS is cascading, which means that multiple rules can be applied to the same element, and the final appearance is determined by the specificity of the selector and the order of the rules.

• Box model - CSS defines a box model for each HTML element, which includes margin, padding, border and the content of the element itself. This enables precise management of space and positioning of elements.

• Responsiveness - CSS enables the creation of responsive web design, adaptable to different screen sizes, devices and orientations.

• Pseudo-elements and pseudo-classes - CSS allows styling special states of elements, such as hover, which is an event when the user moves the mouse over the element, or active, which is an event when the user presses the element.

• Classes and IDs – these allow targeting specific groups of elements or individual elements, allowing for precise styling.

• External and Embedded Styles - CSS rules can be defined within the HTML files themselves, in the headers of <style> sections, or they can be kept in external CSS files that link to HTML documents.

• CSS transitions - this is a technique that allows a gradual transition between different styles, e.g. for animations or transitions.

• Flexibility and modularity - CSS allows designers to create different style layers and apply them to different parts of the site, making it easier to maintain and scale.

Essentially, CSS is a key tool for designing and styling web pages so that they look visually appealing and functional. And step by step, you will master the best styling through years of practice.

Creating Styles at the Web Page Level

The Art of HTML5 Text Styling, Advanced Text Formatting Techniques

In modern web design, text is not only the basic medium of content communication, but also a key element of visual presentation and interaction with the user. That's why the art of text styling using HTML5 and CSS3 is becoming more and more important in creating aesthetically appealing and functional web pages. In this lesson, we explore advanced text formatting techniques, including the use of semantic HTML tags and CSS to achieve the professional look and functionality of web content.

The art of styling text in HTML5 is not just about aesthetics; it is a crucial component of user experience and accessibility. Advanced text formatting techniques allow web designers to convey messages clearly and efficiently while improving readability and the visual identity of a web page. HTML5 introduces a set of elements that help structure content. Tags like <header>, <footer>, <article>, and <section> provide semantic structure, while <h1> to <h6> define the hierarchy of headings and subheadings. For paragraph styling, use <p>, and for emphasizing important text, use <strong> and <em>.

A girl codes text styles in HTML5

CSS3 is an essential companion to HTML5 when it comes to text styling. With CSS, we can control fonts, colors, spacing, and many other aspects of text. Properties like font-family, font-size, font-weight, and font-style determine font appearance. text-align, line-height, and letter-spacing allow fine-tuning of text layout. Advanced techniques include using web fonts that can be loaded directly into the user’s web browser. The @font-face rule allows designers to define custom fonts that are not installed on the user’s system. This provides greater flexibility and creativity in font selection.

In today’s mobile world, responsive text is essential. CSS units like em, rem, and vw allow text size to adapt to different screen sizes. Media queries are used to change styles based on device characteristics, such as screen width or orientation. CSS3 animations and transitions can add dynamism to text. Using @keyframes, we can create complex animations, while transition enables smooth state changes. Effects like text-shadow and box-shadow add depth and dimension to text.

Accessibility is a key component of web design. ARIA - Accessible Rich Internet Applications attributes and proper use of semantic elements help improve the experience for users with special needs. The alt attribute for images and labels for form elements are examples of how text can enhance accessibility. Styling text in HTML5 using advanced techniques is an art that requires understanding how different elements work together to create a cohesive and visually appealing user experience. By combining HTML5 and CSS3, designers have the tools needed to make text not only informative but also visually impressive and accessible to all users.

Understanding Semantic Tags in HTML5

Links and Anchors in HTML5, Everything You Need to Know for Efficiently Linking Your Pages

Creating links in HTML5 is quite simple thanks to the HTML tag <a… ></a> which is called an anchor. This tag allows you to create three types of links. You can create links that will transfer you to other web pages of your site; you can create links that lead to other web pages on the Internet, or you can use the anchor tag to link certain places on the same web page. However, before you start creating links, it would be great to know something about the URL address and understand the difference between absolute and relative paths.

URL – Uniform Resource Locator is a unique resource address. It consists of special characters from the source to the resource so we can say that the URL is also the address of the path to the web page, file, or a specific part of the text. The URL address usually consists of the protocol, domain name or directory; or the name of the file. Of course, the URL address can be longer and more complicated because various parameters can be passed through it. You can type the URL of this blog in the address bar of your browser shortly.

www.manuelradovanovic.com

but you can also do it like this:

https://www.manuelradovanovic.com/index.html

however, the URL can look more complicated:

https://www.youtube.com/watch?v=E861VLd3Yeg&t=6s1

When you surf the Internet, you mostly use web addresses that consist of HTTP – Hyper Text Transfer Protocol – a protocol for transferring hypertext that communicates with a server that must support the same protocol and domain; or you will get an HTML error 400 or 404 about an incorrect link.

A programmer creates links in HTML pages on a laptop

There are also other protocols such as HTTPS - Hyper Text Transfer Protocol Security, which is the same as HTTP but the communication between the client and the server is encrypted; then FTP – File Transfer Protocol – a protocol for transferring files allows you to download files from the server and other protocols. After the protocol, the next part of the web address is the domain. The domain is the address of the computer where a web page is located. You can also find a domain for free through providers that offer it for free, but we do not recommend that. It is best to find a local provider and lease a domain from them for 2 years.

Your domain can also contain a port number. The default port for the HTTP protocol is 80 and because it is default there is no need to write it. But if you program a web application, for example, in Microsoft Visual Studio, you will see that when you start the web application in the address bar of your browser and the port number that is reserved for your local web applications. After the domain, the URL can consist of a directory path and with the name of the file or to use only the name of the file. Even then, the URL can be continued and contain special characters that are there for a reason.

Understanding Paths: Relative vs Absolute

Fast and Easy, Professional HTML Lists in Few Steps

When we say HTML list, for most developers this term can be confusing because a list can refer to various lists, even the generic list in the C# programming language, a ListBox server control, or even a ListBox HTML control. In this case, HTML lists refer to formatting text into different list formats using list style attributes. The same effect can be achieved in a different way, for example, by using a specific type of style, while some of the older attributes, such as reversed which allows you to enumerate the list in reverse order, absolutely do not work in, for example, the Microsoft Edge browser. For this reason, we will not use them in our examples.

This is the biggest complaint with HTML coding that some things change while others do not support some of the most famous and most used browsers. In the previous lesson where we started learning HTML5, check here ; you already had the opportunity to get acquainted with a few basic HTML elements that mostly make up the foundation of an HTML page. In this post, you will have the opportunity to learn how to organize information on a web page in different formats of text lists. The use of HTML lists is necessary for your text on your page to be professionally organized and readable. What distinguishes HTML lists from previous elements is that HTML lists are composed of multiple tags that work together.

A programmer is typing HTML code on a laptop

HTML lists are primarily used whenever you have any enumerations in the text of a web page, but keep in mind that an HTML list can also be used for web page navigation. There will be more on this when we get to learning how to create navigation, especially one that must be acceptable for displaying the mobile version of web pages, but for now, it is necessary to master the basics of HTML5 and to know it at any time when you are awakened. For now, you should know that there are three types of HTML lists, and they are:

• Unordered lists

• Ordered lists

• Definition lists

However, you can nest all of them by putting one list inside another, even if they are different. To demonstrate how all HTML lists are used, it is best to create a web page where we will present their capabilities. Fortunately, the practical application of HTML5 is definitely simpler than the theory. Just keep in mind that in HTML5 some things are written shorter, differently, and not closing tags where required is not acceptable. In HTML, you were not required to use closed tags like </dd>, </dt>, </li>, etc. That practice is bad and it’s time to break with it.

Practical Application: Unordered HTML Lists in Modern Web Design

Web Mastery for Beginners, Creating Your First Web Page

In the previous lesson, you were introduced to what the Internet is and how it works, see here. In this lesson, we focus more on HTML - Hypertext Markup Language and how to create your first HTML page in HTML version 5. HTML is a descriptive language designed to describe web pages. It is a markup language, which means you write the text of your web page and add special tags around words and paragraphs. Instead of reading text in a document in a linear structure, hypertext allows you to click from one web page to another or to a specific point in the document so that you can literally move through the content of the web page to things that interest you at a particular moment.

Hypertext allows you to navigate and view web content in a non-linear way, and that has its advantages. HTML is a subset of SGML – Standard Generalized Markup Language. HTML is used for the appearance of web content and establishing links. You simply write HTML documents with the HTML language, from the first initial; home page; to the last and connect them via links with other web documents. Each HTML document is a text file consisting of two basic parts. One in which you use HTML syntax; tags < >; to describe the way you want to display content on a web page and the content you want to display. Tags mark different parts of the page and different effects in the browser.

A person codes in HTML5

Only by practically writing HTML documents will you understand how simple it all is. To learn just HTML and CSS – Cascading Style Sheets, you don’t need any major requirements. Most computers, even with minimal performance, will satisfy your needs. In principle, you can use any operating system and any text editor for learning and creating HTML pages. However, we recommend that you use any IDE - Integrated Development Environment, which offers correction of syntactic errors, because first of all, your HTML will be more readable, many typographical errors will be corrected automatically, and because you will be more productive.

Pay attention to the fact that no matter how prone you are not to make mistakes when typing on the keyboard, in practice, mistakes often occur due to fatigue and doing multiple things at once. That’s why an IDE is necessary. Websites are not made up of just HTML and CSS. Dynamic and professional sites also consist of other programming languages. For example, if you are a C# programmer, learning HTML and CSS in its entirety essentially takes a very short time because most web projects require much more coding in JavaScript, an object-oriented scripting language, or C# programming code that will be executed on web servers. Then you will need the right development environment that is demanding both in terms of computer performance and the latest operating system, even databases.

Choosing the Right IDE for Your Web Development Journey

Introduction to HTML5, First Steps to Modern Web Design

If you are reading this post on our blog, you are already using the Internet just as billions of people and companies around the world do every day. Many users are completely dependent on the Internet. The first thing you did was turn on your computer, tablet, or mobile phone, launch a browser, type in a valid URL, and our blog appeared on your browser. Or you clicked on one of the numerous links that brought you to this blog post. This means you already know the basics of how to use the Internet. We assume you are even familiar with some technical terms.

However, just using the Internet and what others publish is not always enough. There comes a time when you too will want to learn what the Internet is, how it works, and how you can become a person who codes, designs web pages, and publishes your creativity on the Internet. In that case, perhaps you should first ask yourself what the Internet really is and how it works?

The Internet is a global system of interconnected computer networks. As early as 1940, instructions were transmitted between computing machines, i.e., tele-typewriters; in 1964, researchers first invented the mainframe computer accessed via terminals that utilized the resources of the main computer. However, the birth of the Internet is considered to be in 1969 when the U.S. Department of Defense approved the ARPANET project Advanced Research Project Agency Network for the research and development of a communication and command network that would survive a nuclear attack.

Modern Web Design starts with HTML5

This project was the precursor to today’s Internet because, unlike the Internet you are using right now, ARPANET was definitely limited. The first Internet network was created for the new year, on January 1, 1983, when the technology of the time transitioned from the NCP protocol - Network Control Protocol to the TCP/IP protocol – Transmission Control Protocol/Internet Protocol, which is still used today. The Internet had its first public introduction in the 1990s with the creation of the HTML protocol in Switzerland. Here are the basic components that make up the Internet:

• Devices: This includes everything from smartphones to servers, which are categorized as clients or endpoints.

• Servers: These devices store and process information and host the websites we visit.

• Telecommunications networks: These include technologies such as mobile phone towers, satellites, optical fibers or cables, and routers that connect all devices.

• Protocols: TCP/IP protocols allow devices to communicate with each other and exchange information.

• Internet Service Providers (ISP): They connect devices to the Internet and assign them unique IP addresses.

What you first need to know about the Internet is that it is a hypertextual information system, cross-platform, distributed, dynamic, and most importantly, interactive. No one owns or controls the Internet, but there are institutions like the W3C and large global corporations like Google that have a significant influence on its ever-growing growth and development.

First steps on the Internet: How to start using the Internet?

NavBar u Django projektu, kako kreirati navigacioni meni koristeći Bootstrap?

Bez obzira na kakvom Django projektu hoćete da radite, malom ili velikom; jedna od bitni stavki je planiranje i kreiranje NavBar-a. NavBar je skraćenica od Navigation Bar – navigacioni meni; često u Srbiji to nazivamo i navigator ili navigacija. Navigacioni meni se uglavnom nalazi na vrhu veb stranice ili aplikacije. Njegova osnovna svrha je pružiti korisnicima brz i lak način za navigaciju kroz različite sekcije veb stranice ili aplikacije; kao što su početna stranica, kontakt forma, kategorije proizvoda ili usluga, ili bilo koja druga sekcija. Kroz navigacioni meni takođe routing – rutirate tj. usmeravate URL-ove u Django u aplikaciji. To vam pomaže da lako prelazite između različiti views – pogleda aplikacija ili veb stranica. Ako vaša Django aplikacija ima korisničke naloge i funkcionalnosti kao što su prijava, registracija ili upravljanje profilom, navigacioni meni može sadržavati i linkove prema tim opcijama. Međutim, obratite pažnju da navigacioni meni takođe igra ulogu u estetici i identitetu vaše veb stranice ili aplikacije. Dizajniranje i pravilno stilizovanje NavBar-a može doprineti prepoznatljivosti i atraktivnosti vašeg brenda. Zato kod kreiranja navigacionog menija takođe koristimo i Bootstrap, bez obzira što je stara praksa da navigacioni meni možete odraditi profesionalno koristeći samo HTML i CSS. Naravno, izbor je uvek na vama osim u slučajevima kad klijent ili kompanija striktno zahtevaju da se zaobiđe Bootstrap. 

( Kreiranje NavBar-a koristeći Boostrap u Django projektima ima i estesku vrednost )

Ali šta je to zaista Bootstrap? Bootstrap je takođe framework – razvojni okvir za kreiranje veb aplikacija i stranica baziran na HTML i CSS-u. Bootstrap nije zamena za CSS, nego pre bi smo rekli da je nadogradnja. Inače Bootstrap je nastao kao interni alat za razvoj na Twitter-u, a kasnije je postao dostupan kao open-source projekat. Bootstrap se prvi put pojavljuje dostupan svima 2011 godine i od tada je postao izuzetno popularan među veb developerima. Bootstrap pruža veliko olakšanje, ali i donosi sa sobom kompleksnost novih mogućnosti u veb razvoju; pružajući niz unapred definisanih stilova, komponenti i JavaScript funkcionalnosti koje olakšavaju dizajniranje i izradu responzivnih, atraktivnih i funkcionalnih veb stranica. Bootstrap se automatski prilagođava različitim veličinama ekrana, što je posebno važno za mobilne uređaje. On sadrži moćan grid sistem koji olakšava postavljanje rasporeda elemenata na stranici. Bootstrap dolazi sa gotovim stilovima za dugmad, forme, tipografiju, karte i mnoge druge komponente uključujući i navigacioni meni; stilove koje se često koriste na veb stranicama. Bootstrap takođe uključuje JavaScript komponente kao što su modalni prozori i mnoge druge koje se lako mogu integrisati u vašu veb aplikaciju ili stranicu. Ako se pitate da li je Bootstrap bolji od CSS stilizovanja, onda treba da razumete prednosti Bootstrap-a uključuju ubrzanje razvojnog procesa, konzistentnost dizajna i responzivnosti. Međutim, Bootstrap može biti pretežak za jednostavne projekte i može ograničavati kreativnu slobodu u dizajniranju. Na primer, pogledajte ovde ovaj jednostavan digitron rađen u JavaScript-u ovde. On se može kreirati i sa Bootstrap-om, ali je u ovom slučaju CSS bolje rešenje. Vi sami odličite kad vam je bolje da koristite jedno, kada drugo ili koristite obadvoje u vašim projektima.

Kako da kreiramo NavBar koristeći Bootstrap?