Search for a command to run...
I am a self-taught web developer from the world of system admin. I love writing, running and making visually appearing web applications. I like to surrounded by computers, gigs, great ideas, and families.
What do you for your earning ?? Do you rely on earning for yourself only by your self taught coding ??
I do need to support my family, but I am now in the process of self-taught learning, self-reflection period.
Yes, I guess so, what UI kit you recommend? but I guess there are still worthy to do it (at least once) from the ground up.
Thanks, Lucy. My prospect in this article is how much we can lean on a framework without using too much customization, turns out in the real world, we still need CSS.
Writing React Test with React recommend libraries - Jest & Testing Library for React Intermediate users. Please Note In this article, I will explore more advanced concepts in React Testing, I hope you find them helpful for your situations. If you ar...
Write React Test with react recommend libraries — Jest & React Testing Library for a complete beginner. From https://reactjs.org/docs/test-utils.html#overview This article is intended to who just start to learn React and wonder how to write some s...
As a #CodeNewbie, I usually don't care how I solved a coding challenge as long as I am getting the result (maybe I do care a bit about elegance, cleanness of the codes). Until one day, I saw the differences between my code and my teammates' code: C...
I am a junior web developer recently learned Bootstrap 4 and try to explore the possibility of the framework in a real world frontend project.
Below are how I have accomplished this project and what conclusion I came out of it.
At first, I go to GetBootstrap.com to download the latest version of Bootstrap Source Files. (It is V.4.2.1), unzip it, and I saw the following files inside the folder. (There are many sub-folders and files I have omitted).
bootstrap-4.2.1 tree -L 2
.
├── CNAME
├── CODE_OF_CONDUCT.md
├── ...
├── build
│ ├── banner.js
│ ├── ...
│ └── vnu-jar.js
├── composer.json
├── dist
│ ├── css
│ └── js
├── js
│ ├── dist
│ ├── src
│ └── tests
├── nuget
├── package-lock.json
├── package.js
├── package.json
├── scss
│ ├── _alert.scss
│ ├── _badge.scss
│ ├── _breadcrumb.scss
│ ├── _button-group.scss
│ ├── ...
└── site
├── _data
├── ...
└── sw.js
17 directories, 67 files
For my purpose, I only focus on one major folder - ./scss, because I will compile my own version of CSS through Sass. I copied the entire ./scss folder to my project folder, below are my project folder structure.
➜ clone-microverse git:(development) tree
.
├── [1.0K] LICENSE
├── [ 736] README.md
├── [ 224] assets
│ ├── [ 128] bootstrap
│ │ └── [1.4K] scss
│ │ ├── [1.1K] _alert.scss
│ │ ├── [1.0K] _badge.scss
│ │ ├── [1.2K] ...
│ │ ├── [ 920] bootstrap.scss
│ │ ├── [1.0K] mixins
│ │ └── [ 576] utilities
│ ├── [ 128] css
│ │ ├── [438K] custom.css
│ │ └── [452K] custom.map
│ ├── [2.0K] images
│ │ ├── [9.8K] 1-r-kn-gdqsl-5-lie-3-l-r-7-j-n-0-a-zq-2-x.png
│ │ ├── [9.5K] 2000-px-stack-overflow-logo-svg.png
│ │ ├── ...
│ └── [ 128] scss
│ ├── [ 27K] _style.scss
│ └── [1.2K] custom.scss
└── [ 48K] index.html
7 directories, 47 files
There are 2 /scss folders in this project, one is ./asset/bootstrap/scss (from Bootstrap source files) and another one is ./asset/scss (for me to write customized code inside), and the output folder is ./asset/css (Where my HTML will refer link to).
For Sass compiler, I use Scout-App to help, it is a Sass GUI so it is very straightforward and easy to set up.
Once I finish the project setup, I start my coding in HTML & Sass files.
Base on Bootstrap Official Documentation, I created a custom.scss file to add my customized elements and bootstrap base file together.
// Custom.scss
// Option A: Include all of Bootstrap
/* -------begin customization-------- */
$theme-colors: (primary: #6f23ff,
secondary: #ffd540);
:root {
--dusk: #3e396b;
--very-light-blue: #f8faff;
--purplish-blue: rgb(111, 35, 255);
--tealish: rgb(65, 211, 189);
--light-tan: #f9f1ae;
--padding-sm: calc((100vw - 540px) / 2);
--padding-md: calc((100vw - 720px) / 2);
--padding-lg: calc((100vw - 960px) / 2);
--padding-xl: calc((100vw - 1140px) / 2);
--oPadding: calc(0.16 * 100vw);
--oHeight: calc(0.16 * (100vw - var(--padding-xl)));
--oHalfHeight: calc(0.16 * (50vw -var(--padding-xl)));
}
/* -------end customization-------- */
/* import Bootstrap to set the changes! */
@import "../bootstrap/scss/bootstrap.scss";
/* ----------- custom font import ------------ */
@import url("https://fonts.googleapis.com/css?family=Domine:400,700|Maven+Pro:400,500,700,900|Montserrat:400,500,600,700,900&display=swap");
/* ------------ Self-styling -------------- */
@import "./style";
I used "Option A" - to include all the bootstrap components in this project, put all self-styling customization into a separated file ./style.scss, Sass will compile all sass files into one big giant css output to ./asset/css/custom.css, which I
refer it back in my index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./assets/css/custom.css" type="text/css" />
<title>clone-Microverse - Online Coding School</title>
</head>
So far all the steps above are very clear and easy to follow ( I finish them in about an hour), but what coming in next are out of my calculation.
I spent the first few hours trying to re-create the navigation bar and landing page by myself. The more I tried, the more I found it is hard and complex. I tried to utilize more bootstrap 4 classes and less customize CSS, but it seemed impossible.
The original website looks pretty slick and stylish, isn't it? Yes, but the price is very specified and complex frontend code.
I finally gave it up and try to look at the original website's code to see how they actually come together, the result is shocking - there are more stacks or layers to make up one component than I originally thought, there are more custom CSS than use Bootstrap 4 class directly, they intend to use more #id rather than class for specificity of CSS style. Below are a peek on the code -
# Index.html
<div id="homepage" class="row bg-primary">
<div class="content">
<div id="homepage-navbar-container" class="container-fluid p-0">
<nav id="homepage-navbar" class="navbar navbar-expand-lg w-100">
<div class="container">
<a href="#" class="navbar-band logo">microverse</a>
....
<div id="navbarToggler"
class="collapse navbar-collapse w-100 align-items-baseline">
<ul class="nav navbar-nav w-100 justify-content-end">
<li class="nav-item pr-3">
<a
class="nav-link font-weight-bold text-white text-capitalize"
href="#"
>curriculum</a
>
</li>
\\ _style.scss
#homepage-header {
margin-top: 163px;
position: relative;
z-index: 105;
.head-line {
font-family: "Domine", serif;
font-size: 3rem;
font-weight: bold;
line-height: 1.27;
}
.head-text {
font-size: 1.25rem;
line-height: 1.65;
margin-top: 15px;
margin-right: 30px;
color: #fff;
}
Because of these complexities, I spent almost one month to finish all the coding, there are some on and off time and I just do this project on my spare time, but it still overly difficult than most of the frontend project I have done before. The final finished index.html file has 1204 lines, _style.scss file has 1512 lines,
├── [1.0K] LICENSE
├── [ 736] README.md
├── [ 224] assets
│ ├── [ 128] bootstrap
│ │ └── [1.4K] scss
│ ├── [ 128] css
│ │ ├── [437K] custom.css
│ │ └── [451K] custom.map
│ └── [ 128] scss
│ ├── [ 27K] _style.scss
│ └── [1.1K] custom.scss
└── [ 48K] index.html
Finally, You can check out all the code in here. I have clone about 95% of the code from the original website, but it still took me many hours to accomplish it. I can't image how much hours I have to spend if I need to do this project from scratch.
At first, after finishing this project, I think I can answer the question I raise at the beginning now - How much Bootstrap 4 Can help for a real-world project?
Second, below are some lesson learned I got from this project -
Finally, due to the limitation of my knowledge and resources, I might do this project in a completely wrong way or an immature way, hence I got a completely wrong answer from it. But so what? I did it and write about it anyway, I definitely learn a lot from it.
There are free resource can help customize Bootstrap 4 theme too, but they seem no fit for this project, so I might try them in the next project.
I will do it again if there is a question I can't get the answer from google or any other sources, I think that is how a self-taught programmer learn to evolve in today's environment.
PS: I am open to your critiques and suggestion for this project, thanks again for you to finish this reading.
