Categories
CSS HTML Web development

CSS Saturn/ Planet Rings

CSS Planet with Rings

Demo:

*to see the code on the website click here.

To create the CSS Saturn/ Planet Rings follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="saturn">
  <div class="clouds"></div>
  <div class="planet"></div>
  <div class="ring"></div>
    <div class="up"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #202c39;
}

.saturn {
  position: relative;
}

Add clouds and stars:

.clouds {
  position: absolute;
  background-color: #283845;
  width:200px;
  height: 35px;
  border-radius:30px;
  left:-50px;
  top:-50px;
  box-shadow: -120px 35px #202c39, 100px 35px #202c39, 30px 35px #283845, -90px 70px #283845, 80px 70px #283845, -220px 105px #202c39, -80px 105px #283845, -90px 140px #283845, 170px 140px #283845, 270px 175px #202c39, 170px 175px #283845, 150px 210px #283845, -20px 210px #283845, -110px 245px #202c39,120px 245px #202c39, 30px 245px #283845, 50px 280px #283845;
}

.clouds:before {
  position: absolute;
  content:"";
  background-color: #f2d492;
  border-radius:50%;
  width:7px;
  height: 7px;
  left:-10px;
  box-shadow: -75px 110px #f2d492,-25px 220px #f2d492, 230px -10px #f2d492, 200px 260px #f2d492;
}

.clouds:after {
  position: absolute;
  content:"";
  background-color: #f2d492;
  border-radius:50%;
  width:4px;
  height: 4px;
  left:30px;
  top:20px;
  box-shadow: 100px 300px #f2d492, 300px 100px #f2d492;
}

Style the planet:

.planet {
  position: relative;
  width:200px;
  height: 200px;
  border-radius:50%;
  background-color: #cc5803;
  overflow: hidden;
}

.planet:before {
  content:"";
  position: absolute;
  width: 100px;
  height: 25px;
  border-radius:20px;
  top:100px;
  background-color: #f29559;
  left:30px;
  box-shadow: 60px 0 #f29559, -75px 25px #cc5803, 45px 25px #cc5803,-20px 25px #f29559, 0 50px #f29559,60px 50px #f29559, -40px 75px #cc5803,80px 75px #cc5803, 30px 75px #f29559;
}

.planet:after {
  content:"";
  position: absolute;
  width:200px;
  height: 200px;
  border-radius:50%;
  box-shadow: inset -10px 10px rgba(0,0,0,0.2);
}
.up {
  position: absolute;
  width:200px;
  height: 100px;
  border-radius:100px 100px 0 0;
  background-color: #cc5803;
  top:0;
  overflow: hidden;
}

.up:before {
  content:"";
  position: absolute;
  width: 100px;
  height: 25px;
  border-radius:20px;
  left:70px;
  background-color: #f29559;
  box-shadow: -75px 25px #cc5803, 45px 25px #cc5803,-20px 25px #f29559, 0 50px #f29559, -80px 50px #f29559, -110px 75px #cc5803,30px 75px #cc5803, -50px 75px #f29559;
}

.up:after {
  content:"";
  position: absolute;
  width:200px;
  height: 100px;
  border-radius:100px 100px 0 0;
  box-shadow: inset -10px 10px rgba(0,0,0,0.2);
}

Add the ring/ orbit:

.ring {
  width: 305px;
  height: 305px;
  border: solid 50px #b8b08d;
  border-radius: 50%;
  top: -95px; 
  left: -100px; 
  position: absolute;
  transform: rotate3d(1, 0, 0, 75deg); 
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Moon orbiting the Earth on the SVG path

Solar System Animation

CSS Plane Animation

Categories
#SVG Web development

Moving text on an SVG path

SVG text on a circle

Example1 – Moving text on a circle:

*animation opened in the Safari browser.
*to see the animation on the website click here.

Demo:

Example2 – Moving text on a heart path:

*animation opened in the Safari browser.

Demo:

Step1.

Add a SVG path/ shape

In this tutorial we’ll create text on the circle (add a SVG path to the body section, to see more about the SVG path click here.):

<svg id="tutorial" data-name="tutorial" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.48 144.48">
 
  <path class="shape" id="shape" d="M242.93,123A71.74,71.74,0,1,1,171.2,51.22,71.73,71.73,0,0,1,242.93,123Z" transform="translate(-98.96 -50.72)"/>

Step2.

Add CSS/ Style the circle

.shape {
  fill:none;
  stroke:#1d1d1b;
}

#tutorial {
  position: relative;
  overflow: visible;
  width: 15%;
  left: 40%;
  top: 100px;
  transform: rotate(-120deg);
}

Step3.

Add the text( body section)

  <text font-family="arial" font-size="14" fill="black">
        <textPath xlink:href="#shape">SVG moving text on the circle.</textPath>

Step4.

Add SVG Animation

  <animate attributeName="font-size" dur="10s" values="8;31" repeatCount="indefinite"></animate>
    </text>
</svg>

Enjoy coding!

Categories
#SVG JavaScript Web development

Baggage Scan /SVG & JavaScript Animation

SVG luggage

Scan the luggage!

Demo:

To create the animation you need to have two images of the luggage (closed and open) in SVG/ png format (to practice only you can use mine which I drew in Adobe Illustrator CC) and follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add JavaScript
luggage
luggage inside

Step1.

Add HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <rect width="100%" height="auto" fill="#ffb4a2"/>
  <image xmlns:xlink= "http://www.w3.org/1999/xlink" xlink:href="https://lenadesign.org/wp-content/uploads/2020/06/luggage.png?w=640" width="100%" height="100%" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="mask">
      <circle id="scan" cx="50%" cy="50%" r="8%" />
    </clipPath>
  </defs>
  <g clip-path="url(#mask)">
    <rect width="100%" height="100%" fill="#434373"/>
    <image xmlns:xlink= "http://www.w3.org/1999/xlink" xlink:href="https://lenadesign.org/wp-content/uploads/2020/06/luggage-inside.png?w=640" width="100%" height="100%" />
  </g>
</svg>

Step2.

Add CSS

body {
  background-color:#ffb4a2;
  height: 100vh;  
}

svg {
  position: absolute;
  top: 100px;
  left: 15%;
  width: 70%;
  height: 70%;
}

Step3.

Add JavaScript

var svgElement = document.querySelector("svg");
var maskedElement = document.querySelector("#scan");
var svgPoint = svgElement.createSVGPoint();

function cursorPoint(e, svg) {
    svgPoint.x = e.clientX;
    svgPoint.y = e.clientY;
    return svgPoint.matrixTransform(svg.getScreenCTM().inverse());
}

function update(svgCoords) {
    maskedElement.setAttribute('cx', svgCoords.x);
    maskedElement.setAttribute('cy', svgCoords.y);
}

window.addEventListener('mousemove', function(e) {
  update(cursorPoint(e, svgElement));
}, false);

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    var touch = e.targetTouches[0];
    if (touch) {
        update(cursorPoint(touch, svgElement));
    }
}, false);

Enjoy coding!

Categories
#SVG Web development

SVG Handwriting Animation

Practicing SVG Path drawing I created the SVG Handwriting Animation.

SVG Handwriting Animation

I’ve tried several ways to make this animation, and I found (in my opinion) the easiest way is to create the text in Adobe Illustrator (or any different program which creates SVG’s) by using the path tools like the Pen tool, or the Pencil tool.

*animation opened in the Safari browser.
To see the live output of the animation on the website click here.

Demo:

Step1.

Draw your text

This time I used the Pencil tool, and renamed each path (like on the image below, I drew the letter L and I named this path as an L). This will make the animation easier to set up later.

SVG Handwriting Animation

I drew the letters one by one but if you want to draw more letters on the same path that will be okay too.

Draw your text and export it like an SVG. (To see how to create an SVG file click here).

Step2.

Add the HTML and paste your SVG code into it:

<div id="container">
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285.84 73.32"><defs><style>.cls-1{fill:none;stroke:#1d1d1b;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;}</style></defs><title>lenastanley</title><path id="L" class="cls-1" d="M109.68,101.19c1.09,5.41,6.88,9,12.4,8.87s10.6-3.21,14.52-7.1c1.82-1.81,3.52-3.94,3.92-6.47s-.9-5.5-3.39-6.15a5.31,5.31,0,0,0-4.69,1.34,12.14,12.14,0,0,0-2.83,4.18c-5.73,12.48-4,27.77-11.35,39.37a13.56,13.56,0,0,1-4,4.32,6.65,6.65,0,0,1-5.66.87c-3.45-1.21-4.62-5.89-3.14-9.23s4.79-5.48,8.15-6.93c4.7-2,10-3.1,15-2s9.64,4.64,11.15,9.55-.81,10.95-5.58,12.85" transform="translate(-103.33 -88.71)"/><path id="E" class="cls-1" d="M154,127.24a15.13,15.13,0,0,0,6.2-2.32c1.77-1.34,2.93-3.76,2.13-5.84s-3.48-3.15-5.72-2.65a9.37,9.37,0,0,0-5.36,4,17.26,17.26,0,0,0-3,11.81,7.87,7.87,0,0,0,1.85,4.62,6.47,6.47,0,0,0,5.85,1.6,12.8,12.8,0,0,0,5.55-2.9" transform="translate(-103.33 -88.71)"/><path id="N" class="cls-1" d="M170.47,115.52c1.94,3.42,1.81,7.63,1,11.47s-1.56,7.08-2.12,11c1-3.25,2.28-6,3.4-10.17,1-3.69,2.5-7.54,5.67-9.67,1.28-.87,3.07-1.36,4.32-.45a4.59,4.59,0,0,1,1.45,3.13,43.49,43.49,0,0,1-.68,17.12l.28-.62" transform="translate(-103.33 -88.71)"/><path id="A" class="cls-1" d="M210.05,138.29a16.72,16.72,0,0,1-.49-8.35,74.74,74.74,0,0,0,1.18-8.38,6.47,6.47,0,0,0-1.36-4.8,4.93,4.93,0,0,0-4.8-1.07,10.56,10.56,0,0,0-4.33,2.71c-3.58,3.41-6.19,8.15-5.93,13.08.11,2.12.86,4.37,2.61,5.56a4.69,4.69,0,0,0,7.26-3.18" transform="translate(-103.33 -88.71)"/><path id="S" class="cls-1" d="M263.55,91.6a11.16,11.16,0,0,0-7.92,9,4.59,4.59,0,0,0,1.12,4.2,3.42,3.42,0,0,0,4.72-.76,5,5,0,0,0,.21-5.07,9.18,9.18,0,0,0-3.79-3.67c-3.76-2.15-8.58-2.7-12.46-.77s-6.42,6.59-5.29,10.77c.88,3.26,3.68,5.69,6.7,7.22s6.34,2.35,9.46,3.68,6.14,3.31,7.64,6.34a10.65,10.65,0,0,1-.8,10.26,14.2,14.2,0,0,1-8.68,5.91,21.83,21.83,0,0,1-10.65-.33c-3.31-.87-6.6-2.43-8.59-5.21s-2.24-7,.12-9.44a8.48,8.48,0,0,1,5.13-2.27,14.31,14.31,0,0,1,9.19,26.42" transform="translate(-103.33 -88.71)"/><path id="T" class="cls-1" d="M280.38,107c-2,7.37-4,14.83-4.25,22.46a18,18,0,0,0,.91,7.16c.42,1.09,1.2,2.23,2.37,2.32" transform="translate(-103.33 -88.71)"/><path id="T2" class="cls-1" d="M272.26,116.93a27,27,0,0,1,11.69-.07" transform="translate(-103.33 -88.71)"/><path id="A2" class="cls-1" d="M303.78,139.29a16.77,16.77,0,0,1-.48-8.36,76.78,76.78,0,0,0,1.18-8.38c0-1.71-.17-3.57-1.36-4.8a5,5,0,0,0-4.81-1.07A10.58,10.58,0,0,0,294,119.4c-3.59,3.4-6.2,8.15-5.94,13.08.11,2.12.86,4.36,2.62,5.55a4.75,4.75,0,0,0,4.5.42,4.8,4.8,0,0,0,2.76-3.59" transform="translate(-103.33 -88.71)"/><path id="N2" class="cls-1" d="M315,115.69c1.93,3.41,1.81,7.63,1,11.46s-1.56,7.09-2.12,11c1-3.25,2.28-6,3.4-10.17,1-3.69,2.49-7.54,5.66-9.68,1.28-.86,3.08-1.36,4.33-.45a4.61,4.61,0,0,1,1.44,3.14,43.69,43.69,0,0,1-.67,17.12l.27-.63" transform="translate(-103.33 -88.71)"/><path id="L2" data-name="L" class="cls-1" d="M345.1,96.4c-.3,11.8-4.39,23.33-4.06,35.13a15.66,15.66,0,0,0,1.58,7.26" transform="translate(-103.33 -88.71)"/><path id="E2" class="cls-1" d="M355.85,127.4a15.12,15.12,0,0,0,6.2-2.31c1.77-1.35,2.93-3.77,2.13-5.84s-3.48-3.15-5.72-2.66a9.43,9.43,0,0,0-5.36,4,17.29,17.29,0,0,0-3,11.8,7.92,7.92,0,0,0,1.86,4.62,6.47,6.47,0,0,0,5.85,1.61,12.71,12.71,0,0,0,5.55-2.91" transform="translate(-103.33 -88.71)"/><path id="Y"class="cls-1" d="M373.08,115.75a29.75,29.75,0,0,0-.38,16.7c.52,1.89,1.42,3.94,3.26,4.61a4.61,4.61,0,0,0,4.57-1.22,12,12,0,0,0,2.58-4.21A69.17,69.17,0,0,0,387.62,116l-1.46,13.43a84.83,84.83,0,0,1-2.53,15,28.46,28.46,0,0,1-7.56,13,11.54,11.54,0,0,1-5.4,3,6.09,6.09,0,0,1-5.75-1.72c-1.85-2.17-1.35-5.66.47-7.85s4.63-3.29,7.4-4a16.16,16.16,0,0,1,8.67-.07c2.78.89,5.26,3.18,5.72,6.07l.49-.49" transform="translate(-103.33 -88.71)"/></svg>
</div>

Step3.

Add CSS

Set up the colour and the position of your background, and the elements:

body {
  background-color: #FFD4CA; 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}

#container {
  position: relative;
  cursor:pointer;
  width: 100%;
  max-width: 400px;
  left:-200px;
}

svg {
  width: 100%;
  max-width: 400px;
  padding: 150px; 
  
}

Add your letters(paths):

#L  {
        stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards;
}

To each letter, I added the animation – duration time and animation-delay to make handwriting smoother.

#E {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards .8s;
}

#N {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 1.1s;
}

#A {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 1.3s;
}

#S {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.4s linear forwards 1.8s;
}

#T {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 2.3s;
}

#T2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 2.3s;
}

#A2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 2.6s;
}

#N2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 2.9s;
}

#L2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 3.2s;
}

#E2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 3.5s;
}

#Y {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 3.8s;
}

Step4.

Add CSS Animation

Add the @keyframes:

@keyframes lena {
	0% {
        stroke-width: 3;
		stroke-dashoffset: 600;
	}
    
    14% {
        stroke-width: 3;
    }
    
    15% {
        stroke-width: 3;
    }
    
	100% {
		stroke-dashoffset: 0;
	}
}

To see the live output of the animation go to lenastanley.com.

Enjoy coding!

Categories
Photoshop

How to create a sparkle effect in Photoshop?

In this tutorial, you will learn how to create a sparkle effect in Photoshop CS6. Follow the steps below and watch the video tutorial and start making your own sparkles!

Sparkles in Photoshop

Step 1.

Create a new document and make a background in a dark color.

Sparkle Effect in Adobe Photoshop

Add a new layer and use an option Gradient Tool. In the middle of the layer draw a short line.

How to create a sparkle effect in Photoshop?

Step 2.

Duplicate layer and change the shape of your layer, like on the picture below.

Sparkle Effect in Adobe Photoshop
How to create a sparkle effect in Photoshop?

Step 3.

Duplicate a few times more a layer and make “star shape”.

Sparkle Effect in Adobe Photoshop

Drag the first layer with the gradient to the back of “star shape”. Hide by pressing eyeball background and in the layer panel select the option Merge Visible.

Sparkle Effect in Adobe Photoshop
Sparkle Effect in Adobe Photoshop

Your sparkle is ready to use!

Sparkle Effect in Adobe Photoshop

Watch also video tutorial:

Categories
CSS Web development

Introduction to CSS Animation

Animation is a great way to make your web page more attractive. CSS animation property allows the animation of HTML elements without using JavaScript.

CSS Animation Introduction

What is a CSS Animation?

An animation lets an element gradually change from one style to another one. You can change as many CSS  properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animation. 

The CSS animation property is shorthand of the following properties:

@keyframes

animation-name

animation-duration

animation-delay

animation-iteration-count

animation-direction

animation-timing-function

animation-fill-mode

The @keyframes Rule

The main component of CSS Animation is @keyframes – the CSS rule where animation is created. Inside @keyframes, you can define the stages and settings of the animation.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example-1 {
  width: 100px;
  height: 100px;
  background-color: #2a9d8f;
  animation-name: example-1;
  animation-duration: 4s;
}

@keyframes example-1 {
  from {background-color: #2a9d8f;}
  to {background-color: #e9c46a;}
}
</style>
</head>
<body>

<div class="example-1"></div>

</body>
</html>

Note: The animation will finish in 4 seconds. It will gradually change the background color of the <div> element from “green” to “yellow”. After the animation, the square changes back to its original color.

Output:


Click on the square to repeat the animation.

The animation-duration property defines how long time an animation should take to complete. If the animation-duration property is not specified, no animation will occur, because the default value is 0 seconds.

The following example will change the background and the position of the <div> element when the animation is 50% complete, and again when the animation is 100% complete:

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  width: 100px;
  height: 100px;
  background-color: #2a9d8f;
  position: relative;
  animation-name: example-2;
  animation-duration: 4s;
}

@keyframes example-2 {
  0%   {background-color:#2a9d8f; left:0px;}
  50%  {background-color:#f4a261; left:200px;}
  100% {background-color:#2a9d8f; left:0px;}
}

</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:


Click on the square to repeat the animation.

The animation-delay property specifies a delay for the start of an animation.

Example (the animation will start with 2 seconds delay):

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  width: 100px;
  height: 100px;
  background-color: #2a9d8f;
  position: relative;
  animation-name: example-3;
  animation-duration: 4s;
  animation-delay: 2s;
}

@keyframes example-3 {
  0%   {background-color:#2a9d8f; left:0px;}
  50%  {background-color:#f4a261; left:200px;}
  100% {background-color:#2a9d8f; left:0px;}
}

</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:


Click on the square to repeat the animation.

The animation-iteration-count property specifies the number of times an animation should run. Using the value “infinite” you will make the animation continue forever.

Example (the animation will repeat 3 times):

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  width: 100px;
  height: 100px;
  background-color: #2a9d8f;
  position: relative;
  animation-name: example-3;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

@keyframes example-3 {
  0%   {background-color:#2a9d8f; left:0px;}
  50%  {background-color:#f4a261; left:200px;}
  100% {background-color:#2a9d8f; left:0px;}
}

</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:


Click on the square to repeat the animation.

The animation-direction property specifies whether the animation should be played forward, backward, or in alternate cycles.

Demo:

The animation-direction property can have the following values:

normal (default) – the animation is played as normal (forward).
reverse – the animation is played in the reverse direction (backward).
alternate – the animation is played in forward first, then backward.
alternate-reverse – the animation is played backward first, then forward.

Example (using the “reverse” value):

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  width: 100px;
  height: 100px;
  background-color: #2a9d8f;
  position: relative;
  left:200px;
  animation-name: example-5;
  animation-duration: 4s;
  animation-direction: reverse; 
}
@keyframes example-5 {
  0%   {background-color:#2a9d8f; left:200px;}
  25%  {background-color:#e76f51; left:0px;}
  50%  {background-color:#e9c46a; left:200px;}
  75%  {background-color:#f4a261; left:0px;}
  100% {background-color:#2a9d8f; left:200px;}
}

</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:


Click on the square to repeat the animation.

The animation-timing-function property specifies the speed curve of animation.

The animation-timing-function property can have the following values:

ease – specifies an animation with a slow start, then fast, then and slowly. This is the default.

linear – specifies an animation with the same speed from start to end.  

ease-in – specifies an animation with a slow start.  

ease-in-out – specifies an animation with a slow start and end. 

CSS animations do not affect an element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.

The animation-fill-mode property specifies a style for the target element when the animation is not playing. 

The animation-fill-mode property can have the following values:

none – the default one. The animation will not apply any styles to the element before or after it is executing. 

forwards– the element will retain the style values that are set by the last keyframe.

backwards– the element will get the style values that are set by the first keyframe.

both – the animation will follow the rules for both forwards and backwards, extending the animation properties in both directions. 

Example(square will move 200px to the left and will stay in this position):

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  width: 100px;
  height: 100px;
  background-color: #2a9d8f;
  position: relative;
  animation-name: example-6;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes example-6 {
  0%   {background-color:#2a9d8f; left:0px;}
  100% {background-color:#2a9d8f; left:200px;}
}

</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:


Click on the square to repeat the animation.

I hope you find it useful.

Enjoy coding!

Categories
Web development

Is 30 years too old to learn computer programming?

I am 30 years old and I worked as a graphic designer in the UK for the last 5 years and recently decided to change direction to become a software developer. 

female-web-dev
Do you like this image? Check more images in the store.

I loved my job and working on my projects but I am feeling that it’s time for making a career change. Just I can not see myself doing this job for the rest of my life…
I have always wanted to learn programming languages (even started with CSS and HTML many years ago during my University years) and I wanted to make stuff with code. 

Web developer desk - vector image
Do you like this image? Check more images in the store.


Have you ever wondered if you’re “too old” to start learning how to program?

Am I too old to learn how to code?


I believe that NO, it’s never too late to learn something new. There is no age that’s “too old” to learn to code. The only matter is your willingness to learn! Believe in yourself, set the goal, and do it. 
Learning code became my priority, so why I started this blog and I am here writing this post. I think, that this blog will be the best way to register my progress. 
Maybe this page can help also other people like me trying to learn code. 


Let’s do this!

Read also:

What is a Web Developer?

How to start coding?

HTML Introduction