DEV Community: Ibrahim Shahid Memon

CSS is not a skill to learn! and Syntax is not designing

Ibrahim Shahid Memon — Tue, 12 Nov 2019 13:23:09 +0000

CSS is not a thing to learn, it's the collection of some concepts you have to consider as a guide and follow blindly.

Why So Many People used to say, CSS is hard?
Because they are considering it as a language, not concepts. For some people, it's like a path to cross between HTML and JS. They are not at all interested in Design because they think that they don't have to handle complex CSS in Javascript. So Listen,
if you're not interested in CSS then don't list it in your skillset and portfolio. The Mastery of CSS is a huge thing and some of the beginners are listing that their CSS skills are 90% to 100% but they are talking about the Syntax, not CSS.

Another side is when a newbie of CSS, tries to design Websites but the mind is not generating the design and Inspiration(Oh My God!). it's good but limited. CSS for those people who want to create designs to inspire other people. All the syntax and Framework Guide in front of them. But they are still following the nav => header => sections => aside => footer traditional designs.

maybe they just learned how to put a border, but they didn't learn where to put it? so it comes with lots of websites surfing and observing the behavior. The syntax is not everything. if you are only the master of syntax, please don't list CSS in your skillset. it hurts All of us(Ui Designer).

If you are a programmer, then focus on programming, just learn syntax. but don't say that you can design websites.

Make Your Websites 10x faster with Modern Technologies - SSGs and Many More

Ibrahim Shahid Memon — Tue, 22 Oct 2019 15:27:08 +0000

Static site are much cheaper and faster option than any other dynamically available websites or wordpress. What is static site? Static site means making website with static site generator. This are many static site generator to this work. 1000s of static site generator are available but not every static site generator is perfect.

I got an order one project with any to make a blog but it needs to be static. I chooses Hugo for making this project. I was learning Hugo. After learning I started working an a project. I was not understanding _index.md file logic. I cannot learn gatsby or gridsome because I don't know any JS framework yet. I tried more

I was confused and there docs were crap.
There are some of the SSGs I tried:
-Jekyll (Github)-
-Nikola (python)-
-Jigsaw (Php)-

Then I get used to 11ty it is such as beautifull static site generator and I am much comfortable with JS. So I deliver to my customer a static site running 11ty on it.

Bootstrap vs Bulma - The Framework War

Ibrahim Shahid Memon — Sat, 19 Oct 2019 12:47:30 +0000

In the past, everyone was using css framework.Mycode is readable and clean.I usually use a lot of comment in my code and easy to remember classes.

I got one one month of internship in front-end .uk design company,the company used bootstrapas their main driver.Bootstrap is a bad classes.It was really difficult to learn.I was really confused by using bootstrap.I was merging the html and css together.It applys styling as default.I have completed the internship one month with bootstrap.I can never going to use bootstrap again.

Bootstrap is a bad framework for me.Some of this I didn,t like in bootstrap

Bad classes
Difficult to learn - Disorganized structure
CSS + JS JQUERY - Default styling - Large file size

I am never going to learning any case framework because of my bad experienced with bootstrap.
My ui designer friend advices me to discover some other options available

BULMA
SKELETONCSS
MILLIGRAM
TAILWIND CSS

milligram

Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code

tailwindCSS

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

skeleton

You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started..

I was shocked by bulma. I was learning every framework but bulma is a very easy frame work for me and I leaned bulma for twenty minutes.
Bulma file size is 2kb compare to it bootstrap the large file size. Bulma make your webpage your own design. bulma contain very easy classes compare bootstrap your webpage automatic styled. Bootstrap applys styling to HTML elements as default e.g your code is up and li bootstrap automatic styled up and li bulma is pure css
frame work and bootstrap is css JavaScript and jquery. If you wanna your webpage is quick load bulma is good. I am using bulma only for grid bulma is a responsive framework . I advice you to try bulma once a life time.

I am kind a active twitter :www.Twitter. com/the_Ibrahim_ github: www.github.com/theibrahim

Follow These Instructions and I guarantee you that You will get a high-paying job in 2019-20

Ibrahim Shahid Memon — Thu, 17 Oct 2019 11:09:56 +0000

online presence

If you are using http://Twitter.You are getting latest updates and in common life you cannot talk to big names of dev community but with Twitter you can easily connect to big names like Chris courier,Sara Souiden.Other than 75% of companies post jobs on Twitter.There is a very large community working an Twitter called #100daysofcode.This hashtag helps junior web developers to debug their code and share their journey.

Your portfolio is minimal and easy to use. A contact form on your portfolio is a must have,it is the most easy way to connect to developer. Place a headshot picture on the portfolio.Your portfolio at least three projects of your own(No template).If these things are available in your portfolio*then no one can stop you to get job*Try to contribute to open source project and maintain your Github profile. Your code must be clean and readable. Try to use comment most of time and descriptive commits. 60% of recruiters give job to people by seeing their code on Github.

Another.Tip:Use personal domains like .com or .dev don,t use long domains or sub-domain like http://blabla.netlify.com .

Blogging

You are using dev rightnow because dev is best posting or reading community. You can post article by this you can easily reach thousand of people. Start blogging right now. It can really get you a job.

You email must be simple. Never use any number in your email. Your email name will be professional if your portfolio domain is same as your email. If your name is it available you can simple adjectives like."Simple"or"Just"before your name.

This is my ordinary post if you want to read my other ordinary posts like this you can read then here:

My name is Ibrahim shahid memon. I am a front-end web developer.I am following all of this instructions personally

I am kind a active an Twitter:https://twitter.com/the_ibrahim_.

Avoid these mistakes and you will be sucessfull in your web development career

Ibrahim Shahid Memon — Tue, 15 Oct 2019 15:15:09 +0000

In the past I was learning web designing but I was not not practice enough.I was thinking that I don,t need practice.6 month ago I got a project but I was not comfort with debugging cause I don,t done practice but I learning again started w3schools and I started revicing HTML and CSS.After that I was getting better in coding and debugging.

Some of the mistakes that most begmears done

Learning CSS framework with out knowing the basic

Some people saves their time to learn CSS framework and start using framework but when a problem cause to then the stuck.They were exactly washy their time with framework,without learning the most basic things.As I say first learn basics and their choose any framework

Using facebook for online presence.

This is my mistake,that wasted my most time,I started to build online presence using (WTD),and all of people were like there "How to hack wifi"and "Make websites for free".I know it's good for marketing but not good for making your online presence.I was understanding Twitter but I realize that All of the web industry in an Twitter. So I started using Twitter: www.twitter.com/the_ibrahim_ .

CSS Positions - The Most Difficult Concepts Explained in a very SImple Way

Ibrahim Shahid Memon — Mon, 14 Oct 2019 13:48:23 +0000

CSS positions are the most difficult things to learn in CSS (in my opinion).I am going to teach your position today.There are total five CSS positions:

Relative
Absolute
fixed
Sticky

Fixed:

This CSS position you can apply every element.
This elements left its own flow.You can see this element on the page but this is while scrolling.The element wil scroll.

Absolute:

This CSS position fixed like left its own flow but it will be fixed in scrolling.This CSS position is you can apply the positive properties.top right bottom left.

Relative:

This CSS position you are apply every element.This element will not left its own flow.This element is you can apply the positive position. top right bottom left. e.g Trying applying the position on footer and also applys top:50 .you will see that your footer will be a little than its own flow nad is that is own place.

Sticky:

This CSS position is not supported by all the browsers yet.If you apply this position to any element.When the elements reaches the top of the window.It will stick as the name suggests"Sticky".

Difference between CSS positions.

Absolute

left its own flow
can apply the position properties
relative to the viewport

Relative

Dont,t left its own flow-
can apply the positions properties-
relative to its own flow

Fixed

-fixed on its defined space-
-left its own flow-

This css positions are much complex than this,there are more things remaining to learn like stacking order and z-index.I will definelly write on article about this very soon.I am kind a active twitter.

Learn Git and Github in just 1 article

Ibrahim Shahid Memon — Fri, 27 Sep 2019 09:06:19 +0000

Github is the best thing in over web development for me. There are so many other Git hosting available like BitBucket and Gitlab. Github saves your record.

Q what is the difference between git and GitHub?

Git

It is the vcs(version control system).
It records all your change as a image.
You can revert back if you want.

Github

It is the hosting service of git repository.
It is the online website to share your code with others.
You can contribute to other project.

Two people can connect and share their code with github.Github is giving webpage host and domain for free of cost.Github is a very easy to learn.You can just learn the basics of github by reading the next part of my article.You used command prompt before

Search github.com make you account to make new repository address like their git remote origin.It will connect your local repository to online repository.Git have many commands.But there are six basic commands.

git init
git help
git add .
git commit-m""
git push-u origin master
git pull

git init
It is the starting point of any git project.It will make a empty hidden . got folder in your local repository.

Q What is difference local and online repository?

Online repository lives on github but local repository is the image of your online reputation on your computer repository == folder.

git add .
You can selected all files to online repository. "." means to select all the files.

git commit-m""
You can add your message to this command.

git push-u origin master
Push your all files selected files to online reputation.

git pull
You can pull your online repository to update all the files in local repository to latest version.

git help
If you want to help git comment you can use git help command.

I am kind a active twitter github