search

Chelfert / bscharter

bootstrap charter page for lvlup
0 stars 0 forks source link

Dev - CharterPage #1

Open Chelfert opened 3 years ago

Chelfert commented 3 years ago

OUTDATED ISSUE. SEE COMMENT BELOW.

DEV/LVLUP

With the GitHub Student Developer Pack, I installed BootStrap Studio. Bootstrap is something that I’ve seen referenced on the web a lot, but have never been exposed to it.

So what is Bootstrap?

Bootstrap studio is a web design tool that offers components to help build responsive pages. It lays out code visually so that you can see what you are changing without having to adjust the code every single time. This reduces the trial and error part of laying out a website.

Steps that I took

After installing Bootstrap Studio, I started with a new design. bshomescreen

I was offered a bunch of starter templates to help get myself started on a webpage. The one I chose included 4 pages, but I deleted one to fit my needs. templates customizepage

After creating the template, it shows you all the customization options for the selected property. I selected a “div” class and I was allowed to use a UI to customize the properties of the class. options divselection

After lots of customization, I am left with the final product... Which looks something like this. endresult

Bootstrap is nice because it allows you to dynamically change the layout of the webpage, and when you need to get a bit more technical with it, you can export the Bootstrap design and edit the source code.

Here is a link to the live webpage.

Chelfert commented 3 years ago

Resubmission for DEV/lvl-up

Test Deployment: https://bscharter.herokuapp.com

Source code: https://github.com/Chelfert/bscharter

Purpose: Explanation of the steps that I went through developing a webpage using Bootstrap.

With the use of Bootstrap I created 3 HTML files.

  1. Index.HTML
  2. about.HTML

  3. store.HTML

    When starting Bootstrap, you will be met with a few options... New Design Which allows you to create a design based off of some templates. Open Which allows you to open a .bsdesign file extension. Tutorials Which guides you through starting up a new file

I went with the "New Design" option, which led me to a page that contained a lot of templates for different needs, ranging from a store's website to a blog and even a webpage for a portfolio.

After selecting the template and customizing some properties, I exported the .bsdesign file to create individual .HTML files. Taking a look inside these files, you can see that they are already laid out in a way that makes sense and is easy to work with. Bootstrap already includes a lot of the external style sheets you would use for a webpage, which is nice because you don't have to work to find them all.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>About us - BootsOnTheWater</title>
    <meta name="description" content="Charter Company in Fort Walton Beach, Florida">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i">
</head>

Bootstrap also has built in JavaScript, CSS and HTML code so when adjusting the code, you can find what you're searching for extremely easily. For example, the Navbar is setup using CSS Flexbox layout, which is nice because it is setup using parent and child classes to be able to control large chunks of code at once. 

<nav class="navbar navbar-dark navbar-expand-lg bg-dark py-lg-4" id="mainNav">
        <div class="container"><a class="navbar-brand text-uppercase d-lg-none text-expanded" href="#">BootsOnTheWater</a><button data-toggle="collapse" data-target="#navbarResponsive" class="navbar-toggler" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item"><a class="nav-link" href="index.php">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="about.html">gallery</a></li>
                    <li class="nav-item"><a class="nav-link" href="store.html">Schedule an appointment</a></li>
                </ul>
            </div>
        </div>
    </nav>

As you can see, the nav property has an id of mainNav which encapsulates everything inside the entire Navigation bar. The container div class contains the navbar-nav class which is where the linked buttons are located. Bootstrap makes web development less stressful for those who are inexperienced with front-end development, and helps layout an optimal structure for the webpage.