Starting with HTML and CSS

My journey to becoming a web developer started from revising and learning HTML and CSS. 

Do you like this gif? Check more gifs in the store.

It went smoothly, as I mentioned in one of my previous post I was attending in HTML & CSS course a few years ago and also I was using these languages at work from a graphic designer point of interest. 
HTML and CSS are considered the easiest entry points into the coding, and there are mainly useful for developing basic websites, however in my opinion HTML and CSS is definitely the place to start for beginners learning to code. 

What is HTML and what is CSS?

Let’s start with a short definition of HTML and CSS.  

HTML (HyperText Markup Language) is it authoring language used to write Web Pages. 

CSS (Cascading Style Sheet) is used to define styles for Web Pages, including the design, layout, and variations of display for different devices. 

Once you have practiced for a while of HTML, you will notice quickly that you will need to learn CSS to style it (for example using fonts, colors on the page). Without using CSS your web page will look not really good with the default HTML styling, so CSS is the obligatory next step after HTML. 

I prepared a simple image, which can show you how the CSS works on HTML websites. 

I hope it will help you to understand more of HTML and CSS and you will like it. 

Enjoy coding! 

Web development

How to start coding?

Continuing from the previous post, here you will find the answers to the most common questions of beginners. For sure, as a beginner, you have dozens of questions, which is completely normal.

First of all, Can anybody learn to code? 

Yes. I believe that anybody can learn to code, but unfortunately, coding isn’t for everyone. You shouldn’t learn to code if you are not like it. You need to be passionate about it. Doing programming thinking of the possibility of money but without passion and idea when you want to really do, it always ends badly. You need to love what you do, otherwise, you will fast notice lock of motivation. 

It’s very important to try out free online tutorials (which you can find easily on the Internet) before paying for a programming course. You will find out quickly if you like or not. 

Secondly and thirdly, how to start learning to code and which programming language should I learn first?

Before you will start, you should figure out what exactly you want to get out of coding. Maybe you want to build own awesome apps or websites, or other projects? Whatever the case, you do not need to feel overwhelmed by the number of languages, or complexity of bits of software you need to use to started coding.
Once you figure out why you want to code, look through the popular languages and decide which one you want to start with Java, JavaScript, C, C++, Swift, Python, Smalltalk, PHP. 

C, C++, these languages are mainly used for creating standalone computer applications such as video games and there are quite difficult to learn for a beginner. 
Java and JavaScript are completely different languages, despite the similarity in their names. You can use them for more interactive websites.

Personally, I started from revising HTML and CSS (there are not programming languages), but as I wrote above you need to decide what to want to do first. 

Set a goal and make yourself a schedule. If you don’t have a schedule and an end goal, can be the way more difficult to go from step to the next step. Plan and organize your work and everything should be easier :). 

What about you? Did you decide which language you want to learn first?


How to create a Bokeh Effect Wallpaper with text in Photoshop?

In this tutorial, you will learn to create a Bokeh Effect Wallpaper with text in Photoshop CS6. Bokeh Effect is the way a camera lens treats out-of-focus points of light. The term “Bokeh” comes from the Japanese word and means “blur” or “blur quality”. Follow the steps below and create your own Boken Effect wallpaper. At the end of the post, you can find also the video tutorial. Good luck! 

Do you like this image? Check more images in the store.

Step 1:

Open a colorful image that you’d like to use to create your Bokeh effect. Set the resolution on your image 150px and the size of your picture.

Step 2:

Go to Filter->Blur->Gaussian Blur and set the Radius to 65px and press Okay.

Step 3:

We’ll darken the mid-tones by clicking on the adjustment layer and selecting Curves

Go to the center of the grid and pull it slightly down and to the right.

Step 5:

Create a new layer and open the Brush Tool. Open Brush Panel and set up:
Size: 125pxHardness: 100%Spacing: 80%

Click Shape Dynamics and make the:
Size Jitter: 50%

The control: FadeAngle

Jitter: 0%

Angle control: off

Go to Scattering. Make the Scatter 1000%. Count 1.

Step 6:

Now, randomly brush over your image. Change the Blend Mode to “Overlay” and reduce the opacity to 50%.

Go to Filter->Blur->Gaussian Blur. Blur it 16px and click Okay.

Step 7:

Click on the New Layer icon. Change the Blend Mode to “Overlay” and opacity to 50%, and randomly brush over the image.
Go to Filter->Blur->Gaussian Blur. Blur it 12px and click Okay.

Step 8:

Make a new layer, change Blend Mode to “Overlay” and opacity to 50%, and again randomly brush over the image.
Go to Filter->Blur->Gaussian Blur. Blur it 8px and click Okay.

Next, I’ll show you how to add Bokeh text.

Step 1:

Open your “Horizontal Type Tool” and choose the thin font. Set the size around 190px, and select the “sharp” option. Type out your text.

Step 2:

Click by the right button of the mouse on the text layer and choose an option Select Pixels

Click off the eyeball to the text layer to hide it. Create a new layer.

Step 3:

Open the Paths Panel and click on the icon of the upper right. Select Work Path and set 0.5px.

Step 4:

Open your Brush Tool and open the Brush Tool Panel. Click “Brush Tip Shape” and make the size 30px, spacing 80% and hardness 100%.

Select Shape Dynamics and set the size Jitter 50% and control Off. Minimum diameter 0%. Uncheck Scattering.

Click Color Dynamics->Foreground/Background Jitter set to 100%.


Opacity Jitter: 0%, control Off
Flow Jitter: 100%

Step 5:

Click on the icon at the upper right corner of the Paths panel and click Stroke Path.

Choose Brush and make sure that “Simulate Pressure” is not checked.

Step 6:

Open back the layers panel and change Blend Mode to Color Dodge. To hide the Work Path hit Cmd+H.

Create a copy of the layer. Choose Blending Options->Inner Glow and change the Blend Mode to Color Dodge, and opacity to 50%Source center and hit Okay. Go to Filter->Blur->Gaussian Blur. Blur it 4px and click Okay. Your Bokeh Effect Wallpaper is Ready!

You can see also the tutorial video below:



How to add a GIF into iMovie?

If you having trouble putting your GIF into iMovie this tutorial is for you! That’s really easy. You can watch my video tutorial (video tutorial you can find at the end of this post), or just follow the steps below to learn how to add GIFS into iMovie. 

Step 1:

Put your GIF to the desktop and start it playing. Then, open the Quick Time Player and hit New Screen Recording.

A little box will pop up with the red dot in. 

Step 2:

Click on the dot and select your GIF (mark the shape) to record.

Step 3:

Now you can start recording your GIF. After the time which has been chosen by you, you can stop recording by clicking the dot on the top of the screen.

or by clicking on the Quick Time Player icon and press Stop Screen Recording.

And Final Step 4:

Save your new Quick Time Player file and then drag it to iMovie. Below you can find also my video tutorial. Hope you’ll find it helpful. Enjoy! 


How to make an animated GIF in Photoshop?

How to make an animated GIF in Photoshop? You won’t believe how simple it is! It takes just a few minutes! To learn how to use your images to create an animated GIF watch the video tutorial below, or follow the steps from this post. 

You can watch the tutorial video here, I hope you’ll find it helpful. 
Note: This tutorial has been made in Photoshop CS6.

Here is how you can make own animated GIF step by step. Let’s get it started! 
Note: Before you’ll start making an animated GIF you have to get your images imported and ready to animate. So, if you have a series of images ready to go we can go to step 1.

Step 1: Load images to Photoshop.

Load your images into stacks. From the top menu. Go to File->Scripts->Load Files Into Stack. This option allows you to load an entire range of your images, rather than needing to drag each one to your document individually. 

Step 2: Set up your timeline. 

Open the Timeline window (Window->Timeline). Once you have selected the Timeline option will appear at the bottom of your screen. 

Step 3: Make Frames From Layers.

Press the button on the right side of the Timeline window, and select Make Frames From Layers.

Step 4: Choose the frame duration.

Under each frame, select how long it should appear before switching to the next frame. Then, at the bottom of the toolbar, select how many times you’d like it to loop.

Step 5: Preview your GIF. 

Before saving your GIF, you can preview your GIF by pressing the play icon. 

Step 6: Save your GIF! 

Go to File->Save For Web…and press Save again. 

and Voila! Your GIF is ready.



How to create Bubbles in Photoshop?

How to create Bubbles in Photoshop? That’s easy! Using this tutorial you’ll learn how to create  own bubble brush. Let’s get it started!

Do you like this gif? Check more gifs in the store.

Follow the steps below, and watch the video tutorial.

Note: In this video, like in the tutorial on my web page I worked in Photoshop CS6 (this is my first video tutorial, so please bear with me).

Step 1: Create a new document.

Create a new document (the width 600px and the height 600px) with the background content- white.

Step 2: Draw the shape of the bubble.

Select an elliptical marquee tool. Drag a selection on the panel, which will become our basic shape of the bubble.

Tip: Holding the shift key makes the perfectly round shape of the bubble.

Step 3: Create a new layer.

In the layer menu on the top of the screen choose New, and then choose Layer Via Copy. On the layers panel, click on our new layer by right mouse button and choose Blending Options.

Step 4: Inner Glow.

The layers styles appeared. In the layers styles dialog box select the Inner Glow option and change the Blend Mode to Multiply. Click on the color swatch below and change the color to black from the color picker. Set the element size to around 40px.

Step 5: Gradient Overlay 

Add Gradient Overlay. Click on the Gradient preview bar and select black to white gradient (3rd in the row). Change the style to Radial and click on the black spot and then drag it to the left top. Click Okay.

Step 6: Select the brush

Set your brash to the soft round (first brush) and the size around 100px. Create a new layer and make a dot. Go to the Filter menu and select Distort, and then Twirl. Set the angle and click Okay. Adjust new shape as you like.

Step 7: Almost ready!

From the Edit menu select Define Brush Preset and give it the name…and Voila! You can use your new bubble brush.

Tip: Go to the Window panel and open Brush panel, you can adjust the shape, or position of your bubbles. Change the brush color to white and start creating 🙂


Web development

What is a Web Developer?

I set my goal first, now is the time to set the plan of small goals. To understand what web development is and make the planning easier.
I am posting today some theory before we will go to practice. Hope this helps.

Do you like this image? Check more images in the store.

Understanding What Is A Web Development

In simple words:

A Web Developer is a kind of programmer who takes a web design, which has been created by a client or design team and turns it into a website or distributed network applications. Web developers do this by writing lines of code, using programming languages. The languages typically use HTML, CSS, and JavaScript in the client, PHP or Java in the server, and Http for communications between the client browser and a Web server.

In terms of what this actually looks like, web development can be divided into three categories:

Web developer

a) Front End Web Developer

It is the practice of converting data to a graphical interface (it is what you see when you visit a web browser). A front end web developer use languages (will be fluent) like HTML, CSS, and JavaScript.

b) Back End Web Developer

While the front end of a website includes everything the user interacts with directly, the back end is responsible for a server-side web application logic and integration of work of front end developers do. The user doesn’t see this work, however, the back end developer makes the parts they do see run smoothly. A back end developer uses languages like Ruby, PHP, Java, and Python.

c) Full Stack Web Developer

A Full Stack Developer is a programmer who can handle all the work of databases, systems engineering, and clients. Combine the skill sets of a front end web developer and a back end web developer. As a full-stack developer, you will understand the connections between the front and the back end.
It’s your choice of which of these developer paths you choose. I personally recommend you to start by learning solid front end fundamentals (which I also decided to do it first) and after that you will decide what to do next and what you want to specialize in, whether is staying with front end, go into back end or trying it all together as a full stack developer.

Good luck and get out there and start learning!

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. 

Web developer

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. 
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. 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!