DEV Community: Maxi Ruti Park

Gsap GreenSock Snippets

Maxi Ruti Park — Sun, 11 Sep 2022 08:13:15 +0000

Gsap GreenSock Snippets

Hello Everyone!

Today I want to share something I have been working on that I hope becomes useful for many developers.

I created a vs code extension with a bunch of useful snippets for GSAP, called Gsap GreenSock Snippets.

You can download the extension directly from vs code or from the marketplace if you visit the next link.

What is GSAP?

As they describe in their website, it is a robust JavaScript toolset that turns developers into animation superheroes. We obsess about performance, compatibility, and support so that you don't have to.

With almost 15k GitHub stars, more than 300.000 weekly downloads, and 11 million sites using it, GSAP (GreenSock Animation Platform) is one of the best libraries for web animations.

And even though, GSAP can take your website to the next level, its learning curve is rather shallow and the best of it is that the documentation is really good with a lot of examples and videos.

My experience with GSAP

I have been learning about gsap for about a year and even though I am far away from being an expert or even really good at it, it has helped me tremendously and made a big impact on my career, since I have been able to add new features to the projects I have been working.

So that is why, I recommend everyone that is interested in frontend web development to take their time and learn it because I am sure it will make an impact on your career too.

About the extension

GSAP GREENSOCK Snippets include snippets for some of the best and most used features of GreenSock.
From the basics to , from , fromTo to more elaborate snippets for Draggable,
Flip and of course ScrollTrigger.

On top of that, there are snippets for quick imports and registration, creating costume effects, utility methods and more.

Snippets

The snippets are is inspired by GreenSock's documentation.

Basics

Snippet	Purpose
`gto`	gsap.to(selector,{toVars})
`gfrom`	gsap.from(selector,{fromVars})
`gfromTo`	gsap.fromTo(selector, {fromVars}, {toVars});
`gset`	gsap.set(selector, {toVars});
`gtl`	Create gsap timeline
`gtt`	Add new tween to timeline

Defaults and Register Effects

Snippet	Purpose
`gdefault`	gsap.defaults({})
`greff`	Register costume effect snippet
`guce`	Use custom effect
`gucetl`	Use costume effect in a timeline

ScrollTrigger

Snippet	Purpose
`gstt`	Create a timeline with a scrollTrigger
`gsttcb`	Create a timeline with a scrollTrigger with callback functions
`gstc`	Create Standalone ScrollTrigger
`gstccb`	Create Standalone ScrollTrigger with callbacks

Draggable

Snippet	Purpose
`gcd`	Create gsap draggable with callbacks

Flip

Snippet	Purpose
`ggs`	const state = Flip.getState(selector);
`gff`	Flip.from
`gffcb`	Flip.from with callbacks

Utility methods

Snippet	Purpose
`gprefix`	gsap.utils.checkPrefix()
`gclamp`	gsap.utils.clamp()
`gdistribute`	gsap.utils.distribute()
`ginterpolate`	gsap.utils.interpolate()
`gclamp`	gsap.utils.clamp()
`gmapRange`	gsap.utils.interpolate()
`gnormalize`	gsap.utils.normalize()
`gpipe`	gsap.utils.pipe()
`grandomnum`	gsap.utils.random()
`grandomarray`	gsap.utils.random([])
`gselector`	gsap.utils.selector()
`gshuffle`	gsap.utils.shuffle()
`gsplitColor`	gsap.utils.splitColor()
`gtoArray`	gsap.utils.toArray()
`gunitize`	gsap.utils.unitize()
`gwrap`	gsap.utils.gwrap()
`gwrapYoyo`	gsap.utils.wrapYoyo()

Beyond the basic

Snippet	Purpose
`gcctx`	create gsap context
`gcctxadd`	create gsap context and add function
`gaddtctx`	add to context
`gcm`	create gsap media
`gmaad`	add media

Imports and Register

(ES Modules)

Snippet	Purpose
`gimp`	import gsap (ES Modules)
`gimpfull`	import gsap, plugin and register it (ES Modules)
`gimpp`	import plugin (ES Modules)
`gimppr`	import and register plugin (ES Modules)

(UMD/CommonJS)

Snippet	Purpose
`gimpdis`	import gsap from dis folder
`gimpfulldis`	import gsap, plugin and register it from dis folder
`gimppd`	import plugin from dis folder
`gimpprd`	import and register plugin from

Final thought

I really hope these snippets help you to get started with GSAP or even better speed up your workflow!

If you think this extension is missing a useful snippet feel free to reach me out on Twitter.

Happy tweening!

Python Django - The Practical Guide

Maxi Ruti Park — Sun, 17 Jul 2022 03:16:16 +0000

Python Django - The Practical Guide

Why did it take this course?

The main reason why I took this course is that we use Django for almost every project in the company I work for.

And to be honest, it took me some time to truly like python, not because it was difficult or anything like that, but because it did not attract me right away as javascript did, so in the beginning, I just learned the basics to get the work done and I move on.

And even though Django is easy to understand and it does not have a huge learning curve feeling 100% comfortable with it, it takes some good time of learning and practicing.

So, at some point, I felt like I knew my way around Django but at the same time, I felt I did not know anything about it.

Because I basically how knew how to do the things I need but I did not know or understand completely how things work.

It was like knowing it because I memorized how to do things, but not because I understood them. The worst part of this situation was the fact that it was hard to troubleshoot problems because I did not understand where those problems or bugs were coming from.

So, I realize that the best thing was to learn Django from zero and step by step.

Once again, I went to udemy, search for Django courses and I found a bunch of them, but I ended up taking the one from Maximilian Schwarzmüller called Python Django - The Practical Guide.

I knew Maximilian Schwarzmüller, from his youtube channel because he is a very well-known Udemy instructor with more than 30 courses and almost 2 million enrolled in at least one of his courses.

That is why I knew that eventually, I was going to take one of his courses. Currently, I had taken 4 of his courses and without a doubt, this is my favorite.

You can visit his udemy profile here, where you can read more about Maximilian, take a look at his courses, and find all the links for his social media accounts and website.

About the course

From lesson one, you understand why Maximilian has so many students, and all his courses have such good reviews.

The structures of the lessons and the course itself are very well planned. Every section starts with introductions and finishes with a summary, which makes it a great way to wrap up what you have been learning in that section and make it easy to reference it in the future if you need to revisit some topics.

This course does not assume you know about Django, because it starts from zero but you must have a good wrap of how python work.

The course has 255 lectures, it is almost 23 hours long and it is divided into 17 sections which are:

Getting Started
Course Setup
URLs & Views
Templates and Static Files
Course Project: Building a Blog - Basic
Data & Models
Admin
Course Project: Building a Blog - Data & Models
Forms
Class Views
File Uploads
Sessions
Course Project: Building a Blog - Forms, Files & Sessions
Deployment
Optional: Django Summary & Quick Introduction
Bonus

As you can see it covers everything you need to know to get started and more.

The Basics

The course started with the most basic Django concept, which are URL, Views, templates, and, static.

Maxmilian makes a nice effort so all this basics concepts are clearly understood because they are surely the fundamentals of this framework.

Going in deep

After this, you will start learning more specific Django features like Data & Models, Sessions, and class Views which are all the things that make Django what it is A full-stack framework.

The key features

Even though you can build a great application only by knowing the topics I just mentioned there are a few things that completed a website and those are, forms and file uploads.
Especially form, because most websites these days work with users' inputs, and Django makes it easy to get data from forms and store it on a database to later use it on the frontend if needed.

The project

After the first few sections, we start working on what is going to be the main project of this course, a Django Blog.
When I started learning Django I did not like the fact that everyone is teaching how to create a blog, later I understood that a blog is a simple way to learn most of the things that Django has to offer and if you can create a Django blog then you will be able to build any other application you want.
So, during the entire course, you will be learning each important thing of Django and later applying that knowledge in the course project. Which I believe is always a great way to finish understanding and cementing all those new concepts.

What you will learn

This is what you will learn during the course:

Installing Django
Creating and understanding Django projects
Understanding URLs, views, requests, and responses
Working with templates and static files like CSS and images
Working with data and models
Connecting data with relationships (one-to-many, one-to-one, many-to-many)
Querying data with Django's powerful model solution
Adding administration panels to your projects
Handling user input with forms - manually and with Django's built-in form support
Advanced features like class-based views (and when to use them)
Dealing with file uploads and how to serve uploaded files
Working with sessions
In-depth deployment instructions and examples
Different ways of deploying and serving static files and user uploads

Prerequisite

Basic Python and web development knowledge (HTML/ CSS) is required
NO prior Django experience is required at all

My thought about this course

A big yes, if you want to learn about Django. This course will teach you everything you need to know to create your first Django project and the most important bits about Django.

Because, before I took this course, I could build things with Django but I could not understand very well how most of the things worked, but at the end of the course all those doubts were no longer there.

It gave me a really clear idea of how Django works and what is the purpose of each part of this framework.

I still don't know how my things about Django, but now I know if I ever get stuck in a problem I can identify where it is failing and because of that it is easier to look for a solution.

Again, if you are looking to learn Django, this is the course you are looking for.

If you want to take a look at this course in Udemy, click the next link Python Django The Practical Guide

Thanks for reading the article!

I hope you enjoyed this review and if you happen to know another course about Django, please share it in the comments.

The Python Mega Course, Build 10 Real World Programs The Python Mega, Build 10 Real World Programs

Maxi Ruti Park — Sun, 19 Jun 2022 01:35:48 +0000

The Python Mega Course, Build 10 Real World Programs

The Python Mega, Build 10 Real World Programs

Why did it take this course?

I always thought my first backend language was going to be Node.js but soon after I got my first job I realize it was going to be python, basically because that is what we use at work.

Python is very easy to read but you need to get your head around and understand how it works to be productive with it.
So, that is why I decide you take this really good course, calls "The Python Mega Course 2022: Build 10 Real-World Programs".

About the course

The Python Mega Course 2022: Build 10 Real-World Programs, is a beginner course but at the same time a course that anyone can take, regardless you are already proficient on python, because the projects are so good and you will for sure learn things did not know or get some nice tips.

Ardit Sulce is the creator of this course and he is a python programmer, teacher, and founder of PythonHow. Ardit has 6 courses in Udemy all about python with more than 370.000 students.

The course is dived into 39 sections, it was 340 lectures and a duration of 33 hours.

The Python Mega Cours start from the basics, so you can learn python from zero, after that the projects section start where you will continue learning python with 10 Real-World Programs.
The course is so great on many levels but one of the things that make it complete is that it was everything you expect from a good course, which are tutorials, projects, exercises, and a great A&Q section.

What you will learn

This is what you will learn during the course:

Become a Python programmer by learning to build real-world apps in Python 3
Build desktop database apps, webcam motion detectors, data visualization dashboards, blog websites, web scrapers, and more.
Practice the skills with hundreds of interactive Python exercises and projects.
Build a personal website entirely in Python
Build a mobile app that improves your mood with positive quotes.
Create a web app that processes Excel and CSV files
Build a book inventory GUI app with an SQL database backend
Create a webcam app that records video and detects moving objects.
Create a web scraper that extracts real-estate data.
Create a modern data visualization app
Build an app that sends automated emails.
Interact with our Python online community and get help when you need it.

Prerequisite

A computer (Windows, Mac, or Linux).
No prior knowledge of Python is required.
No previous programming experience is needed.

My thought about this course

This course was a great decision for learning python, the course covers so many different projects and real examples you can implement. To me, this course is always going to be a reference to take a look at when I don't know or remember something because the explanations are so clear.
What I had built after this course

We use python a lot at work and I had also built some things to practice what I have been learning. Most of it, using Django, which I also learn deeply with one of the Udemy courses of Maximilian Schwarzmüller which I will be talking about in the future.

Thank you for reading up to here.

I hope you enjoyed!

Sass Tutorial for Beginners CSS With Superpowers

Maxi Ruti Park — Sun, 05 Jun 2022 09:24:52 +0000

Sass Tutorial for Beginners CSS With Superpowers

Why did it take this tutorial?

I watched this tutorial at the same time I was taking a Udemy course by Jonas Schmedtmann called "Advanced CSS and Sass: Flexbox, Grid, Animations and More!".

I like to see how other developers do and teach about the same topics because, as you know, when it comes to web development there is rarely only one way of doing things.

I found this course on the freeCodeCamp.org youtube channel and It is given by Jesse Hall who is a Senior Developer Advocate and has a great youtube channel called codeSTACKr.

This course is just 2 hours long but it has everything you need to know to get started with SASS.

Even if 2 hours seems too short, SASS is in my opinion very easy to learn, especially if you have a good understanding of CSS you can pick up all the important things in a few hours and start improving from there while you build something cool.

About the course

This tutorial is divided into two big sections, the first one where you learn about SASS and all the important bits, and the second one where you have the chance to code a Portfolio website with everything you had learned.

What you will learn

SASS
Prerequisite
HTML
CSS

My thought about this course

Awesome course to get started with SASS, Jesse Hall is a great teacher, and the way he delivers his content is great.

I believe SASS should be something every developer should know, it is very simple to learn and it can improve your code tremendously by making it more organized, avoiding code repetition, and especially preventing you to worry about name collisions.

Thank you for reading up to here.

I hope you enjoyed!

Serverless Functions with Netlify

Maxi Ruti Park — Sun, 05 Jun 2022 09:18:48 +0000

Serverless Functions with Netlify

Why did it take this course?

I really like to build projects and practices what I have been learning but also every time I am working on a new project I end up adding features that I don’t know how to implement first and that gives me the challenge to learn something new.

Normally all of my projects consume data from APIs, and since at some point it got difficult to find APIs providing exactly what I wanted, I thought it could be great if I can create my own.

After some time researching the best and simple way of creating an API I came across serverless functions and how useful they are.

I knew John had a course about serverless function using Netlify which I knew at some point I was going to take, but honestly, at that time I did even know what serverless functions were.

The course is simple and easy to learn, so it makes it a top 10 course and a knowledge every developer should have.

The best thing is that learning about serverless functions gives you a lot more options and tools as a developer than just building your API that is not a small thing either.

About the course

The course is almost 8 hours long where you have the chance to use serverless functions in so many different ways.

In this course more than in anyone I had taken you to learn by doing, projects are short but go directly to the point and without even knowing you learn more things than you thought you needed.

And the end of this course, you will feel like a better and more prepared web developer.

What you will learn

Serverless functions with Netlify

Prerequisite

HTML
CSS
Javascript
node installed

Course content and Course Projects

This course is divided into 5 sections with a total of 71 lessons and duration of almost 8 hours.

Projects:

Basic “Hello World”
Basic API (with local data)
Complex API (with Airtable)
Survey
Open Weather API
Newsletter
Send Email / Submit Form
Stripe Payment

To see all the course projects, click here.

My thought about this course

Definitely, for me, this course was a game-changer, after this course, my project became something else.

I also have the chance to start learning about HTTP methods which later lead me to put my first foot on the backend world.

You can read more about the course clicking here.

Thank you for reading up to here.

I hope you enjoyed!

50 Projects In 50 Days — HTML, CSS & JavaScript

Maxi Ruti Park — Sun, 05 Jun 2022 09:12:00 +0000

50 Projects In 50 Days — HTML, CSS & JavaScript

Why did it take this course?

I decided to take this course, right after I finish my first Javascript course. At that time I felt that even though I knew some Javascript I did not know how to start applying them in my projects.

I wanted to see how javascript was being used in different projects and situations and also to get some inspiration and ideas.

So the title of this course was the first thing that took my attention because it sounds exactly what I was looking for.

About the course

Sharpen your skills by building 50 quick, unique & fun mini projects, is the description of this course, created by Brad Traversy and Florin Pop.

The idea of this course is simple but really nice, 50 projects that you can do in 50 days. Most of the projects are shorts less than 15 min and some of them are longer than 30 min.

More than 30,000 people had taken this course and it was 4.6 points over more than 5000 reviews. So I thought it was going to be a really nice course to take.

But it turned out to be the worst course I have taken in Udemy and I will tell you why in the end.

What you will learn

According to the teachers, this is what you will learn

Project-based teaching to sharpen your HTML, CSS & JavaScript skills.
Perfect for beginners looking for things to build unique projects in a short timeframe.
Modern styling with flexbox, CSS animations, custom properties, etc.
DOM manipulation, events, array methods, HTTP requests & more.

Prerequisite

A very basic understanding of HTML, CSS & JavaScript.

Course content and Course Projects

This course is divided into 51 sections with a total of 164 lessons and a total duration of more than 18 hours.

The followings are the 50 projects:

Expanding Cards
Progress Steps
Rotating Navigation Animation
Hidden Search Widget
Blurry Loading
Scroll Animation
Split Landing Page
Form Wave
Sound Board
Dad Jokes
Event Keycodes
Faq Collapse
Random Choice Picker
Animated Navigation
Incrementing Counter
Drink Water
Movie App
Background Slider
Theme Clock
Button Ripple Effect
Drag N Drop
Drawing App
Kinetic Loader
Content Placeholder
Sticky Navbar
Double Vertical Slider
Toast Notification
Github Profiles
Double Click Heart
Auto Text Effect
Password Generator
Good Cheap Fast
Notes App
Animated Countdown
Image Carousel
Hoverboard
Pokedex
Mobile Tab Navigation
Password Strength Background
3d Background Boxes
Verify Account UI
Live User Filter
Feedback UI Design
Custom Range Slider
Netflix Mobile Navigation
Quiz App
Testimonial Box Switcher
Random Image Feed
Todo List
Insect Catch Game

If you want to know more about this course you can click “here”, to see the course page in Udemy.

My thought about this course

Basically, I did not like it. Almost from the beginning.

The projects are really awesome which I believe they are created by Florin. All projects are fun, simple but really useful.

The thing I really did not like was about the person teaching the course, Brad Traversy. I did not have any expectation to learn javascript in this course, I just wanted to see how it was used, where, and how in other projects and situations.

But even though I had low expectations, what I did not like was the way he explains everything, it was so fast and with no intention of people to learn or understand what he was doing. I feel all the time he was in a hurry to finish the current lesson to move to the next one and then finish the entire course as soon as he can.

So basically you are just watching a guy, writing a code that probably he has in front of him already and redacting very fast what he is doing. The worst part is what sometimes he just copy and paste a chunk of code and did not explain much about it. How hard could it be to write those lines of code instead of telling us that we can also copy them from some particular website?

I understand that happens all the time when you are coding, but if you are taking a course, it should be different, you shouldn’t have to open another tab to go and search that page or pause the video and copy all those lines. I thought that was too much.

So I did not finish the course, I tried but it was so demotivating. I think I completed more than 30 projects.

I have used some of the things I learned in this course in my own projects but overall, I think the course was a waste of time and I would not recommend it.

Thank you for reading up to here.

I hope you enjoyed!

Build Web Apps with Vue JS 3 & Firebase

Maxi Ruti Park — Sun, 05 Jun 2022 09:05:33 +0000

Why did it take this course?

Basically, because I needed to learn Vue for my job, two weeks after I started learning React.js I got my first job interview that lead to my first job as a Web Developer.

At that time I just knew HTML&CSS and JavaScript, but the company I work for used Vue.js for most of their projects.
I never thought learning Vue, could be so easy. It is so simple to understand, so organized and the documentation is awesome.

On top of that, I took this course from Shaun and it has everything you need to know to become and Vue Ninja.

I did know about Shaun before I took this course, but after that, I became a huge fan of his courses in Udemy and also of all the content on his youtube channel The Ninja Net.

About the course

With 4.8 out of 5 stars over more than 5,500 ratings, this is one most popular and well-rated Vue courses in Udemy.
The course is 31 hours long, but the last 13 hours of the course are archived Lessons.

Vue is easy to learn but Shaun makes it even easier, every lesson is clear and well organized, every subject is explained in an effective but simple way with great examples and use cases.

Since it's a beginner's course, the first section covers the very basics of the framework to be able to start building your first application. After that, the course covers the most important concept of the framework like data binding, routing, and of course the Composition API.

Throughout every section, you have the chance to use that knowledge in different projects.

But this course is not just about Vue, it is also about Firebase, so if you take this course you will be able to start creating full-stack applications using Vue and Firebase 9.

What you will learn

Vue 3
Create a full frontend application using Vue.
Firebase (database, authentication, service, and hosting)

Prerequisite

HTML
CSS
Javascript, preferably with ES6 knowledge

Course content and Course Projects

This course is divided into 28 sections with a total of 314 lessons and a duration of almost 32 hours.

Projects:

Reaction timer
Project Planner
Blog project
Live Chat Room
Muso Ninjas

In the archive section, you can also find more projects.

My thought about this course

I could not be happier with this course, from day one I started learning a lot.

Taking this course was definitely a great decision, the course is so well organized that it makes it so easy to re-watch some of the lessons when I forget how to do something.
If you want to learn Vue, this course is the way to go. Take a look here

Besides this course, Shawn has some amazing tutorials about Vue in his youtube challenge for example about Vuex, Vue animations, Vue with typescript, and more.

What I had built after this course

These are some of the websites I build during and after this course.

My Portfolio website
And I had used Vue since then in my current job.

Thank you for reading up to here.

I hope you enjoyed!

Advanced CSS and Sass

Maxi Ruti Park — Sun, 17 Apr 2022 10:07:28 +0000

Advanced CSS and Sass course review (Jonas Schmedtmann)

Why did it take this course?

I decided to take this course because I wanted to take my CSS game to the next level. I didn’t know that sass can be so simple to learn and yet so powerful and useful.

Before learning SASS, I had some trouble keeping my CSS file organize, first of all, because I did not have much experience and second of all because my projects were getting bigger and bigger. So my CSS file was growing more and more.

I thought SASS could be a nice solution for this problem plus I wanted to know what more I can do with it. And finally, I believed that learning SASS was a nice skill to add to my resume.

About the course

There are not really many courses about SASS in Udemy, to be honest, so I did know have to search all that much. But still, I am glad I took this nice course. The creator of course Jonas Schmedtmann, has 5 courses in Udemy and most of them focus on front-end design.

He presents this course as “The most advanced and modern CSS course on the internet: master flexbox, CSS Grid, responsive design, and so much more”.

The course is very popular in Udemy and with a very high and well-deserved ranking of 4.8 stars out of 5. In total, more than 142,000 students had enrolled this course, which is very impressive.

What you will learn

This is what Jonas tells us we are going to learn during the course.

Tons of modern CSS techniques to create stunning designs and effects.
Advanced CSS animations with @keyframes, animation, and transition.
How CSS works behind the scenes: the cascade, specificity, inheritance, etc.
CSS architecture: component-based design, BEM, writing reusable code, etc.
Flexbox layouts: build a huge real-world project with flexbox.
CSS Grid layouts: build a huge real-world project with CSS Grid.
Using Sass in real-world projects: global variables, architecting CSS, managing media queries, etc.
Advanced responsive design: media queries, mobile-first vs desktop-first, em vs rem units, etc.
Responsive images in HTML and CSS for faster page loads SVG images and videos in HTML and CSS: build a background video effect.
The NPM ecosystem: development workflows and building processes.

Prerequisite

A very basic understanding of HTML, CSS.

Course content and Course Projects

This course is divided into 10 sections with a total of 126 lessons and a duration of 28 hours.

During the first sections of the course, we take a look at how CSS work, what are the best practices and how to be organized. After that, we learn the fundamentals of SASS and start implementing them in the course projects.

This course has three very nice projects, using different design techniques and layouts.

The first project is called Natours and it is a website from a travel agency, the second one is called Trillo which is a website for hotel reservations using flexbox and the last project is about a real states company and this website mostly uses CSS Grid.

Even though the first project did know use flexbox or CSS Grid it was by far my favorites because I could see how SASS and folder structure work and also because this project has some very nice CSS styles tips.

My thoughts about this course

I really liked it, I am so glad I took this course, the teacher is so friendly and explains everything in great detail. Also, he gives some very nice tips and advice that mean a lot for someone who is just starting.

Overall SASS is something very easy to learn, you can basically learn the basics in one day and then practice building something and learn from that as well.

I have found some nice SASS courses on youtube as well that I will be recommending.

Javascript Tutorial and Projects Course (John Smilga)

Maxi Ruti Park — Sun, 17 Apr 2022 10:00:49 +0000

Javascript Tutorial and Projects Course (John Smilga)

Why did it take this course?

As you may know by now, the fundamentals knowledge of web developers are HTML & CSS and Javascript, so after I finished this, HTML & CSS course, I knew the best next thing was to start my javascript adventure.

Choosing the course was the simplest thing, I already knew I wanted to take John Smilga Javascript Course, which you can check by clicking clicking here.

I knew javascript was not going to be easy to understand at first, but I did not know I was going to like that much so quickly and that I was going to start understanding it sooner than I thought.

Of course, there are many things I don’t know about Javascript, and it will take years to be an expert on it, but I really like it so far.

About the course

As usual, John delivers the best content you can look for, the course is perfect from the beginning to the end. The course covers everything thing you need to know about this language, from the most basic things to the lasted ES6 featured and more.

After you finish this course, you will definitely start feeling like a web developer.

What you will learn

This is what John tells us we are going to learn during the course.

Know what is Javascript
Know how to add Javascript to their projects
Know the basics of working with Javascript
Build projects using Javascript

Prerequisite

Basic knowledge of HTML and CSS.

Course content and Course Projects

This course is divided into 18 sections with a total of 357 lessons and a total duration of 40 hours.

Since it is a beginner’s course, during the first sections we learn the basics and most important thing about Javascript and manipulating the DOM after that, there is an entire section with more than fifteen projects where you get to put into practices everything you had learned.

After this first part, we start learning about ES6, Modules, AJAX and so more and again we get to use all this knowledge in some different projects.

In the last section of the course, we build an online store called “Comfy Store”.

To see all the course projects, click here.

My thought about this course

All John courses are great, I al will eventually take all of them. The way the course and the lessons are structured, the projects, and the explanations are perfect.

Here is really a great teacher and as I said before, I keep recommending his channel and courses to anyone how is interested in learning about web development.

I will always remember this course as the cornerstone of my web developer career.

HTML & CSS course (John Smilga)

Maxi Ruti Park — Sun, 17 Apr 2022 09:39:47 +0000

Why did it take this course?

This was the first Udemy course I ever took and it was also the first course I took when I decided to pursue a career as a web developer. I will always be thankful to John for this course as much as all the other courses and content from his youtube channel.

I found out about John and his courses throughout YOUTUBE, when I started I went to youtube and search for HTML & CSS courses and I found one on freeCodeCamp channel, it was John's course, and in this course, he covers all the basics and more about HTML and CSS. This course is 11 hours long and you can watch it clicking here

After I watched this course, I went to his website www.johnsmilga.com and learned that we have longer versions of his courses in Udemy.

That is why I decided to take this course and many others he was in Udemy, and that has been the best decision I have taken since I started this journey.

About the course

In this course, you will learn everything you need to know about HTML and CSS. And like in all John's courses, he does not take any topic for granted and explain everything so well and clear.

To me, the most amazing thing is that every single thing we learn we end up using later in at least one of the projects during the course.

I have recommended this course to everyone how wants to learn HTML & CSS, because I believe there is no better place to start, than here.

What you will learn

This is what John tells us we are going to learn during the course.

Learn HTML5 from scratch.
Learn CSS3 from scratch.
Create responsive real-world projects from scratch.
Learn CSS Grid and Flexbox Layout Modules.
Learn where to get free images, custom fonts.
Learn how to work with font-awesome icons
Learn where to get custom color palettes.

Prerequisite

No programming/coding experience as we will start from absolute scratch.

Course content and Course Projects

This course is divided into 24 sections with a total of 385 lessons and a duration of 36 hours.

As I said before, this course has everything you need to know, from the most basic to most useful tips.

HTML

It starts with an introduction to HTML, where we learn about HTML structure, semantics, and tags. After that, we built our simple but amazing first website,"Coffee Project".

CSS

After that, we start learning about CSS and again every topic is explained so clearly and in a very dynamic way. In this part of the course you will learn about color, units, typography, Box Model, images, positions, transforms, transition, animations, and more. To end up this part of the course we build our first big nice project, "Tea Project Station".

FLEX BOX

Once you have learned all this, the next step is to learn about flexbox, which at the beginning is a little bit confusing to understand, especially with the align-items and justify-content. But it gets easier as we go forward. At the end of this section, we built the "Backroads Tour Company".

CSS GRID

Learning about CSS Grid was my favorite part, it helps me a lot to create a entire website layout or the specific efficient part of it.

This part of the course is full of projects, first of all after learning about the CSS grid we get the changes to build a bunch of mini projects and after that, we build the biggest project of the course, a "Portfolio Website"

To see all the course projects, click here.

My thought about this course

All John courses are great, I will eventually take all of them. The way the course and the lessons are structured, the projects, and the explanations are perfect.

Here is really a great teacher and as I said before, I keep recommending his channel and courses to anyone how is interested in learning about web development.

I will always remember this course as the cornerstone of my web developer career.

What I had built after this course

These are some of the websites I build during and after this course.