DEV Community: ExWhyZee

15 Free React Templates for Your Next Project

ExWhyZee — Thu, 15 Apr 2021 05:06:39 +0000

React!

In less than a decade of existence, React has indeed grown in leaps and bounds. It has become the preferred choice of developers. Quite a level of achievement for a technology to achieve in such a short time.

Here's a list of free React templates you can use for your next project!

Here we go!

✨React Blur Admin

React Blur admin can be used to build admin dashboards on your React applications. This template has tables, forms, maps, charts, UI features, color schemes, pages, and more Download it here

✨NextJS Material Dashboard

NextJS Material Dashboard is a free Material-UI, NextJS, and React Admin with a fresh, new design inspired by Google's Material Design. It is fully coded, with plugins, elements, SASS files, and more. See it's Live Demo

✨WrapKit React Lite UI Kit

WrapKit React Lite is a free React website template that allows you to create stunning websites, landing pages, homepages, and more. It comes with ready-to-use UI Blocks & Elements to help level up the design and aesthetics of your project. See it's Live Demo

✨React JS Landing

React JS Landing is a one-page view landing template for startups, companies, and digital agencies. It has amazing icons, galleries, customized forms, and more. See it's Live Demo

✨Blueprint

Blueprint is a React-based UI toolkit for the web. It is optimized for building complex, data-dense web interfaces for desktop applications. See it's Live Demo

✨Light Bootstrap Dashboard

Light Bootstrap Dashboard React is an admin dashboard template designed to be beautiful and simple. It is built on top of Light Bootstrap Dashboard and React JS and it is completely responsive. It comes with a big collection of elements that will offer you multiple possibilities to create the app that best fits your needs. It can be used to create admin panels, project management systems, web applications backend, CMS or CRM. See it's Live Demo

✨Rebass

TRebass is a primitive UI component built with styled-system. It is known to be one of the best React component libs out there. It is responsive, supports styled-components, flexbox, and more. See it's Live Demo

✨React Reduction

React Reduction is a free and Open Source admin template built with React and Bootstrap 4. It comprises charts, widgets, pages, cards, components, typography, and more. See it's Live Demo

✨React Open

Open is a landing page template designed to showcase open source projects, SaaS products, online services, and more. It is very responsive, robust, and has interesting animations. See it's Live Demo

✨Shards Dashboard Lite

Shards Dashboard Lite is a free React admin dashboard template pack featuring a modern design system and many custom templates and components. It is fully responsive, performant, and follows all the best practices. See it's Live Demo

✨Argon Design System

Argon Design System is built with over 100+ individual components, giving you the freedom of choosing and combining. It comes with prebuilt examples which will help to ensure the development process is seamless. Interestingly, all components can take variations in color. See it's Live Demo

✨Datta Able

This is another amazing React dashboard template made using React, Redux, and Bootstrap 4. Here are some of its features: Code splitting, suspense, lazyload, different color styles, etc. See it's Live Demo

✨MatX

MatX is a full-featured React Material Design admin dashboard template built with React, Redux & Material UI.

It has various features needed to kickstart a new project; Material UI components, Form elements, JWT authentication, Sign-in pages, Code splitting, and more. See it's Live Demo

✨Notus React

Notus React is a free and Open Source template. It is an extension of TailwinCSS but does not change or add any CSS to the already one from Tailwind CSS.

It features multiple HTML elements, and it comes with dynamic components for ReactJS, Vue, and Angular. See it's Live Demo

✨Now UI Kit React

Now UI Kit React is a free Bootstrap 4, React, React Hooks, and Reactstrap UI Kit provided for free by Invision and Creative Tim.

Released about a year ago with over 11,756 downloads so far, the features of the Now UI Kit React are second to none. You should definitely check it out. See it's Live Demo

✨Core UI

Suggested by user Malek Tarboush from comments, Core UI's React admin dashboard is truly a steal.

React Resources

✨Ant Design

Suggested by user Jakub Michnowicz from comments, Ant Design is a React UI library that has a plethora of easy-to-use components that are useful for building elegant user interfaces. Created by Chinese conglomerate Alibaba, Ant Design is used by several big names: Alibaba (of course), Tencent, Baidu, and more.

✨Material UI

Suggested by user Fernanda Shinoda from comments, Material UI is a component library for React teeming with powerful components that you should be using in your projects. If you're just looking to create a good looking app, Material UI can provide you with solid pre-styled components that will get the job done.

🍁 That's it for now. Do you have any other resources related to ReactJS? Let me know in the comments!

PS: You might want to check out my other posts:

Best FREE Compilation of Graphic Design, WebDev, UI/UX Resources.

ExWhyZee ・ Oct 12 '20

#beginners #webdev #productivity #tutorial

10 Free and Open-sourced Tailwind CSS Templates

ExWhyZee ・ Mar 25 '21

#webdev #css #beginners #productivity

A Complete Beginners Guide to Git

ExWhyZee ・ Mar 23 '21

#beginners #tutorial #productivity #git

Adios!👋

Daily News Roundup: Steve Jobs' job application, Robot sells NFT, Realme caught using iPhone and more..

ExWhyZee — Fri, 26 Mar 2021 12:22:31 +0000

🌱 Here's some quick byte-sized news from the tech world.

🔰 Apple Co-founder Steve Jobs' job application sells for $16M

A single page job application written by Apple Co-founder Steve Jobs in 1973 has been sold for 1,62,000 GBP. The questionnaire is believed to have been written around the time Jobs dropped out of Reed College. In the application, Jobs mentioned English Literature as his major and "electronic tech or design engineer – digital" as his special abilities.

🔰 Google Search adds feature to solve math problems step-by-step

Google Search has added a new feature that'll help users solve math problems and provide a variety of explanations for how to solve them. To access the feature, users can either type equations in Search bar or take a picture of the math problem using Google Lens. Google will then display a step-by-step guide on how to solve the problem.

🔰 Snapchat testing feature to let users remix friends' Snaps

Snapchat is testing a feature that will let users remix their friends' Snaps. Initially, the feature will allow users to reply to a friend's story with a remixed Snap. The feature reportedly will allow users to record a Snap and tag friends they want to have permission to either remix or share their Snap.

🔰 Digital artwork by humanoid robot Sophia sells as NFT for $700K

A digital artwork made by humanoid robot Sophia was sold at auction for $700K in the form of a non-fungible token, or NFT. The artwork was produced by Sophia in collaboration with a 31-year-old Italian digital artist Andrea Bonaceto. The artwork, 'Sophia Instantiation', is a 12-second MP4 file showing the evolution of Bonaceto's portrait into Sophia's digital painting.

🔰 Realme caught using iPhone to demonstrate game streaming during their phone launch

Chinese smartphone company Realme was caught using an iPhone to demonstrate game streaming at the launch of the Realme Narzo 30A in Bangladesh. The gaffe was spotted when a feature that is exclusive to iPhones turned up on the streaming video. "We sincerely apologize for any unanticipated impacts the incident may have caused," Realme said.

🌱 That's all for now. What do you think of these, let me know in the comments!

ciao

10 Free and Open-sourced Tailwind CSS Templates

ExWhyZee — Thu, 25 Mar 2021 14:46:51 +0000

👋 Hello Dev fam!

I had a mini list of some free, open-sourced templates of Tailwind, so thought why not share with the community here, might come useful for someone. So here it is!

But first, those who don't know what Tailwind CSS is, it's a low-level CSS framework that lets you build completely custom user interfaces without having to override any predefined components or styles.

Some other CSS frameworks (e.g.: Bootstrap) come with predefined components such as cards, buttons and so on, which might be useful at first since they help you build sites quickly, but can cause a lot of pain when you are trying to customize your site.

Tailwind on the other hand provides you with low-level utility classes to use wherever you want, which gives you the freedom to build fully customized designs to your taste and specifications.

Here we go!

☄️Tailwind Starter Kit

This is a free and open-source template that features multiple HTML elements, and dynamic components for React, Vue, and Angular. To get it, simply go to the website and click on “Get Started” to see the documentation and download links. You can also check out its GitHub repo.

☄️Simple Light - Landing Page template

This free landing page template is built with TailwindCSS and React. It is designed to provide all the basic components a developer needs to create a landing page for SaaS products, online services, and more. To clone it and get started, check out its Github repo

☄️Gatsby-Emotion-Tailwind Starter Kit

This template is made with Gatsby.js, Emotion, and Tailwind CSS. It contains cool features such as lazy-loading images, code-splitting, and offline support. Check out its [Github repo](https://github.com/chrismwilliams/gatsby-emotion-tailwind-starter for more details.

☄️Admin dashboard template

This is a free and open-source Admin Dashboard Template built with Tailwind CSS and Alpine.js. You can check it out on its website , or go straight to its GitHub repo.

☄️ Tailwind Toolbox - Landing Page Template

This is a generic, open-source landing page template for Tailwind CSS created by Tailwind Toolbox.GitHub

☄️Landmark by DevDojo

This beautiful landing page template by DevDojo is built with only HTML and Tailwind CSS. Go to its website to see the template and copy its source-code, or check it out on GitHub.

☄️Cleopatra - Admin dashboard template

A clean and minimal Admin dashboard template created with Tailwind CSS. This template is carefully coded with clear comments to help you easily understand its source code, and quickly get started building nice dashboards. Check out its GitHub repo to clone and get started.

☄️V-Dashboard - Vue Admin Dashboard template

This dashboard starter template is built with Vite, Vue 3, Tailwind CSS and TypeScript. You can check it out on Github and clone it to get started.

☄️Ghostwind - Starter Blog Template

This is a simple blog template created with Tailwind CSS, based on a popular Ghost theme named Casper. Check out its Github repo for more details.

☄️SaaS Landing Page

Beautiful, designed landing page for your SaaS. It comes in a dark and light version. The landing page is made with Tailwind CSS and optimized for mobile, tablet and desktop use. Icons included in these designs are from the awesome heroicons library

🌱 That's it for now. Do you have any other resources related to Tailwind CSS? Let me know in the comments!

PS: You might want to check out my other posts:

A Complete Beginners Guide to Git

ExWhyZee ・ Mar 23 '21

#beginners #tutorial #productivity #git

Clubhouse's Android version, FB developer conference, and more

ExWhyZee ・ Mar 24 '21

#news #productivity #discuss #watercooler

Adios!

Clubhouse's Android version, FB developer conference, and more

ExWhyZee — Wed, 24 Mar 2021 12:43:36 +0000

🔰 Microsoft in talks with Discord over $10 billion-plus acquisition

Microsoft is in discussions to acquire Discord for more than $10 billion. Discord had multiple potential buyers express interest. Some sources say that Discord might prefer to take itself public rather than seek an acquisition. Discord has about 140 million monthly users. It makes money by offering subscriptions that offer advanced features.

🔰 You can now buy a Tesla with Bitcoin: Elon Musk

Tesla CEO Elon Musk on Wednesday tweeted, "You can now buy a Tesla with Bitcoin." In another tweet, Musk said, "Tesla is using only internal & open source software & operates Bitcoin nodes directly. Bitcoin paid to Tesla will be retained as Bitcoin, not converted to fiat currency." This comes after Tesla invested $1.5 billion in Bitcoin in February.

🔰 Amazon names Adam Selipsky to lead AWS after Jassy becomes CEO

Amazon has appointed Tableau CEO Adam Selipsky, a former Amazon executive, to lead Amazon Web Services (AWS), after Andy Jassy replaces Jeff Bezos as Amazon CEO. Selipsky helped launch the cloud division when he was hired in 2005, Jassy told employees in an email. The 54-year-old Selipsky spent 11 years at AWS before joining Tableau in 2016 as its CEO.

🔰 Zoom now has an SDK for putting Zoom into other things

Zoom has released a software development kit (SDK) to help developers build Zoom into their software. Developers can use the SDK to embed Zoom's chat functions in a variety of places without being tied to the Zoom Meetings user interface. Zoom is rolling out a centralized portal for developers to learn about and access available developer tools. It includes an analytics dashboard where developers can monitor how users are interacting with Zoom features.

🔰 Facebook to host its developer conference F8 virtually on June 2

Facebook has announced that it will be hosting its annual developer conference 'F8' as a one-day event, virtually. The event is being called 'F8 Refresh' this year and will be live-streamed on the 'Facebook for Developers' page. Last year, the event was cancelled over coronavirus concerns. However, Facebook CEO Mark Zuckerberg will not be speaking at the event this year.

🔰 Jack Dorsey’s First Tweet Sells as NFT for $2.9 Million

The world's first tweet posted by Twitter CEO Jack Dorsey has turned 15 and fetched $2.5 million as aa NFT. The 15-year-old tweet, "just setting up my twttr", was put up for auction as an NFT (non-fungible token) by Dorsey himself on March 6. Dorsey would donate the proceeds in Bitcoin to a charity. What do you think of NFT's?

🔰 Clubhouse's Android version launch to take 'couple of months'

Clubhouse Co-founder Paul Davison, in the firm's weekly Townhall event, said the firm is working "really hard" to come to Android, but said it's going to take a "couple of months" to make that happen. Davison also spoke about dropping Clubhouse's invite-only status as he wants the app to open up to everyone.

That's it for now. What do you think of these, let me know in the comments. Follow me for more such content.

Peace

A Complete Beginners Guide to Git

ExWhyZee — Tue, 23 Mar 2021 10:25:09 +0000

Hello Dev fam!
Today is the day we cover a tool, which is compatible with all the Operating Systems that are being used these days, allows users from all over the world to perform operations on a project remotely, is lightweight, secure, reliable (the list goes on), but, is perceived to be a bit difficult to grasp. Yes, we are talking about Git

Before we get things started, please save this post for future reference, and do follow me for more such content.

Let's Go!

Q) What in the world is Git?

Git is a free, open-source distributed version control system (VCS).

it's a system that tracks changes to our project files over time. It enables us to record project changes and go back to a specific version of the tracked files, at any given point in time. This system can be used by many people to efficiently work together and collaborate on team projects, where each developer can have their own version of the project, distributed on their computer. Later on, these individual versions of the project can be merged and adapted into the main version of the project.

Basically, it's a massively popular tool for coordinating parallel work and managing projects among individuals and teams. Needless to say, knowing how to use Git is one of the most important skills for any developer nowadays - and it's definitely a great addition to your resume!

Q) How do I setup Git?

Navigate to the above download link for your specific operating system and then follow through the installation wizard to get things set up on your computer!

Voila! , you have Git installed.
Now, it's time to tart your terminal. Type the following command to verify that Git is ready to be used on your computer:

If everything went well during the process, it should return the Git version installed in your computer.

Note:
If you are a Mac or Linux user, hen you can utilize the default Bash terminal that comes pre-installed on your machine.

If you use Windows, you can use its built-in Powershell terminal, or the Git Bash terminal which is bundled with the Git installation

Next Step: Configure Git With Your Name & Email

In your terminal, run the following commands to identify yourself with Git, replace the values inside the quotes with your desired username and email address.

Repositories

When working with Git, it's important to be familiar with the term repository. A Git repository is a container for a project that is tracked by Git.

We can single out two major types of Git repositories:

Local repository - an isolated repository stored on your own computer, where you can work on the local version of your project.
Remote repository - generally stored outside of your isolated local system, usually on a remote server. It's especially useful when working in teams - this is the place where you can share your project code, see other people's code and integrate it into your local version of the project, and also push your changes to the remote repository.
In this article, we'll just be covering local repositories.

Initializing a repository

Now that we know about repositories let's create one, To create a new repository and start tracking your project with Git, use your terminal software and navigate to the main folder of your project, then type the following command:

This command will generate a hidden .git directory for your project created by Git , it is where all internal tracking data for the current repository is stored.

Checking the status

Now that we have initialized our repository , let's talk about git status . While located inside the project folder in our terminal, we can type the following command to check the status of our repository:

This is how you check the current status of your repository . This is a often used command used when working with Git. It shows us which files have been changed, which files are tracked, etc.

Staging and committing code

Committing is the process in which the changes are 'officially' added to the Git repository.

In Git, we can consider commits to be checkpoints, or snapshots of your project at its current state. In other words, we basically save the current version of our code in a commit. We can create as many commits as we need in the commit history, and we can go back and forth between commits to see the different revisions of our project code. That allows us to efficiently manage our progress and track the project as it gets developed.

Commits are usually created at logical points as we develop our project, usually after adding in specific contents, features or modifications (like new functionalities or bug fixes).

Staging files

From the project folder, we can use the git add command to add our files to the staging area, which allows them to be tracked.

We can add a specific file to the staging area with the following command:

To add multiple files:

Instead of having to add the files individually, we can add every required file inside the project folder to the staging area using command:

By default, this adds all the files and folders inside the project folder to the staging area, from where they are ready to be committed and tracked.

Making commits

A commit is a snapshot of our code at a particular time, which we are saving to the commit history of our repository. After adding all the files that we want to track to the staging area with the git add command, we are ready to make a commit.

To commit the files from the staging area, we use the following command:

We can write a commit message inside the quotes which is used to identify it in the commit history.

The commit message should be a descriptive summary of the changes that you are committing to the repository.

After executing that command, you will get the technical details about the commit printed in the terminal.
And that's basically it!, you have successfully made a commit in your project! 🎉 now if we type git status we should see this:

Before we can commit any changes in our code, we need decide which files or which changes to place (add) in inside the staging area. and from the staging area we commit.

Commit history

To see all the commits that were made for our project, we use the following command:

The git log command will show details for each commit, like, name of the author, the generated hash for the commit, date and time of the commit, and the commit message which we provided earlier.

Now, lets say we made some changes to our code ( for example, added new functionalities or bug fixes) and for some reason our code breaks and stop functioning like it's suppose to.

That's Where Git come in handy and why mighty developers across the globe love it so much!

With Git we can easily revert back to a safe version of your project where our code was working before by:

Now Replace with the actual hash for the specific commit that you want to visit, which is listed with the git log command.

To go back to the latest commit (the newest version of our project code), you can type this command:

git checkout master

Ignoring files

To ignore files that you don't want to be tracked or added to the staging area, you can create a file called .gitignore in your main project folder.

Inside the file, you can list name of every file & folder which you do not want to track (each ignored file and folder should go to a new line inside the .gitignore file).

To go deep into ignoring files, you can go through this GitHub article: https://docs.github.com/en/github/using-git/ignoring-files

Branches

A branch could be interpreted as an individual timeline of our project commits.

Think of it like in the flash when berry goes to different alternate timelines of his life ( past , present and future!) , all occurring separately, but at the same

With Git, we can create many of these alternative environments (i.e. we can create different branches) so other versions of our project code can exist and be tracked in parallel.

This Feature allows us to add new (experimental, unfinished, and potentially buggy) features in separate branches, without touching the main 'official' stable version of our project code (which is usually kept on the master branch).

When we initialize a repository and start making commits, they are saved to the master branch by default.

Creating a new branch

You can create a new branch using the following command:

The new branch that gets created will be the reference to the current state of your repository.

It's a good practice to create a development branch where you can work on improving your code, adding new experimental features, and everything similar. After development and testing these new features to make sure they don't have any bugs and that they can be used, you can merge them to the master branch.

Changing branches

To switch to a different branch, you use the git switch command:

With this, you can switch to a different isolated timeline of your project by changing branches.

For example, you could be working on different features in your code and have a separate branch for each feature. When you switch to a branch, you can commit code changes which only affect that particular branch. Then, you can switch to another branch to work on a different feature, which won't be affected by the changes and commits made from the previous branch.

If the branch we want to switch to doesn't exist then the git switch command will create a new branch and change to it at the same time

Merging branches

Here's the last part of the puzzle.

Let's say you have created a new branch separate from the master branch of your project that you want to work on . after you 've fully implemented and tested a new feature in your code, you would want to merge those changes to the stable branch of your project (which is usually the default master branch).

So how do we do that , It's easy . To merge the changes from a different branch into your current branch, you can use this command:

Just replace with the name of the branch that you want to integrate into your current branch.

Deleting a branch

To delete a branch, you can run the git branch command with the -d flag:

Alright, this article Ends here.

So that's it for this article , there's a ton more of Git we haven't talk about (we'll definitely do it sometimes later.)

Leaving you with some resources👇:

Git official documentation: https://git-scm.com/doc
The free Pro Git book: https://git-scm.com/book/en/v2
Learn about GitHub: https://guides.github.com/
eBook on how to get started with Git and GitHub (Suggested by user Bobby Iliev): https://github.com/bobbyiliev/introduction-to-git-and-github-ebook

Peace.

Twitter accounts every Web Developer should follow

ExWhyZee — Sun, 03 Jan 2021 13:56:05 +0000

Twitter is jam-packed full of web design tips and inspiration. Whether you want to learn more about CSS, HTML, JavaScript or simply get some advice, Twitter's usually a great place to start to get in touch with the experts. Here, I've picked 13 of my favourite Twitter accounts to follow in the field of web design and development.

Join our Discord server if you are interested in Tech/Programming/Development, and chill with like-minded community!

DO Save this post for future reference

Here we go:

1) Jonathan Snook
He is a front-end developer concentrating on UX design and project management. He’s the author of Scalable and regularly shares development insights on his Twitter feed

2) Alex Sexton
Alex is a front-end engineer with Stripe. He is an open source advocate and contributor, and previously sat on the jQuery Board of Directors. Alex’s Twitter feed provides a light-hearted look into technology and culture.

3) Gina Trapanani
She is a partner at Postlight, where she builds web and mobile apps for some of the biggest names in the news and entertainment industries. She also founded the popular website, Lifehacker. Her twitter feed promotes some of her work at Postlight, and explores issues surrounding web development.

4) Six Revisions
Six Revisions regularly publishes articles geared toward web developers. It’s a place to find how-to pieces, tips and resources.

5) Tim Holman
Tim Holman describes himself as a 'tinkerer, tuner, tamperer'. He's also a developer at CodePen. His Twitter feed is full of creative coding examples and interactive experiments – definitely worth a follow.

6) Jeffrey Zeldman
Jeffrey Zeldman is one of the most influential web designers in the industry today. Formerly of Happy Cog, he's now heading up studio.zeldman. He's also the man behind A Book Apart, A List Apart and An Event Apart, and the author of the book Designing With Web Standards.

7) Jen Simmons
Jen Simmons is a "designer who builds stuff, too". She’s best-known as the host of The Web Ahead, a podcast about changing technologies and the future of the web. She regularly tweets inspirational content and often shares her thoughts on the industry, making for some interesting debate.

8) Jake Archibald
Jake Archibald is a developer advocate for Google Chrome, seasoned conference speaker and big fan of Service Workers. His bio states his aim is to help "the web to do what native does best, and fast", and he shares plenty of information and tips to that end in his Twitter feed.

That's it for now. Let me know in the comments, if you follow some other Web developer, who deserves to be in the list.

Adios!

Chrome Extensions every designer must use🎨

ExWhyZee — Sat, 07 Nov 2020 07:09:03 +0000

If you’re looking to add some extra handy tools to your everyday workflow, you’re in the right place.

I've compiled a list of few Google Chrome extensions I use daily and will help with all kinds of things as you’re browsing the web like identifying fonts and color hex codes, designing for accessibility, and even testing responsive designs.

Here we go:

💠 WhatFont

Do you ever stumble upon a nice looking font while browsing the web and then spend way too much time searching for the name and details?

WhatFont  is a huge time-saver letting you hover over a web font with your mouse and instantly providing the font details–from font name, font family, weight, size, line-height, to the hex code for the text’s color. The best part is, WhatFont also provides a link to the downloadable font via Typekit so you can instantly add it to your font library.

💠 Spectrum

Spectrum is a tool with which you can instantly test your web pages for different kinds of color vision deficiencies.

Simply click on the chrome extension in your browser window and use the drop-down menu to select a specific color deficiency. The web page you are on will then change in appearance so you are viewing it through the eyes of someone with the selected deficiency.

💠 ColorPick Eyedropper

ColorPick Eyedropper  is extremely useful if you were previously saving images and importing them into your software to pick out color codes.

Now, you can save time by hovering your mouse over any part of your browser to get the hex code for the desired color straight away. This is a great color picker that will save you loads of time.

💠Sizzy

Gone are the days where you’re forced to go through the tedious process of testing out your web designs for each and every screen they will be viewed on (iOS, Android, tablets, etc.)

With Sizzy , a responsive web design tester, you can preview your design on multiple screens at once as you work. All you have to do is input the website URL and filter what devices you’d like to preview the design on.
_

PS: If you are a Designer/ Developer or simply someone who loves technology, come Join our Discord Server
Get in touch with people of similar interests. Also, We host exclusive daily giveaways for everyone.
_

That's it for now.

6 FREE Modern WordPress Themes for Blogs

ExWhyZee — Sat, 07 Nov 2020 00:02:51 +0000

Note: If you are a Technophile, a Developer/ Designer, Join our Discord server today and get access to daily exclusive giveaways for everyone and fantastic community!
Join the server
_

If you want to impress your site visitors with a unique, organized, and aesthetically pleasing WordPress blog layout, you’re in the right place.

We’ve hand-selected these WordPress blog page templates that can help you create a gorgeous blog for your business. Whether you’re looking for a personal brand WordPress theme, the best WordPress themes for lifestyle blogs, or a WordPress blog layout that reflects your industry, we’ve got you covered!

🔖Save this post for future reference!

🔰 Astra

If you’re looking for a theme that’s self-proclaimed the “perfect theme for any website” on their website, Astra is for you.

This is definitely one of the best WordPress themes for blogs since it’s highly customizable. Whether you sell heavy equipment or makeup, you’ll love this WordPress theme for your blog.

Why you’ll love it: There are a lot of things to love about the Astra theme, but there are a few things that we love the most.

◾ You can customize it without having to worry about code. If you don’t currently work with a web design agency and manage your blog on your own, the fact that you can customize it without HTML knowledge is key.
◾ You can create full-width pages. Some WordPress themes don’t allow you to create full-width pages, which means they’re not fully customizable. Don’t worry, Astra lets you do just that!
◾ The theme is made for speed. You’ll love the performance because it’s nothing but
_

🔰 Bento

Bento is a super powerful WordPress theme for blogs that allows you to be flexible with your design. The layout is responsive, which means users will be able to enjoy it on any device and is also optimized for speed.

Why you’ll love it: Here are just a few of the things we love about the Bento layout.

◾Provides a variety of icons. If you’re a fan of customization, we know you’ll love the fact that the Bento theme offers over 500 high-quality vector icons for you to use on your blog.

◾Offers advanced WooCommerce integration. You’ll be able to integrate WooCommerce in a flash, which is extremely beneficial if you plan to sell things on your blog.

◾Implements SEO best practices. Your blog is nothing without great search engine optimization (SEO), and this theme uses all the best practices.
_

🔰 Revive

With an impressive 4.88-star rating from previous users, we guarantee you’ll love the Revive WordPress blog theme, too. With tons of header layouts, an improved menu layout, and multiple social icon styles, you’ll fall in love with this theme just like we did.

Why you’ll love it: Check out the top three things we love about the Revive theme.

◾It’s ready for 4k. Having a WordPress theme for your blog that is equipped for 4k display is a huge bonus — visitors are bound to love what they see.

◾Unlimited colors. You’ll spend hours deciding on the perfect colors for your blog since Revive offers unlimited color options. Pretty impressive!

◾Sidebar options. If you’ve ever been annoyed by a blog layout that didn’t let you decide where you wanted our sidebar, or if you want one at all, with Revive, you won’t have to worry. You can place your sidebar on the left, right, or opt for no sidebar.
_

🔰 Satori

Another highly customizable WordPress theme for your blog, Satori is a gorgeous WordPress blog layout that is image-heavy. It works best for blog sites that utilize a lot of pictures, and it even offers gallery options to show off your shots.

Why you’ll love it: There’s a lot to love about Satori — here are the biggest reasons:

◾Drag and drop feature. This blog layout allows you to drag and drop page elements without any coding knowledge.

◾Customizable blog layout options. Whether you want your blog to be left alighted or top-aligned, you can do either with Satori. There are also tons of additional blog layout options to ensure that your blog is as unique as your brand.

◾Integrated with popular plugins. This theme is already integrated with popular plugins to make your life even easier.
_

🔰 Garfunkel

Boy, do we love this theme. It’s exactly what we think of when we picture a stereotypical WordPress blog layout and features a grid layout to organize your blog posts. It also supports custom headers, guaranteeing a unique look.

Why you’ll love it: Not only does Garfunkel feature a classic blog layout, but you’ll also love these features:

◾ It features Jetpack infinite scroll. This means that no matter how far a user scrolls, new posts will always automatically appear.

◾ It has six post formats. If you want a variety of choices for your post formats, Garfunkel has you covered. They offer six different formats for your post to fit your customizing needs.
_

Vogue

This WordPress blog layout earned an impressive five out of five stars from users and has over 10,000 active installations. That’s not surprising, considering it features a fully responsive design, multiple blog layouts, and tons of customization options.

Why you’ll love it: If you need more reasons to love the Vogue theme, read on.

◾ It features four blog layouts: We meant it when we said highly customizable — this layout offers four different blog layouts to help you create your own style.

◾ multiple header and footer layouts: With four blog layouts, four header layouts, and two footer layouts, that makes for tons of customization. The choice is yours!

◾ WooCommerce integration: If you also sell things on your blog, you’ll be happy to know that the Vogue theme offers integration options for WooCommerce.

10 Great Sites for UI Design Patterns you Must Save🏷️

ExWhyZee — Mon, 19 Oct 2020 03:40:47 +0000

You don’t want to spend your whole life redesigning the wheel do you? No, neither do I. If you are looking for a design that solves a problem that has been solved inside a different application before; then the template for your wheel is probably already out there. That’s a design pattern for you and me.

I’ve put together a list of some of the best places to find design patterns on the web. Now, whilst all of these resources are free some may ask you to pay for premium resources.

💠http://ui-patterns.com/

I like UI Patterns; it makes it easy to find patterns that you like and to group them together once you’ve decided that something is useful. They also have a bunch of interesting articles on UI design patterns which can help extend the way you approach using patterns in your designs

💠http://www.welie.com/patterns/index.php

WELIE isn’t the prettiest site I’ve ever seen but there’s a very useful interaction design patterns library that is logically grouped and incredibly helpful.

💠https://patterntap.com/patterntap

Pattern Tap is closing on 10,000 User-Generated Sets of patterns and that makes it an awe-inspiring resource for UI designers. The drop-down menu system makes it really easy to find what you want in moments.

💠http://uiscraps-blog.tumblr.com/

The good, the bad, and the ugly of UI design. UI Scraps is a great blog that looks at interface design as a whole and then tinkers with the patterns used. You can find some great work here and some truly awful stuff too; it’s all thoroughly critiqued so you can see why something doesn’t work too.

💠http://www.patternbrowser.org/code/pattern/pattern.php

Pattern Browser does exactly as the name suggests; it lets you quickly switch between UI patterns in your browser window. There aren’t as many patterns here as on some of the bigger sites but it’s a good resource nonetheless.

💠http://www.uie.com/

User Interface Engineering offers more than patterns, it’s a heavy resource that can meet a lot of your UI needs. The user and site generated commentary is invaluable.

💠http://designsnips.com/

Very nice graphical library of Design Snips for users to browse through and then put into play in their own UI work.

💠http://www.smileycat.com/category/elements-of-design/

There are some handy groupings of design elements for use on Elements of Design. This goes a little beyond UI but that’s OK there’s plenty for the UI pro to use here too.

That's it for now.
Have a great day ahead!
_
✍️§Ðj

Best FREE Compilation of Graphic Design, WebDev, UI/UX Resources.

ExWhyZee — Mon, 12 Oct 2020 04:33:52 +0000

I've compiled the links to the best resources for Graphic Designing; Web Development; UI/UX here. Please find the links to the websites under their respective category. Do Save this post for later use.
=>For ICONS:

http://icons8.com/ - 55,300 free icons. Yes, you've heard it. They're free and although it comes with some size and copyright restrictions.
https://iconpharm.com/ - 9,900 free icons. This one allows you to do multiple edits to icons before downloading them.
http://creativedo.co/FontAwesomePS - Fontawesome plugin right inside your photoshop, vector .svg format.
http://www.flaticon.com/ - A really good web-based archive for icons.
https://material.io/icons/ - A pretty nice collection of material design icons from google.
https://thenounproject.com/ - A really rad collection of icon sets for all kinds of design.
https://mariodelvalle.github.io/CaptainIconWeb/ - A single author created 350+ resizeable icons for your use.

=>For PATTERNS:

https://www.toptal.com/designers/subtlepatterns/ - It's an awesome site to get clean patterns from.
http://thepatternlibrary.com - THIS WEBSITE IS AMAZING. Seamless patterns. Just. Amazing.
http://heropatterns.com- On Reference of Kevin McBride

=>For STOCK PHOTOS:

https://unsplash.com/ - Unbelievably HD, beautiful, free photos that you can use.
https://stocksnap.io/ - A nice collection of HD stock photos all under CC0 license.
http://nos.twnsnd.co/ - This one is really cool, it's basically a site dedicated to vintage-type photos, of course, you can use the stocks as well.
https://pixabay.com/ - Don't you just love the CC0 license?
https://www.foodiesfeed.com/ - YOOOO. DESIGN + FOOD. No seriously, this is a lot like food porn. There's a lot of HD food goodies in here.
https://uifaces.co/ - A very useful website where you can basically get photos to use for mock avatars on any
https://www.photobash.org/ - More royalty-free stock photos!
https://pexels.com/ - Another fantastic site for free stock photos & videos. Referred by user Austin Standing from comments.

=>For RENDERS:

http://www.renders-graphiques.fr/galerie.htm - Mostly anime-related renders.
http://www.stickpng.com/ - A collection of renders for things like games, anime, memes, musicians, etc.

=>For VECTORS:

http://www.freepik.com/ - They have an unbelievable amount of free vectors you can utilize.
http://vecteezy.com/ - Also another free vector archive, though a bit more limited than freepik.
https://undraw.co/illustrations - Amazing crazy find, this website lets you use (.svg) vector illustrations.
https://worldvectorlogo.com/ - A collection of famous logos for different brands/companies around the world in .svg format!

=>For INSPIRATION:

https://webcreme.com - Design inspiration for the mock-up idea hungry designers.
http://littlebigdetails.com/ - For your daily dose of design inspiration.
https://niice.co/ - Just a lot of designs for every category you may be able to think of.
https://www.awwwards.com/ - Best Webdesign trends, they're sort of like the Grammys for music, except, its for web design.
https://logopond.com/ - A collection of really amazing logos to take inspiration from.

=>For COLOR PALETTE:

https://webkul.github.io/coolhue/ - Another resource to grab ideas of cool gradient combinations from.
http://www.sankk.in/material-mixer/ - Quite useful for mixing and matching colors for material design, UI/UX.
http://paletton.com/ - If you were running out of ideas for color combinations, this one really can save you.
https://pigment.shapefactory.co/ - A wonderful-looking resource website for picking colors. Palettes are contrast-friendly.
https://coolors.co/ - Another awesome website where you can generate color palettes.

=>For GRADIENTS:

https://www.grabient.com/ - Grab a gradient.
https://uigradients.com - A very cool looking website for gradients.

=>For FONTS:

https://fonts.google.com/ - Honestly if you didn't know you could get amazing free fonts from this website, I'm sort of judging you a bit :p
http://www.dafont.com/ - ALL DA FREE FONTS. See what I did there?
https://colorsandfonts.com/ - on the reference of user Micael-andreuzza from comments.

That's it, for now.
Did I miss any other site that might be useful? Let me know in the comments below!
Have a great day!
_
✍️§Ðj