One of my personal favorite lectures. We're installing Brackets here but what's more important is that we're customizing the heck out of it! So much plugins to enhance our coding experience, so don't miss out on this lecture!

Photoshop will be mandatory software during the duration of this course, so make sure you have it installed before you even start diving into the course.

One more important lecture. We are setting up the file structure and we'll be installing all the necessary libraries. I'm also explaining what is reset.css and why you should use it.

Here you can find the final project files that are consisted of literally everything that we've coded during the conversion of the PSD design. Also, the PSD design is included here as well. Make sure you use these for reference and solving-problem purposes.

I have prepared 25 unique PSD designs for you, which can be downloaded in this lecture. Feel free to take and re-create one of these into pure HTML after completing the course. Happy coding!

In this lecture, we are determining the size of the project by using Photoshop tools. Then, we're adjusting the website's container/holder accordingly. Jump in the new section!

You have to play smart when deciding which images to use from the design. And what elements can be created with CSS3 to save up storage space. So, in this lecture, I'm explaining exactly this.

This is the lecture where we start using some neat Photoshop features to slice off the images from the design, save them for the web and later use them in the website.

Google Fonts is an amazing library to use fonts from. Its easy to implement and it takes very little time. Here we're looking at 2 different ways you can implement fonts in your projects, on of which is Google Fonts library.

According to the project, helper classes are either VERY useful or useless. Learn what are they, when to use them and HOW to use them. They can save you a lot of time and struggle.

We're finally starting to convert the PSD design. In this lecture we're writing the markup for the navigation bar, inserting the image, the text content and more.

Adding first touches such as background images of the section, border-bottom on hover on the navigation bar and more.

In this second part we're finalizing the styling of the hero section using floats and margins to the elements. Also we're making the CTA (call to action) button look fancy on hover.

Among other things, in this lecture, we're going to be creating custom columns (just like Bootstrap's columns), but we will style them later when creating the responsiveness of the website manually. Because manual creation of responsive website is a must have skill if you're planning to become web developer/designer.

We are positioning the previously created custom columns into a row-fashion. That means they are displayed one next to the other one - which is done with width and float rules. Watch how!

Pretty easy lecture, we're coding the HTML markup for the nose section. Follow along!

We're transforming the section to look exactly like the one in the PSD design in a record time. Join me!

Yet again we are setting up custom columns. You should be familiar with these now and maybe even try to code them on your own to practice.

Finalizing the footer and giving it a nifty look. After this lecture you'll definitely be able to edit and utilize custom columns by your own on any next project you will take.

The last part of the conversion is upon us. Get coding!

Finish the CSS and get ready to learn some animation!

In a world of fast-paced and changing technologies, you need to keep up. Learn to create absolutely breathtaking animations using famous libraries to make it easier for you. Libraries like Animate.css, Waypoints.js and WOW.js will save your life.

We're FINALLY getting ready for the iPhone animation, This is exciting. Prepare all the files you need in order to get started!

In this lecture, I will briefly explain the concept of these positioning types and clear up any confusion that you might have about positioning stuff inside a div holder. We're also taking a look at z-index positioning.

We're putting together the scattered iPhone using the positioning techniques we've learned previously.

After this lesson, the iPhone will have its final looking animation done with JavaScript, but it won't be interactive. For interaction, watch the next lecture ;)

In this lecture, we are adding delays with JavaScript as well, to make an animation (illusion) of an iPhone turning on.

This is when things get interesting. You get your hands dirty and use the skills that you've gained so far to create a fully custom animated webpage to your own style. Get coding!

We're making final tweaks to the website and I'm starting to explain what are media queries and using basic example I'm showing a demo of what media queries are capable of doing.

We're kicking off with making the first section responsive using media queries. Learn some cool tricks here to save you time and energy!

In this lecture, we are completely finalizing the responsiveness part of this website. The website now is mobile ready, fitting any screen size and mobile width. Cograts!

In this relatively short amount of time we're building a completely functional, RESPONSIVE navigation bar from scratch using NO FRAMEWORKS, just with pure CSS3 and little bit of JavaScript. If you're excited as I am, join me right now!

Thank you very much for being a student. Congratulations on doing a really good job finishing the course all the way. I truly wish you have a successful career in whatever niche you're going to pursuit. Good luck and farewell!

In this first bonus lecture, we're taking a look at a very nifty developer console tool called "Inspect Element" which is natively built into Chrome Browser. You should use this to debug ANY problem that you face during development process. In this lecture, I teach you how.

We are starting to convert a brand new PSD design that features real-world problems. In this short series, we'll be taking a look in a PSD design that features nifty elements and graphics, while turning them into functional HTML. Join me in the first lecture where we are showcasing and looking at this brand new PSD file.

Yet another bonus lecture! This time, we are writing the layout markup for the brand new PSD design. Prepare yourself for some neat CSS3 lectures that are coming in the following weeks! W're going to edit the markup that we're writing in this bonus lecture. Stay tuned!!!

A brand new bonus lecture where we are preparing the content holder for the following lectures. We're also adding the necessary margins and paddings, as well as font styles and font sizes.

This is the official course, student-only chatroom. Join hundreds of students, just like you, in a multiple-channel Discord chatroom where you can discuss anything from hobbies to web dev topics and connect with me personally.