Skip to content

Instantly share code, notes, and snippets.

View kingluddite's full-sized avatar
🎯
Focusing

Pip kingluddite

🎯
Focusing
91 followers · 7 following
View GitHub Profile
@kingluddite
kingluddite / sample.html
Created April 27, 2024 16:59
this is a sample gist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fur-tastic Grooming</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
@kingluddite
kingluddite / box-sizing.md
Created April 27, 2024 11:26
using box sizing can save you time in CSS

That's correct! In CSS, the width and height properties of an element refer only to the content area of the element, excluding padding, border, and margin. If you want to set the total width and height of an element including padding and border, you would typically use the box-sizing property.

The box-sizing property can have two values:

  1. content-box (default): This is the standard box model where the width and height properties only apply to the content area of the element, and padding, border, and margin are added on top of that.

  2. border-box: In this model, the width and height properties include padding and border, but not margin. This is often preferred as it simplifies layout calculations.

Here's an example of how you can use box-sizing:

@kingluddite
kingluddite / git-github-tutorial.md
Created April 26, 2024 14:14
Simple step by step instructions for working with Git and GitHub

Certainly! Here's a step-by-step guide on setting up a GitHub repository, cloning it to your computer, and updating files locally:

Setting up a GitHub Repository:

  1. Create a GitHub Account: If you don't already have one, go to GitHub and sign up for a free account.

  2. Create a New Repository:

    • Click on the "+" icon in the top-right corner of the GitHub interface and select "New repository."
    • Give your repository a name, add an optional description, choose whether it should be public or private, and initialize it with a README file if desired.
@kingluddite
kingluddite / netlify-diff-build-commands-per-branch.md
Created April 17, 2024 19:27
How to create different build commands per branch

Yes, in Netlify, you can indeed have different build commands per branch. This capability is particularly useful when you want to run different build processes or deploy different versions of your site depending on the branch you're working on.

Here's how you can set up different build commands per branch in Netlify:

  1. Navigate to your site settings: Log in to your Netlify account and select the site you want to configure.

  2. Go to Build & deploy settings: Once you're in the site dashboard, find the "Settings" option and click on "Build & deploy" settings.

  3. Configure build settings for each branch: Scroll down until you find the section titled "Branches". Here, you'll see a list of your branches. Click on the branch for which you want to set a custom build command.

@kingluddite
kingluddite / bootstrap-history.md
Created November 6, 2023 13:32
What is the history of Bootstrap?

What is the history of Bootstrap?

Bootstrap is a popular open-source front-end framework for building websites and web applications. It was created by Twitter and was initially known as Twitter Blueprint. Here's a brief history of Bootstrap:

  1. 2010: Twitter Blueprint - Bootstrap's predecessor, Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter. It was created to streamline and standardize the development of internal tools and projects at Twitter.

  2. August 2011: Open Sourced as Bootstrap - In August 2011, Twitter decided to release Twitter Blueprint as an open-source project under the name "Bootstrap." This marked the official launch of the Bootstrap framework.

  3. Bootstrap 2 - The second major version of Bootstrap was released in January 2012. It introduced several new features and improvements, including responsive design components and a 12-column grid system.

  4. Bootstrap 3 - In August 2013, Bootstrap 3 was released, bringing a mobile-first design approach, a flat design ae

@kingluddite
kingluddite / fed-skills.md
Created March 2, 2024 16:24
What skills do I need to be a great front end developer?

Becoming a great front-end developer requires a combination of technical skills, soft skills, and a mindset for continuous learning and improvement. Here's a breakdown of key skills:

  1. HTML (Hypertext Markup Language): Fundamental for structuring web pages. Understand semantics, accessibility principles, and best practices.

  2. CSS (Cascading Style Sheets): Mastery of CSS for styling web pages. Knowledge of CSS frameworks (e.g., Bootstrap, Foundation) and preprocessors (e.g., SASS, LESS) can be beneficial.

  3. JavaScript: Essential for adding interactivity and dynamic behavior to web pages. Proficiency in modern JavaScript frameworks/libraries such as React, Angular, or Vue.js is crucial.

  4. Responsive Design: Ability to create web pages that work well on various devices and screen sizes. Understanding CSS media queries and responsive design principles is key.

@kingluddite
kingluddite / html-boilerplate.md
Last active February 27, 2024 09:18
Basic HTML bollerplate

Basic HTML boilerplate

The basic HTML5 boilerplate code looks like this:

<html lang="en">
<head>
    <title>Your Page Title</title>
</head>
<body>
@kingluddite
kingluddite / id-vs-class.md
Created February 17, 2024 12:27
id vs class and why you should use class when possible

Let's demonstrate the difference between using IDs and classes and why classes should generally be preferred over IDs when styling elements.

Suppose we have a simple HTML structure with a title and two paragraphs, and we want to style them differently:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
@kingluddite
kingluddite / center-element-in-container.md
Created February 13, 2024 18:48
margin: auto, centering and the parent container

margin: auto, centering and the parent container

margin: auto; with respect to horizontal margin values (margin-left and margin-right) will center an element within its parent container if the parent container has a defined width.

Here's how it works:

  1. Block-level elements: By default, block-level elements like <div> occupy the full width of their parent container, so setting margin: auto; will center them horizontally within that parent container.

  2. Inline elements: Inline elements, by default, only occupy the space necessary for their content. To center them horizontally with margin: auto;, you typically need to change their display property to block or inline-block.

  3. Parent container's width: For margin: auto; to work and center an element, the parent container must have a defined width. If the parent container's width is not defined, the margin will not have any effect, and the element will appear as if it's aligned to the left.

@kingluddite
kingluddite / about.md
Last active February 10, 2024 13:43
HTML Boilerplate

Certainly! Here's an "About" HTML page for the deli using only semantic HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us - Corner Deli</title>
</head>