Forem: gechiclazz

Top Ten CSS Frameworks in 2023

gechiclazz — Mon, 04 Sep 2023 10:21:06 +0000

Bootstrap: Bootstrap, the most widely used CSS framework at the moment. It has features like a responsive layout system with a twelve-column grid, but that doesn't hinder it from being simple to adjust for fixed or responsive grids. LESS and SASS files are also included. Bootstrap is easily compatible because it also makes your websites accessible across various browsers. It is a CSS framework for all purposes.
Tailwind: It is a CSS library with built-in classes to apply to HTML components, allowing for quicker UI development. Since it is utility-first, it is simple to create customized designs without utilizing the conventional method of creating CSS, allowing you to keep your CSS files minimal. Because of its low level foundation, you have more creative freedom while designing your application.
Spectre: This framework uses basic elements and typographic stylings, as well as a responsive layout system based on flexbox and grid features. All sets of modules are bundled into 10kb zipped files. Yan Zhu came up with it, and it was originally presented in March 2016. If you want to give your project a unique look and feel or if you need to add new features that the framework doesn't provide, Spectre is designed to be easily expandable and customizable.
MVP: The Minimal Viable Product (MVP) is a classless framework, therefore in order to utilize it, you don't need to be familiar with class names. It is a simple stylesheet with semantic HTML that Andy Brewer produced.
UI Kit: UI Kit is a front-end framework specifically designed by YOOtheme for iOS development. It has aspects like button and label elements as well as animations, but it is less customisable.
Blaze UI: This framework is general-purpose and has a solid structure for constructing websites rapidly with a basis that is scalable and stable. Accessibility via accessible selectors, mobile-first design, and the idea of variables to personalize components are further characteristics.
Skeleton:It has 400 lines of uncompressed code and is a small framework. It is quick to get going and designs its website with mobile users in mind. Skeleton includes extra built-in styles.
Materialize: It is constructed using Google's Material Design standards. It offers style and animations for creating attractive and functional websites. It takes into account a number of factors, including responsiveness and browser portability. This framework is utility-based.
Vanilla: It blends the type-safety of TypeScript with the utility class approach used by frameworks like Tailwind. In contrast to frameworks that may slow down a website by containing a lot of unneeded data, shorter, more direct code speeds up page loading.
Pure: It is designed to be lightweight and basic, so it won't cause your website to load slowly. Yahoo! developed it and continues to maintain it. A responsive grid system was used in its design, which adapts to various screen sizes and devices.

Whatsup with HTML 6

gechiclazz — Fri, 25 Aug 2023 13:17:42 +0000

Since HTML was first introduced, modifications have been made to the markup, the most recent of which was HTML 5 in 2014. Web sites can now locally save data on the user's browser thanks to HTML 5. As a result, content delivery can happen more quickly and safely. Additionally, HTML5 has made it simpler to guarantee uniformity across all browsers. Native video and audio capability enables developers to prevent incompatibilities since browsers have historically relied on various plugins to play multimedia files.

Additionally, new features provide video controls including play, pause, and volume choices. Additionally, it saved us from having to use type attributes from tags like "link>" and "script>." What else? It assisted developers in organizing material using new tags like "article," "section," "header," etc. in a more pertinent manner. There is a belief that HTML 5 could do better with its semantic setup.

Consider utilizing tags like "logo" and "/logo" to add a logo to your website, or "toolbar" and "/toolbar" to add a toolbar, etc. Wouldn't it be preferable if you could use the div tag directly instead of needing to utilize several IDs like wrapper or container? Simply said, you can use "container>" in place of "div id='container'>". Though it has not yet been released, HTML6 can be used in this situation. Additional options in HTML 6 include, For instance, the "html:title>" element will alter your browser's title bar, and the "html:media>" element will assist in displaying the specified image on your browser's screen.

With HTML6, it's likely that users will be able to easily access their images and computer files, improving camera control and detection rates. The pixel size will vary among the various terminals.

CSS Flex vs Grids

gechiclazz — Fri, 18 Aug 2023 15:14:12 +0000

In this write up we would be trying to understand what flex and grids are, as well as streamlining their similarities and differences summarily. Both of them are layouts used in building webpages, first, we take a look at flex or flexbox as it is called.

Flexbox is a one-dimensional layout system that may be used to design a row or column axis layout. It is useful for assigning and aligning space among elements in a grid-based container. It is compatible with a wide range of display devices and screen sizes. Assume we have a container with the class name container and the following five child items:

 <body>
        <div class="container">
            <div class="child">box 1</div>
            <div class="child">box 2</div>
            <div class="child">box 3</div>
            <div class="child">box 4</div>
            <div class="child">box 5</div>
        </div>
    </body>

We would have the corresponding CSS file as given below:

    .container{
        width: 500px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .child{
        flex: 1 1 150px;
    }

The "'display: flex'" parameter is used to construct a flex container. Then, any element contained within that flex container becomes a flex item. In our flex container, we may opt to give the items in our container a direction, 'row and column' are the most commonly utilized flex directions. 'Flex-direction' could be adjusted to 'row-reverse or column-reverse' in some circumstances. Another intriguing feature is "flex-wrap," which allows things in a flex container to transfer to the next line when there is no more space. Flexbox allows you to work on either element (row or column) with greater freedom. In this case, HTML markup and CSS will be simple to manage. Other Flexbox properties include align-self and justify-content.

CSS grids are a two-dimensional layout system that allows us to deal with rows and columns together, which opens up a wide range of possibilities for creating a more complicated and organized design system. Grid allows you to move around the blocks more freely, regardless of your HTML syntax. Grid layout is intended for larger-scale layouts that are not linear.

    <body>
        <div class="container">
            <div class="child">box 1</div>
            <div class="child">box 2</div>
            <div class="child">box 3</div>
            <div class="child">box 4</div>
            <div class="child">box 5</div>
        </div>
    </body>

To define a grid container, simply add a "display: grid" property to your block element. You now have a grid, so decide how many rows and columns you want. We utilize the 'grid-template-rows and 'grid-template-columns attributes to build rows and columns, and we pass values that define how far our grid items will spread through the container:

    .container{
        display: grid;
        grid-template-columns: 80px 80px;
        grid-template-rows: auto;
    }
    .child{
        justify-self: end;
    }

It is worth noting that justify-self is not the grid's only alignment attribute. In addition, we may utilize justify-content, justify-items, align-items, and align-self.

CSS Grids aid in the creation of the web page's outer layout. This allows you to create both sophisticated and responsive designs. This is why it is referred to as layout first. Flexbox is generally used to align content and move blocks. CSS grids are for 2D layouts. It is applicable to both rows and columns. Flexbox works best in a single dimension (either rows or columns).

CSS Attribute Selectors; An overview

gechiclazz — Fri, 28 Jul 2023 12:15:06 +0000

CSS Attribute Selectors; An overview.
Attribute selectors can be useful when the only difference between your targeted elements are their attributes or attribute values. Instead of introducing ids and classes, one can simply target elements by their different attributes or attribute values. Here, a straightforward example using a login form code would do:

    <body>
        <div class="wrapper">
            <div class="card">
                <form>
                <label for="email">Email</label>
                <input type="email" placeholder="Email"> 
                <label for="password">Password</label>
                <input type="passsword" placeholder="Password">
                <input type="submit" value="login">

                </form>
            </div>
        </div>
    </body>

We see that the HTML document has three input tags. In this case, we utilize the input type "submit" to target a specific input tag without impacting the others.

*{
        margin: 0;
        padding:0;
        box-sizing: border-box;
    }

    .wrapper {
        width: 100%;
        height: 100vh;
        background-color: peru;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card{
        width: 350px;
        min-height: 200px;
        padding: 30px;
        background-color: white;
        border-radius: 5px;
    }
    input{
        width: 100%;
        height: 35px;
        margin: 5px 0px 12px;
        padding-left: 10px;
    }
    input[type="submit"]{
        background-color: peru;
        border: none;
        color: white;
    }

An equality sign and the value of the attribute "submit" enclosed in quotation marks are used to target the input type submit. The type attribute, which is enclosed in square brackets and is now a property, is also used. We discover that the input box with the value log in the HTML document bears the specification in the CSS file when the HTML page is refreshed in the browser.

This is particularly helpful; were there are so many input tags in one html file and we want to bypass the arduous task of attaching a class or id to each tag. There are other attribute selectors that could be classified as substring selectors as they match specifically inside the value of the attribute. For instance we could have paragraph tags with title attributes:

     <p title="this is a paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia repellendus sapiente, repellat quibusdam cumque </p>
        <p title="a paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia repellendus sapiente, repellat quibusdam cumque </p>
        <p title="paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia repellendus sapiente, repellat quibusdam cumque </p>
        <p title="something">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia repellendus sapiente, repellat quibusdam cumque </p>
        <p title="you know">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia repellendus sapiente, repellat quibusdam cumque </p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia repellendus sapiente, repellat quibusdam cumque </p>

We may wish to select only paragraphs with the value of the attribute starting with the word paragraph. The CSS target code would appear thus:

      p[title^="paragraph"]{

    }

Note the caret symbol before the equality sign; only paragraphs with value starting with the word paragraph would be affected by CSS styling. If we wanted to select paragraphs ending with the word paragraph, the code would appear thus:

     p[title$="paragraph"]{
    }

Note the dollar sign symbol before the equality sign. Any word or letter could be used in selecting or matching during styling. For instance we want to style only paragraphs with the the letter “o” in the value of their attribute; the code would appear thus:

       p[title*="paragraph"]{
    }

Observe the asterisk symbol before the equality sign. Obviously CSS attribute selectors are an advanced way of matching or targeting elements for styling in case of similar multiple elements in a document.

How To Design A Login Form

gechiclazz — Fri, 21 Jul 2023 14:17:37 +0000

The "login form" will be the main topic of this article's examination of HTML forms. We will also discuss some CSS styling while doing this. The coding used to create this form used Google fonts and box icons, which is why the second link in the HTML document's header section and the imported URL in the CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <form action="">
            <h1>Login</h1>
            <div class="input-box">
                <input type="text" placeholder="username"
                required><i class="bx bxs-user"></i>
            </div>
            <div class="input-box">
                <input type="password" placeholder="password" required><i class="bx bxs-lock-alt"></i>
            </div>
<div class="remember-forgot">
    <label><input type="checkbox">Remember me</label>
    <a href="#">forgot password?</a>
</div>
<button type="submit" class="btn">login</button>
<div class="register-link">
    <p>Don't have an account?<a href="#">Register</a></p>
</div>
        </form>
    </div>

</body>
</html>

The link to the CSS and the link for the box icons are included in the head tag as is to be expected. In order to potentially make decorating easier, the block-level element "div>" (parent div) with a class of "wrapper" was used in this form as a container for the form. Every HTML form starts with a form tag that, as can be seen in the code, has an action property that specifies the form's destination when it is submitted.

The placeholder element ensures that the text in the username and password input boxes stays in the box until the text is entered, and the "required" tag ensures that the form cannot be submitted without the required fields being filled in. The label for the checkbox input type has the text "remember me" and a hyperlink that reads "forgot password" that is included in a div with the class "remember-forgot".

The submit button type, which is labeled "login" on the form, is a very significant component of it. Last but not least, there is the hyperlink "register" that is linked to the "don't have an account?" query. A form closing tag and a div closing tag are used to close the form.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: url(img.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}
.wrapper{
    width: 420px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    color: #fff;
    border-radius: 10px;
    padding: 30px 40px;
}
.wrapper h1 {
    font-size: 36px;
    text-align: center;
}
.wrapper .input-box {
    position: relative;
    width: 100%;
    height: 50px;
    margin: 30px 0;
}
.input-box input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    border: 2px solid rgba(255, 255, 255, .2);
    border-radius: 40px;
    font-size: 16px;
    color: #fff;
    padding: 20px 45px 20px 20px;
}
.input-box input:placeholder {
    color: #fff;
}
.input-box i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
}
.wrapper .remember-forgot {
    display: flex;
    justify-content: space-between;
    font-size: 14.5px;
    margin: -15px 0 15px;
}
.remember-forgot label input {
    accent-color: #fff;
    margin-right: 3px;
}
.remember-forgot a {
    color: #fff;
    text-decoration: none;
}
.remember-forgot a:hover {
    text-decoration: underline;
}
.wrapper .btn {
     width: 100%;
     height: 45px;
     background: #fff;
     border: none;
     outline: none;
     border-radius: 40px;
     box-shadow: 0 0 10px rgba(0, 0, 0, .1);
     cursor: pointer;
     font-size: 16px;
     color: #333;
     font-weight:600; 
}
.wrapper .register-link {
    font-size: 14.5px;
    text-align: center;
    margin: 20px 0 15px;
}
.register-link p a{
    color:#fff;
    text-decoration: none;
}
.register-link p a:hover {
    text-decoration: underline;
}

This login form makes use of external styling, and a separate CSS file is created. The CSS document begins with the imported URL for the Google fonts which merges the file with the styling done on the CSS document.

The universal selector(*), which selects everything on the page, comes next, then targeting the body, which styles all of the page's content. The class name (.wrapper), which has a full stop in front of it, is used to target the parent div. It should be observed that the CSS targets all elements having a "class" in this manner for style. Also, note that the parent tag is targeted before the inner tag as specified in the HTML document.

Basic Structure of HTML

gechiclazz — Fri, 14 Jul 2023 13:17:42 +0000

Hyper Text Markup Language(HTML) is in my candid opinion a very straightforward markup language. As a beginner programmer, I can not really boast of having encountered a variety of programming languages (though HTML is a markup language meaning it is rendered by the browser), let's take a look at its structure which literally spells out itself.

The structure of HTML begins with a “document type declaration” which is usually specified first. This tag has no closing tag and is not visible on the web page but it helps to define the document to the browser and the developer as an HTML document. This is then followed by the opening html tag which is stated as it may include a language attribute, to specify language preference, hence it will look like this .

Next up on the basic structure, we will have the Head tag which is stated

. It is within this head tag that the title tag is found, which specifies the name which the developer chooses to attach to the document in the browser, thus it will be in this format page title after which the head tag closes thus . Also found within the head tag is the meta tag which gives information about the HTML document. Not to be outdone in importance, we have the body tag which is the visible part of the HTML document. It includes tags and any visible element that appears on the browser.

The HTML document is then ended by the Html closing tag, to complement the opening html tag which comes after the document declaration.

 <!DOCTYPE html>
    <html lang="en">
      <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
      </head>
      <body>
          <header>
              <img src="gechi.jpg">
              <h1 id="harold">free pik</h1>
              <ul>
                  <li>vectors</li>
                  <li>photos</li>
                  <li>Ai images</li>
                  <li>Icons</li>
                  <li>Videos</li>
                  <li>PSD</li>
                  <li>3D</li>
                  <li>Fonts</li>
                  <li>Categories</li>
              </ul>
          </header>
      </body>
    </html>

My experience learning code for the first time

gechiclazz — Tue, 04 Jul 2023 14:19:53 +0000

I got into web development because I wanted to write technical articles in the information technology sphere. When I investigated the various facets of technology, I discovered that my natural abilities were best suited for technical writing, but if I didn't learn to code, what kind of technical writer would I be? This, together with my enthusiasm for data science, motivates me to learn how to code.

In retrospect, one might say I found writing code intellectually intriguing and sapping as well. Before I experienced code I expected to be met with a lot of statistical stuff and math, which I must say is not my strongest suit. Encountering Hyper Text Markup Language(HTML), I found myself dealing with symbols to specify tags; now this is on the intriguing side. On the sapping aspect, the more I wrote code, the lesser I could comprehend the last code forcing me back and forth between the texts.

Another highlight of this magnificent experience was the Integrated Development Environment (IDE) I was using. As a novice coder, I found the auto-completion of tags and suggestions in between lines of code to be really helpful in the Visual Studio Code editor (VS CODE).

There are always two sides to every coin and in as much as I have found coding to be broad, I can say with full confidence that it is a project worth being embarked upon.