Explore now!

Technologies

You could discover every technology by clicking to "Learn more" button.

  • HTML

    Learn HTML to write a markup and structured web content step by step.

    Learn more
  • CSS

    Learn CSS to present & style the HTML document.

    Learn more
  • Sass

    Learn Sass to nesting selectors within one another to providing a more organized and readable structure.

    Learn more
  • JavaScript

    Learn JavaScript to make websites and applications dynamic and interactive.

    Learn more
  • React

    Learn React to create user interfaces from components.

    Learn more
  • Vue

    Learn Vue to create single page applications.

    Learn more

The Career Path

I recommend you this path to learn web-development steb by step.

HTML

What is HTML?

HTML stands for Hyper Text Markup Language, which we can describe the content and structure of a web page.

HTML elements can be used to create different types of content, such as paragraphs, links, headers, tables, list, videos, etc. Browsers interpret HTML code and display it as a web page.

Here are some benefits why should use HTML

  • HTML helps to build structure of a website and is a widely used Markup language.
  • It is easy to learn.
  • Every browser supports HTML Language.
  • HTML is light weighted and fast to load.
  • Storage of big files are allowed because of the application cache feature.
  • Do not get to purchase any extra software because it's by default in every window.
  • HTML is simple to edit as being a plain text.
  • It integrates easily with other languages such as JavaScript, CSS etc.
  • HTML is that it is easy to code even for novice programmers.
  • HTML also allows the utilization of templates, which makes designing a webpage easy.
  • It is fast to download as the text is compressible.
  • Very useful for beginners in the web designing field.

The HTML structure

<!DOCTYPE html>
<html>
<head>
<title>The HTML structure</title>
</head>
<body>
<h1>My first heading</h1>
<p>My first paragraph</p>
<h2>My learning list</h2>
<ul>
<li>Learn HTML!</li>
<li>Learn CSS!</li>
<li>Learn Sass!</li>
<li>Learn JavaScript!</li>
<li>Learn React!</li>
<li>Learn Vue!</li>
</ul>
</body>
</html>

CSS

What is CSS?

CSS stands for Cascading Style Sheet, which describes the visual style and presentation of the content written in HTML.

CSS consists of countless properties that developers use to format the content: properties about font, text, spacing, layout, etc.

Here are some benefits why should use CSS

  • Separation of Content from Design
  • Greater Design Flexibility
  • CSS style Consistency
  • Responsive Design
  • Customizable Styling
  • Consistency Across Pages
  • Improves page Loading speed

How we select and style elements

h1 {
color: #264DE4;
font-size: 32px;
}
p {
color: #F06529;
font-size: 18px;
}

Sass

What is Sass?

Sass stands for Syntactically Awesome Stylesheet.

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets and allows us to use variables, nested rules, mixins, functions.

Here are some benefits why should use Sass

  • It's CSS syntax friendly.
  • It offers variables for whatever you want.
  • It provides nesting so you can use nested syntax and useful functions like color manipulation, math functions, and other values.
  • It includes mixins.
  • It contains fewer codes so you can write CSS quicker.
  • Sass facilitates you to write clean, easy and less CSS in a programming construct.
  • It is more stable, powerful, and elegant because it is an extension of CSS. So, it is easy for designers and developers to work more efficiently and quickly.

Features of Sass

  • Sass is fully CSS-compatible.
  • It is more stable, powerful and elegant than CSS.
  • It is based on JavaScript and is a superset of CSS.
  • It has its own syntax and compiles to readable CSS.
  • It is an open-source preprocessor that is interpreted into CSS.
  • It supports language extensions such as variables, nesting, and mixins.
  • It provides many useful functions for manipulating colors and other values.
  • It provides many advanced features like control directives for libraries.
  • It provides well-formatted, customizable output.

Sass variables and nesting elements

// Setup colors
$color-primary: #CC6699;
$color-secondary: #F06529;
// Setup font-sizes
$primary-title: 32px;
$secondary-title: 28px;
.container {
margin: 0 auto;
max-width: 1200px;
.primary-title {
color: $color-primary;
font-size: $primary-title;
}
.secondary-title {
color: $color-secondary;
font-size: $secondary-title;
}
}

JavaScript

What is JavaScript?

JavaScript is a programming language and core technology of the Web which you can make websites and applications dynamic and interactive.

It's unique because it can run directly in your browser, not just on a server.

Here are some benefits why should use JavaScript

  • It's relatively easy to learn and use
  • It can be used for client-side and server-side, front end and back end
  • It provides dynamism and interactivity on websites
  • It runs on multiple platforms and devices
  • It allows for cross-platform compatibility
  • It’s supported by all major web browsers
  • There are many libraries, frameworks, and APIs available to facilitate tasks
  • It’s fast for client-side and simple tasks
  • It works well in concert with other programming languages

Here is a quick example to change colors for title and description.

JavaScript is FUN!!

Learn JavaScript to manipulate DOM elements.

How we select and manipulate elements

<!DOCTYPE html>
<html>
<head>
<title>Manipulate elements with JavaScript</title>
</head>
<body>
<h1>My first heading</h1>
<p>My first paragraph</p>
<script>
const title = document.querySelector('h1');
const text = document.querySelector('p');
const button = document.querySelector('button');
function changeColors( ) {
title.style.color = 'blue';
text.style.color = 'orange';
}
button.addEventListener( 'click', changeColors);
</script>
</body>
</html>

React

What is React?

React is a JavaScript library for building user interfaces. With react you can build reusable UI components.

You could also build a single page applications.

Here are some benefits why should use React

  • Create and nest components
  • Adding markup and styles
  • Displaying data
  • Render conditions and lists
  • Respond to events and update the screen
  • Share data between components

An example to increase and decrease count with use state

import {useState} from 'react';
import './styles.css';
export default function App() {
return (
<div className="App">
<Header/>
<Content/>
</div>
);
}
function Header() {
return (
<header className="header">
<h1>Hello React</h1>
</header>
);
}
function Content() {
const [count, setCount] = useState(0);
function increaseCount() {
setCount((count) => count + 1);
}
function decreaseCount() {
if (count > 0) {
setCount((count) => count - 1);
}
}
return (
<main className="main">
<p>Start Learning React!</p>
<p>Count: {count}</p>
<button onClick={increaseCount}>
Increase count
</button>
<button onClick={decreaseCount}>
Decrease count
</button>
</main>
);
}

Vue

What is Vue?

Vue is a JavaScript framework for building user interfaces.

It builds on top of standard HTML, CSS, and JavaScript and provides a declarative, component-based programming model that helps you efficiently develop user interfaces of any complexity.

Here are some benefits why should use Vue

  • Keeping it simple
  • Lightweight
  • No steep learning curve
  • A useful range of tools
  • Incrementally adoptable
  • Integrates with other frameworks
  • Virtual DOM modelling and rendering
  • DOM manipulation benefit
  • Speed and performance
  • Fabulous support

An example to update the goal list

In this example we'll use the optional API.

<template>
<div class="App">
<form>
<h2>Goal</h2>
<input type="text" v-model="goalText">
<button type="button" @click="addGoal">
Add Goal
</button>
</form>
<h2>My goals</h2>
<ul>
<li v-for="goal in goals">
{{goal}}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
goals: [],
goalText: '',
};
},
methods: {
addGoal() {
this.goals.push(this.goalText);
this.goalText = '';
},
},
};
</script>
<style>
h3 {
margin-bottom: 10px;
padding: 0;
}
input {
margin: 0 0 20px 0;
width: 100%;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
border: 1px solid #41B883;
margin: 10px;
padding: 10px;
}
</style>

Our Partners

If you would like to join in this list, please, write me an email at: szabocsabasandor90@gmail.com