Castore  DeRose

Castore DeRose

1593655273

How to Build a Personal Website using Gatsby

Like many seniors during their last semester of college, I wanted to take my foot of the petal and relax before starting full-time. But on the other hand, taking only 12 credits gave me free time that I really didn’t want to waste. Around that time a friend told me he was making an online portfolio using Gatsby. I had been meaning to make a personal website for a while and this gave me a goal to run after. However, I had no idea where to start.

Before getting technical, here’s my take on a personal/portfolio website. I believe business cards are in the past and, instead, it’s more convenient to refer someone the url of your website. Whether you’re a photographer, artist, architect, UI/UX designer, or software engineer, having a personal website makes you one step away from building your own brand and possibly your own business.

To get to the point, what ended up happening in the journey of building a personal website is that I learned as much about JSX/CSS as Gatsby. Just to preface, I’m no UI/UX Designer, but here’s some things I learned while building a personal website.

1. Why Gatsby?

Gatsby is a static site generator based on React

Static site generators create HTML content on the client side during runtime. In other words, Gatsby loads only the critical JavaScript, HTML, and CSS, therefore, your site loads quickly. After the page is loaded, Gatsby prefetches data for your other pages, which makes clicking around the site feel extremely fast.

Some other benefits of using Gatsby include:

  • Leverages one of latest web frameworks — React
  • Good SEO, unlike standard React
  • Utilizes GraphQL, unlike REST, allows you to request specific data that a client needs instead of a fixed data structure approach
  • You can deploy your Gatsby app on Netlify, which offers _continuous deployment. _In other words, you can configure your site to build and deploy every time you push changes to your master branch on GitHub
  • Perfect for people who want to do a bit of coding and not rely on SquareSpace, Wix, or WordPress

2. Redundant Styling

One of the most important things to know when learning to code is the concept of _compartmentalization — _dividing into sections. It’s best practice to break up your complex code into parts that are clean, reusable, and easy to maintain. When you actively break up your code in sections, such as helper functions, you’ll end up writing less code and achieve the same functionality. This can be applied to both general programming and CSS.

Let’s take this example of writing some CSS for three different type of buttons:

.primary-button {
  background: gray;
  font-size: 14px;
  text-align: left;
  padding: 15px 30px;
  border-radius: 3px;
  color: black;
}
.secondary-button {
  background: blue;
  font-size: 14px;
  text-align: left;
  padding: 15px 30px;
  border-radius: 3px;
  color: black;
}
.cancel-button {
  background: red;
  font-size: 14px;
  text-align: left;
  padding: 15px 30px;
  border-radius: 3px;
  color: black;
}

If you noticed, most of the characteristics for the three buttons are the same. Instead, I’d recommend going down this route:

.button {
  font-size: 14px;
  text-align: left;
  padding: 15px 30px;
  border-radius: 3px;
  color: black;
}
.primary-button {
  background: gray;
}
.secondary-button {
  background: blue;
}
.cancel-button {
  background: red;
}

I often ran into this issue when I wrote very detailed CSS for my personal website, which often resulted in lengthy CSS files. By actively avoiding repetition, your CSS will be more readable, and less lines of code.

#programming #react #gatsbyjs #tech #web-development

What is GEEK

Buddha Community

How to Build a Personal Website using Gatsby

Why Use WordPress? What Can You Do With WordPress?

Can you use WordPress for anything other than blogging? To your surprise, yes. WordPress is more than just a blogging tool, and it has helped thousands of websites and web applications to thrive. The use of WordPress powers around 40% of online projects, and today in our blog, we would visit some amazing uses of WordPress other than blogging.
What Is The Use Of WordPress?

WordPress is the most popular website platform in the world. It is the first choice of businesses that want to set a feature-rich and dynamic Content Management System. So, if you ask what WordPress is used for, the answer is – everything. It is a super-flexible, feature-rich and secure platform that offers everything to build unique websites and applications. Let’s start knowing them:

1. Multiple Websites Under A Single Installation
WordPress Multisite allows you to develop multiple sites from a single WordPress installation. You can download WordPress and start building websites you want to launch under a single server. Literally speaking, you can handle hundreds of sites from one single dashboard, which now needs applause.
It is a highly efficient platform that allows you to easily run several websites under the same login credentials. One of the best things about WordPress is the themes it has to offer. You can simply download them and plugin for various sites and save space on sites without losing their speed.

2. WordPress Social Network
WordPress can be used for high-end projects such as Social Media Network. If you don’t have the money and patience to hire a coder and invest months in building a feature-rich social media site, go for WordPress. It is one of the most amazing uses of WordPress. Its stunning CMS is unbeatable. And you can build sites as good as Facebook or Reddit etc. It can just make the process a lot easier.
To set up a social media network, you would have to download a WordPress Plugin called BuddyPress. It would allow you to connect a community page with ease and would provide all the necessary features of a community or social media. It has direct messaging, activity stream, user groups, extended profiles, and so much more. You just have to download and configure it.
If BuddyPress doesn’t meet all your needs, don’t give up on your dreams. You can try out WP Symposium or PeepSo. There are also several themes you can use to build a social network.

3. Create A Forum For Your Brand’s Community
Communities are very important for your business. They help you stay in constant connection with your users and consumers. And allow you to turn them into a loyal customer base. Meanwhile, there are many good technologies that can be used for building a community page – the good old WordPress is still the best.
It is the best community development technology. If you want to build your online community, you need to consider all the amazing features you get with WordPress. Plugins such as BB Press is an open-source, template-driven PHP/ MySQL forum software. It is very simple and doesn’t hamper the experience of the website.
Other tools such as wpFoRo and Asgaros Forum are equally good for creating a community blog. They are lightweight tools that are easy to manage and integrate with your WordPress site easily. However, there is only one tiny problem; you need to have some technical knowledge to build a WordPress Community blog page.

4. Shortcodes
Since we gave you a problem in the previous section, we would also give you a perfect solution for it. You might not know to code, but you have shortcodes. Shortcodes help you execute functions without having to code. It is an easy way to build an amazing website, add new features, customize plugins easily. They are short lines of code, and rather than memorizing multiple lines; you can have zero technical knowledge and start building a feature-rich website or application.
There are also plugins like Shortcoder, Shortcodes Ultimate, and the Basics available on WordPress that can be used, and you would not even have to remember the shortcodes.

5. Build Online Stores
If you still think about why to use WordPress, use it to build an online store. You can start selling your goods online and start selling. It is an affordable technology that helps you build a feature-rich eCommerce store with WordPress.
WooCommerce is an extension of WordPress and is one of the most used eCommerce solutions. WooCommerce holds a 28% share of the global market and is one of the best ways to set up an online store. It allows you to build user-friendly and professional online stores and has thousands of free and paid extensions. Moreover as an open-source platform, and you don’t have to pay for the license.
Apart from WooCommerce, there are Easy Digital Downloads, iThemes Exchange, Shopify eCommerce plugin, and so much more available.

6. Security Features
WordPress takes security very seriously. It offers tons of external solutions that help you in safeguarding your WordPress site. While there is no way to ensure 100% security, it provides regular updates with security patches and provides several plugins to help with backups, two-factor authorization, and more.
By choosing hosting providers like WP Engine, you can improve the security of the website. It helps in threat detection, manage patching and updates, and internal security audits for the customers, and so much more.

Read More

#use of wordpress #use wordpress for business website #use wordpress for website #what is use of wordpress #why use wordpress #why use wordpress to build a website

Nandini roy

Nandini roy

1618667097

Responsive Personal Portfolio Website Using HTML CSS and JavaScript

Tutorial: https://youtu.be/9DDiorNZiyw

#create a portfolio website with html css javascript #personal portfolio complete website using only html css javascript #responsive portfolio website html css javascript #responsive personal portfolio website #portfolio website #responsive website

anita maity

anita maity

1619013192

Create a Personal Portfolio Website Using HTML CSS and JavaScript

Demo Click Here: https://cutt.ly/2vFKuxe

#portfolio website html css #personal website html css #personal portfolio website #how to create a complete peronal portfolio website #responsive portfolio website html css #responsive personal portfolio website html css

wp codevo

wp codevo

1608042453

How To Create A Complete Responsive Personal Portfolio Website with Just HTML CSS

https://youtu.be/trNdhfJLffg

#how to create a complete personal portfolio website just using html and css #personal website using html #personal portfolio website #portfolio website design using html css javascript

wp codevo

wp codevo

1608043308

Responsive Personal Portfolio Website using HTML CSS & JavaScript

https://youtu.be/CHQvM4oS7ww

#responsive website using html5 and css3 #responsive website html css #portfolio website #portfolio website design in html css #complete responsive website in html css javascript #one page personal website