Insha Profile picture
Web development is fun and I'm sharing insights to help you improve as a developer 🚀🏆| Blog - https://t.co/pbITxTCm8H 📖
Krzysztof 'GrandpaAquaman' Studnik Profile picture SᒪᗩKO™🇬🇭 Profile picture Kamrul Hasan Raza👑🚀 Profile picture Arbaaz Profile picture 4 added to My Authors
22 Jul
What are CSS Combinators?

Come let's discuss them one by one.

A Thread 👇
A combinator is something that defines the relation between selectors.

There can be more than one simple selector in a CSS selector, and between these selectors, we can include a combinator.
Types of Combinators:

1️⃣ Descendant selector
2️⃣ Child selector
3️⃣ Adjacent sibling selector
4️⃣ General sibling selector
Read 8 tweets
19 Jul
7 Tools for structuring and optimizing your CSS.

CSS files formatting and optimization is no more a headache for web developers with the help of these hand-picked tools!

A Thread 👇
1️⃣ CSS Optimizer

CSS Optimizer is an online tool to clean, optimize, and compress CSS code.

📎cssportal.com/css-optimize/
2️⃣ CSS Beautifier

Code Beautifier is based on CSS Tidy, the popular open-source CSS parser and optimizer. Enter your messy, minified, or obfuscated CSS Style Sheets into the field above to have them cleaned up and made pretty.

📎cleancss.com/css-beautify/
Read 9 tweets
15 Jul
Do you know what's the best way to learn any programming language?

- The Answer is by building lots of projects 💪

Here's a complete list of projects ranging from -> ( Beginner to advanced level ) for you.

A Thread👇
Html and CSS projects. 💪

1- A Tribute Page
2- Survey Form
3- Technical Documentation Page
4- Personal Portfolio
5- Product Landing Page

✅ When I was learning HTML and CSS I've tried all of them. You can check the code here👇

📎codepen.io/collection/oEE…
✅ Responsive Website using HTML and CSS

📎

✅Build a Responsive Grid CSS Website Layout From Scratch

📎

✅Basic Parallax Website With HTML & CSS

📎
Read 9 tweets
12 Jul
Mastering SEO optimization can be hard, especially if you’re just starting out.

Here's a compiled list of 7 Free SEO Tools for you.

A Thread👇
SEO tools investigate the potential of Web pages for high placement on search engine ranking pages.
They provide information on backlinks and keywords as well as insights into SEO competition on the Internet.
1️⃣ Google Search Console

Search Console tools and reports help you measure your site's Search traffic and performance, fix issues, and make your site shine in Google Search results

📎search.google.com/search-console…
Read 10 tweets
8 Jul
Resources to excel in your Tech interview.

A Thread 👇
1️⃣ Tech Interview Handbook

This repository has practical content that covers all phases of a technical interview, from applying for a job to passing the interviews to offer negotiation. 📎github.com/yangshun/tech-…
2️⃣ JavaScript Algorithms

This repository contains JavaScript-based examples of many popular algorithms and data structures. Algorithms and data structures implemented in JavaScript with explanations and links to further readings. 📎github.com/trekhleb/javas…
Read 11 tweets
6 Jul
9 Awesome CSS layout generators for beginners.
(Grid and Flexbox)

A Thread 👇
Grid-Based Layout Generator

1️⃣ Layoutit

LayoutIt is an interface builder for CSS Grid and Bootstrap. You can quickly design web layouts, and get HTML and CSS code. 📎layoutit.com
2️⃣ Griddy

Griddy is actually a free learning tool made for frontend developers who wanna understand more about CSS grids.

With this web app, you can add new items into the grid, remove other items, and resize them to fit any layout you want. 📎griddy.io
Read 11 tweets
3 Jul
7 meta tags to improve the optimization of your site.

A Thread 👇
Why Meta tags are important?

-Meta tags are invisible tags that provide data about your page to search engines and website visitors.
-They can be optimized to highlight the most important elements of your content and make your website stand out in search results.
1️⃣ Title tag

Title tags are used by search engines to determine the subject of a page and are one of the first things that users notice in the SERPs.

Try to keep your title tag clear, descriptive, and usually not more than 55 characters.
Read 10 tweets
30 Jun
8 Essential Chrome extension for Web Developers.

A Thread 👇
1️⃣ Fake Filler

A form filler that fills all inputs on a page with fake/dummy data. This productivity-boosting extension is a must for developers and testers who work with forms.
📎chrome.google.com/webstore/detai…
2️⃣ Window Resizer

This extension re-sizes the browser's window to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions.
📎chrome.google.com/webstore/detai…
Read 10 tweets
29 Jun
YouTube Channels to master Data Structures and Algorithms.

A Thread 👇
1- DS & ALGO -: Jenny's Lectures 📎 Image
2-Algorithms and Data Structures -: Freecodecamp 📎 Image
Read 8 tweets
28 Jun
7 Awesome GitHub Repositories based on CSS.

A Thread 👇
1️⃣ animate.css

This repository is a cross-browser library of CSS animations. As easy to use as an easy thing.

📎github.com/animate-css/an… Image
2️⃣ normalize.css

This repository is a modern alternative to CSS resets. Normalizes styles for a wide range of elements.

📎github.com/necolas/normal… Image
Read 9 tweets
24 Jun
Learn JavaScript by playing games.

A Thread 👇
1️⃣ CodinGame

CodinGame offers up fun free games to help learn more than 25 programming languages, including JavaScript, Ruby, and PHP.

📎 codingame.com/start
2️⃣ CodeCombat

CodeCombat is aimed at helping students embrace learning as they play and write code from the very start of their adventure. 📎codecombat.com
Read 9 tweets
23 Jun
Top 6 React Component Libraries.

A Thread 👇
1️⃣ Ant Design

An enterprise-class UI design language and React UI library with a set of high-​quality React components.

It provides over 50 customizable components that can be used to craft beautiful applications.

📎ant.design
2️⃣ Material UI

Material UI is a set of components built based on the material design guidelines of Google.
Material UI consists of many accessible and configurable UI widgets.

📎 material-ui.com
Read 8 tweets
22 Jun
7 Resources to host your Website for free.

A Thread 👇
1️⃣ Netlify

Netlify is an intuitive Git-based workflow and powerful serverless platform to build, deploy, and collaborate on web apps. Considered as one of the easiest way to host your website.
2️⃣ GitHub

GitHub, Inc. is a provider of Internet hosting for software development and version control using Git. It is a platform where over 65 million developers shape the future of software, together​.
Read 9 tweets
21 Jun
Tips and Tricks to Use Google like a pro.

A Thread 👇
1️⃣ Use quotation marks to search for an exact phrase.
2️⃣ The site: allows you to perform a search for a particular website or content.
Read 8 tweets
20 Jun
7 Awesome GitHub Repositories for JavaScript developers.

A Thread 👇
1️⃣ JavaScript30

This repository is a collection of 30 awesome JavaScript vanilla projects created by Wes Bos. Build 30 things in 30 days and enhance your JavaScript skills.
2️⃣ wtfjs

A list of funny and tricky JavaScript examples. If you are a beginner, you can use these notes to get a deeper dive into JavaScript.
Read 9 tweets
16 Jun
7 Free resources for free 3D Icons.

A Thread 👇
1️⃣ Humans

3d Illustrations and freebies ready to boost your projects to the next level. Change colors in one click right in Figma!

📎wannathis.one/humans
2️⃣ 10 Clouds

High-detailed illustration set for personal and commercial projects.

📎 10clouds.com/valentine-illu…
Read 9 tweets
14 Jun
Some CSS Properties you may not be using.

A Thread 👇
1️⃣ Caret color

The caret-color property specifies the color of the cursor (​caret) in inputs, textareas, or any element that is editable.
2️⃣ Backface visibility

This property defines whether or not the back face of an element should be visible when facing the user.
Read 7 tweets
14 Jun
7 Awesome Design Tools for Web Designers/ Developers.

A Thread 👇
1⃣ Da Button Factory

A simple button design tool that helps you create high-converting call-to-action (CTA) buttons for your website, blog post, social media post, or email.

🔗clickminded.com/button-generat…
2⃣ Neumorphism

CSS code generator that will help with colors, gradients and shadows to adapt this new design trend. Generate soft- UI CSS code using this tool.

🔗neumorphism.io
Read 9 tweets
10 Jun
4 Amazing Websites for Background Pattern.

A Thread👇
1⃣ The Pattern Library

The Pattern Library is a project by Tim Holman & Claudio Guglieri. The library is made up of tiles upon tiles of patterns which are free for you to use.

🔗 thepatternlibrary.com
2⃣ Hero Patterns

A collection of repeatable SVG background patterns for you to use on your web projects.

🔗heropatterns.com
Read 6 tweets
9 Jun
CSS Tips you may not know.

A Thread 👇
1⃣ Smooth Scrolling

The scroll-behavior property will make the scrolling experience smooth and a lot better for the user.

Add this property in your code and see the difference.
2⃣ Center Anything

To center anything horizontally and vertically inside a container element, you just need these three lines of code and it will make the desired element centered.
Read 6 tweets
8 Jun
6 Best Github Repos for Web Developers.

A Thread 👇
1⃣ You-Dont-Know-JS

This is a series of books diving deep into the core mechanisms of the JavaScript language.

🔗github.com/getify/You-Don… Image
2⃣ html-5-boilerplate

HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.

🔗github.com/h5bp/html5-boi… Image
Read 8 tweets