Want to create a web interface where to start?

Computer and pixel codes (pixels) are the foundation of the 21st century economy. If you have ever seen "Page Source" or "Developer Tools" in your browser, you may encounter a lot of mixed documents. Padded and wondered how to make the site work.

Web developers call the graphical user interface (GUI) the front-end of a web page, otherwise the back-end. User interface or front-end is what users can manipulate, perform actions and use. The back-end can be considered as an infrastructure that contains and supports all information and tasks from the front-end.

1. How to distinguish between Front-End, Back-End and Full Stack?

This article is about the front-end. It outlines the boundaries for you to understand the differences, the ability to create user interfaces, as well as show you how to get started and use web developer tools to create compelling websites. and highly interactive.

Web design and Front-end development

In large organizations, design and development are tasks performed by expert groups with many different skills. The designer will create a specific visual and interactive design; then front-end developers will implement it.

However, for an individual, there is no reason to limit self-discovery. Just because you care about development, doesn't mean you don't have a vision of design and vice versa. A modest amount of knowledge about basic web technology or design principles can become a strength in your career or business.

Front-end development is more or less a programming activity. Because it is more than half the work related to design, with many concepts drawn from the field of printing production. Meanwhile, it is also using computer code, but is not complicated and requires a lot of programming knowledge, in addition to web programming languages ​​(many languages ​​can be found in the back-end).

Marking, styling and programming languages ​​in the front-end

Most websites are built with a set of three technologies: Hypertext markup language - hypertext markup language (HTML), cascading style sheets - cascading style language (CSS) and JavaScript (JS):

1. Marking languages, such as HTML, mark documents with tags (tags). Tag delimiting semantic content and document structure. Structured documents can be styled.
2. CSS is a style language or orientation for display style for a page editor. On a web page, CSS offers commands that present content such as typography and layout in general, as well as placement of graphics.
3. JavaScript, in contrast to the previous two objects, is a programming language. JS handles user interaction and input and focuses on events that users create.

HTML

It has been more than twenty years and the core purpose of HTML remains the same: Separate the text for the reader from the structure needed to parse the document.

The reason why you need it

Why is HTML still important? Simply put, HTML is the place that contains the semantic meaning of the content. It is necessary for machine readers like search engine crawlers and screen readers (to be accessible). Over time, the relevance of separation between semantics and structure has grown. The latest version of HTML5 introduced tags like,,

Structure of an HTML element

HTML elements, at a minimum, are open and closed tag pairs, each attached to <> brackets, such as the lower paragraph tag in cyan. Elements that can be assigned the following attributes in bright red, such as a 'class', will make this element a member of a group that can be influenced by HTML and JS. Style properties, with content written in red below, are actually a way to create CSS rules for that element. (CSS is best written at the site or page level, this will be discussed below.)

Want to create a web interface where to start? Picture 1

Advanced

Developers are obsessed with performance. To achieve this goal, they will optimize the language to speed up writing and create readable lines. This is called syntactic sugarcoating (special syntax).

Why focus on developers, while you are probably just a beginner? By making everything in the markup language simpler, you can focus on the intention, not the expression, while validating based on the final standard. Source files that you create in the simplified markup language will translate into valid HTML or the compiler will generate errors in some specific lines. You can see that there are more guidelines to fix errors than just finding missing elements. They require an intermediary software to convert them into HTML.

1. Haml (HTML Abstraction Markup Language): Requires Ruby to compile.
2. Jade: Requires Node.js to compile.
3. Slim: Ask Ruby to compile.

CSS

CSS allows semantic content and document appearance to be completely separate, creating stylish features such as layout, color and portable typography and can be applied to different documents. When content and visual design are set separately, developers will gain more flexibility and consistency in visual design.

The reason why you need it

Unformatted websites look horrible and unattractive. Although they are still readable, CSS is the foundation of decentralized visual information due to the layout it allows. For example, the picture below illustrates the current top navigation menu of the makeuseof.com website, not applying any CSS.

Want to create a web interface where to start? Picture 2

Note that in addition to font and color, the menu is not styled to be placed vertically - the default style of the browser. Surely you don't want to go back to the Internet interface of 1990, so you'll need to have some CSS knowledge to change things. In addition, with the increase of various sized and connected devices such as iPhones, tablets, etc., one of the most important skills is to create responsive designs or websites. with different screen sizes. This is done through CSS.

Structure of a CSS rule

CSS rules are written in one of three locations:

a) Inline in element.

b) By creating sections