BG - Website Developer & SEO Expert

This is just a simple Pricing plan that I created using Elementor PRO, you can get inspiration from this design, it's a highlighted layout in the Pro Plan and the rest is just a normal box.

It's a Price Table Element from Elementor Pro, and from there you can tweak the layout, depending on your preference, when you also hover over each pricing table there is a default shadow which you can also adjust.

I will update this page once I made another layout using Elementor Pro.

Thanks!

<style>
/* CONTAINER BOXED LAYOUT*/
/* Ultra wide */
@media (max-width: 3840px) {
.c-box {--content-width: 55%;}}
/* Desktop */
@media (max-width: 1920px) {
.c-box {--content-width: 65%;}}
/* Laptop big */
@media (max-width: 1600px) {
.c-box {--content-width: 74%;}}
/* Laptop small */
@media (max-width: 1366px) {
.c-box {--content-width: 77%;}}
/* Tablet portrait */
@media (max-width: 1200px) {
.c-box {--content-width: 80%;}}
/* Mobile */
@media (max-width: 767px) {
.c-box {--content-width: 85%;}}
</style>

Using This you can do a global change in any screen size for better optimization of website responsiveness, I just wrote it here for my reference, this is based on Rino's tips, and many thanks to him as I've been using this for quite some time on my project.

This one below is also working for my 27inches screen monitor.

@media screen and (min-width: 1280px) {
    /*Your CSS Code here*/
    .our-services-class {
        margin-top:250px;
    }
}

Just paste this code before closing the tag of HEAD HTML, or if you're using Elementor PRO, just it in the global page custom CSS

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */
    }
    
    /* Smartphones (landscape) ----------- */
    @media only screen and (min-width : 321px) {
    /* Styles */
    }
    
    /* Smartphones (portrait) ----------- */
    @media only screen and (max-width : 320px) {
    /* Styles */
    }
    
    /* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /* Styles */
    }
    
    /* iPads (landscape) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
    and (orientation : landscape) {
    /* Styles */
    }
    
    /* iPads (portrait) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
    and (orientation : portrait) {
    /* Styles */
    }
    /**********
    iPad 3
    **********/
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
    and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
    }
    
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
    and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
    }
    /* Desktops and laptops ----------- */
    @media only screen  and (min-width : 1224px) {
    /* Styles */
    }
    
    /* Large screens ----------- */
    @media only screen  and (min-width : 1824px) {
    /* Styles */
    }
    
    /* iPhone 4 ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
    and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
    }
    
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
    and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
    }
    
    /* iPhone 5 ----------- */
    @media only screen and (min-device-width: 320px) and (max-device-height: 568px)
    and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
    }
    
    @media only screen and (min-device-width: 320px) and (max-device-height: 568px)
    and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
    }
    
    /* iPhone 6 ----------- */
    @media only screen and (min-device-width: 375px) and (max-device-height: 667px)
    and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
    }
    
    @media only screen and (min-device-width: 375px) and (max-device-height: 667px)
    and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
    }
    
    /* iPhone 6+ ----------- */
    @media only screen and (min-device-width: 414px) and (max-device-height: 736px)
    and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
    }
    
    @media only screen and (min-device-width: 414px) and (max-device-height: 736px)
    and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
    }
    
    /* Samsung Galaxy S3 ----------- */
    @media only screen and (min-device-width: 320px) and (max-device-height: 640px)
    and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
    }
    
    @media only screen and (min-device-width: 320px) and (max-device-height: 640px)
    and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
    }
    
    /* Samsung Galaxy S4 ----------- */
    @media only screen and (min-device-width: 320px) and (max-device-height: 640px)
    and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
    }
    
    @media only screen and (min-device-width: 320px) and (max-device-height: 640px)
    and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
    }
    
    /* Samsung Galaxy S5 ----------- */
    @media only screen and (min-device-width: 360px) and (max-device-height: 640px)
    and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
    }
    
    @media only screen and (min-device-width: 360px) and (max-device-height: 640px)
    and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
    }

This is a quick list of some most themes that I work on each of my project, though some of my clients have their own themes installed on their themes, but when I will be the one to build the site from scratch this is most of the themes that I use.

Hello Elementor
OceanWP
Astra
Sahifa (for Blogging)
DIVI Theme
Genesis
Jevelin
The 7
Avada
BeTheme

I tried other themes but I won't list it here as this is most of the themes I use in my recent projects.

/*bryanDevs add custom css for Overlay*/

.about-legacy .et_pb_section_0:before{

    content:"";

    display:block;

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background: #434141 !important;

    opacity:60%;

    z-index:1;

}

//Below are the thing you need to add directly into the element or section of DIVI

content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image: linear-gradient(142deg,rgba(38,252,0.61)0%, #5e1196 100%) !important; z-index:1;

The code snippet above is a custom CSS in which you can add an overlay background which is not achievable in DIVI builder for now, but in Elementor its already available, I just added it here for reference and probably it is also helpful to WordPress Developer/Designer.

Above you need to go to Section Settings of DIVI and go to Custom CSS, just paste it right in Advance>CustomCSS (before) section.

Page Builder, I Am Using for WordPress Development:

Visual Composer
Divi Builder
Elementor
Thrive Architect
Avada Builder
Oxygen Builder

Visual Composer - This is one of the most common plugins I use to build Websites in WordPress CMS.

DIVI Builder - I once use this builder and it's really good as well, there are premium themes that use this builder called Divi Themes.

Elementor - This one is my favorite but since my recent client did not use this one as they prefer Visual composer I rarely use this, but what I like this one is that you can create your own custom elements with it, you can try it with a free version, and there is also an Elementor Pro version of it, I mostly do some small projects using this builder in my localhost server.

Other Plugin Extension I Use:

Overlaiz
Unlimited Elements for Elementor
Essential Addons
Happy Elementor Addons
OoohBoi Steroids for Elementor

Thrive Architect - I have a client who has all tools in Thrive and this builder is also good, but I think its too expensive, but to be honest its really good, you can create a decent page for the blog page before I develop a blog and Photography site using this builder.

Avada Builder - I also use this as it also has powerful tools, the only problem with this is that it is only intended for Avada Themes, not unlike Elementor which is compatible with most of the themes you can imagine.

#bryangransedevs #wordpressdeveloper #development #wordpress #photography #projects #pagebuilder #elementorpro #elementor

Display OS Memory Using NodeJS - Convert MB to GB

This simple code is to display a basic output from OS free memory using NodeJS, and then output it into the console.log() terminal, take note that I am using VS Code Here so if you wanted to try you can use that text editor or you can use your own.

Documentation of OS in Node can be found on their website which you can also go here. for the JS Source Code, you can get it here. (You will get the full functionality of it including the Functions that will convert the Megabytes into GigaBytes).

This Simple coding is just documentation for my NodeJS journey, and I also do JavaScript/ReactJs/Express Journey and also Laravel which will soon be displayed on this small basic blog site of mine.

Basic Code to Display OS.FreeMEM():

const os = require('node:os');
console.log(os);
const totalMemory = os.totalmem();
console.log(`TOTAL MEMORY: ${totalMemory} MB`);

JAVASCRIPT FETCHING JSON USING XMLHttpRequest()

Index.html I have this basic HTML that will use to display data from JSON file, here is the code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript Fetch JSON FILE</title>
    <link rel="shortcut icon" href="data:" type="image/x-icon">
</head>
<body>
    <div class="output"></div>
    <script src="./app.js"></script>
</body>
</html>

App.js is where the JavaScript magic happens to fetch the JSON file.

const url = './data.json'; const output = document.querySelector('.output'); 
 let xHR = new XMLHttpRequest(); 
 console.log(xHR) 
xHR.open('GET', url); 
xHR.responseType = 'json'; 
xHR.onload = function() {
    
console.log(xHR.response);
    
let data = xHR.response;
    
data.books.forEach(result => {
        
output.innerHTML += `§{result.title}<br />`;
    
})
} 
xHR.send();
console.log(xHR);

Below is the JSON file that I use, you can create your own and explore, this is just for testing that will let us display data using XML http request.

{
    "books": [
        {
            "title": "Learn to Code",
            "author": "Bryan Devs",
            "isbn": "324-23243"
        },
        {
            "title": "The Adventure JSON",
            "author": "Jason Jones",
            "isbn": "3324-2-444"
        },
        {
            "title": "New Objects",
            "author": "Jane Doe",
            "isbn": "2343-234-2433"
        }

    ]
}

If you want to get the source code file you can visit this site PH Directories & Resources and download the whole file cheers.

As a developer, we often think about how we can improve our productivity by using some programming tools that will help us make our coding experience better, and some of the Visual Code Tips or maybe some extension that will help us finish the project in a given time frame or a specific deadline.

Hi, welcome to my personal website wherein I put updates about my professional growth and experience of every project I made, so if you are wondering you can also check my Javascript Journey where I often put some updates about myself, now this time I am going to talk about what is the extension I used for my VS Code.

To make things clear this is my own preference for using an extension on VS code and so far it is useful for me, so even if you did not try some of the extension I used you might find it interesting so below are the list of extension I used.

Live Server
PHP IntelliSense
Tailwind CSS IntelliSense
JSON
Tabnine AI Autocomplete
vscode-icons
Laravel Blade Snippets
CSS Peek
PHP Profiler
Vetur

Now there are some other extensions that I used, but that is the most extension that I always recommend for my friends, since it is also useful to me you might try that one as well.

PS: This page will be update once I discover something useful.

I've been working on my Javascript as I am going to improve my fundamental understanding in standard JavaScript into TypeScript as well as other JS framework like React, so currently I am working with so many small projects, and below are some of them.

My Javascript Roadmap

Learn an In-depth JavaScript fundamental, from basic to proffessioansl and technicalities of this programming language.
Learn TypeScript to make my code consistent and easy to track errors
Learn Vue.js and React.js for Framework

Note: This will be updated from time to time base on my progress, so this page will keep updating anytime soon.

Small Projects I Work On

Quiz Projects
ISS or International Space Station API - what this small project is I pull out the exact location of ISS and display it in the map, and create a custom marker in it, using the LeafLetJS.
Random DOG Breed API - what this small project does is it lets the user ask a question to identify the current dog being displayed on the page, based on the random dog image being pull-out in the API I use, then it shows an indication if the user answers the correct dog breed.

Currently, I have been working on some other projects, and I will update this page every time I finished those each of the projects that are currently in progress, the purpose of this is to document my improvement in JavaScript since right now JS gets a nonstop evolution that even me needs to adopt that nature.

I will display the final output here but not the sources code, so basically you can watch me doing some journey exercises in my own documented YouTube Channel video, which I record myself coding.

Right now I am exploring other interesting API that is available on the web I also discover some public API which you can check below.

Go Here To Check Public API from GitHub

JavaScript is the most popular language nowadays, and I would like to be part of it, as I am going to acquire more skills and get to a new environment of work or team that will let me utilize my skills in terms of technical coding using Javascript and Other Language I know.

JavaSript Concept I learned:

Arrow Fat Function / Anonymous Function
Fetching Jason and API (So far I need to explore more about this in other API)
Event Listeners ( will do small projects using other event )
Looping using For Of, For Each, and For as Well as Branching in JS
Reducing Object Array Using Shift() method
Manipulating DOM
Invoke Functions
Creating Functions and Math.random()

My Important Codes or Expression/Methods in Javascript

As a programmer or developer you need to know how RegExp or Regular Expression works, so in my case I need to record some basic or useful codes here, so below are some useful codes that I am using with some of my projects.

Regular Expression (RegExp) for Email Validation:

let validRegex = /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/;

sThat is the validation of Email with optional extension such us yourdomain@mydomain.com.uk so basically that will check if the email inputted by the user match with that regular expression I declare above.

Hello, welcome to my Graphics Design Portfolio, here you will see all the list of Social Media Design I made using tools such as (i) Adobe Photoshop (ii) Adobe Illustrator (iii) Canva, and many more, most of it is my past work to all of my client so I will be updating this page from time to time.

Since the pandemic started I am so much grateful despite the hard situation happening here in the Philippines and even in other countries because I can still earn money online by working as a Website Designer, SEO, Affiliate Marketing Using Sales Page via ClickFunnels, Email Marketing using Aweber/Mailchimp or other tools for Email Sequence and Follow and also this Graphics design.

Though my main focus is more about website design, I am still flexible depends on the opportunity I get on my job as a freelancer. I also do Video editing not really a pro one, but I can go some cuts and some little bit tweaks such as adding text and so on using the Filmora Editing Tools.

So without any further ado, please preview all my work below, you can click each image to see full-size cheers!

NOTE: I will update this page once I have the latest graphics design, so the sorting of images will be descending, the latest would be on the top and then down to the bottom.

Hello Guys, here is the list of designs I created as Infographics in different niches such as Fitness, Real Estate, Meditation, Digital Marketing, and many more, this is just a list of all the works I made for the year 2021.

BG - Website Developer & SEO Expert

Hi, I am

Bryan G. Granse

ABOUT ME

Bryan G. Granse

My Professional Skills

Services

Website Development

Animated elements

Responsive Design

Modern design

Flexible and with New PC and Fast Internet

Fast support

My SEO Tips and Journey

Portfolio / Blog

Pricing Plan Design I created Using Elementor Pro

Container Percentage For Responsiveness of Box Global Change | Min to Max CSS Breakpoints I Use

WordPress Themes That I Use

Custom CSS Color OVerlay For DIVI or Elementor

WordPress Page Builder Tools That I Use During My WordPress Journey

A Simple and Basic Code to Get PC Memory Using NodeJS Then Convert from MB to FB

Coding: Testing To Fetch JSON Data Using XMLHttpRequest()

Visual Studio Extension That I Use as a Developer?

Vanilla Javascript and Update of My Small Projects

My Important Codes or Expression/Methods in Javascript

Graphics Design for 2021 by Bryan

Infographics | Graphics Design by BRYAN 2021

Popular Posts

Labels

categories

Blog Archive

Report Abuse

Contributors

GET A FREE QUOTE NOW

SAY HELLO TO ME

Search This Blog

Mga Pahina

ADDRESS

EMAIL