13
Replies
Question #2 - I also did some research on the percentage of Word Press sites and bootstrap sites. It seems that 40% of websites are done in Word Press. Do you all find that to be true.
By @beng2000
It's not surprising to be honest, anything that's free will be used more than something that is not. WordPress not only serves the amateur developer market but also the professional developer market, so add the 2 together and you arrive at a high number..........similar to Bootstrap. Both probably wouldn't be as popular if you had to pay a fee to use them.
Having said that l think you have to make a decision...........if youre going to use WordPress then focus on it fully and get to know it, inside out, explore how it works rather than just relying on drag/drop/click/select components, plugins. There's still a good appetite for WordPress developers in the jobs market so it's not an entirely waste of time getting to know it rather well.
Question #3 - What would be the best way to code a website without using bootstrap or Wordpress
By @beng2000
Manually, you can't beat coding manually but it will take years of practice. It's satisfying and fulfilling to know you're in total control and will open up better opportunities if youre going to be in this game for the long haul. Some will have the passion to want to understand what it is they are actually doing, others won't and will take the quick fix route such as using libraries and frameworks. It's your choice, short term gain versus long term return and better opportunities.
I'd appreciate any answers.
By @beng2000
This sounds to me to be a waste of time as putting the telephone no. and email on the same line as the main navigation will take up too much space unless you only have a few navigation links or are intending to deploy a hamburger navigation as the starting default.
Having said that have you explored using the Bootstrap utility classes for flexbox positioning.....which will space out your containers so they can be positioned left, centre, right.
By @osgood_This sounds to me to be a waste of time as putting the telephone no. and email on the same line as the main navigation will take up too much space....
========
Not if you're creative about it.
For economy of space, I put the brand above the navbar and use space-saving icons with tooltips for search, mail list, contact, phone & social media. There's more than ample space for icons so it works well on small & large devices.
https://icons.getbootstrap.com/
Likewise, text based contact info is in the footer and appears on every page.
Not if you're creative about it.
For economy of space, I put the brand above the navbar and use space-saving icons with tooltips for search, mail list, contact, phone & social media. There's more than ample space for icons so it works well on small & large devices.
https://icons.getbootstrap.com/
Likewise, text based contact info is in the footer and appears on every page.
By @Nancy OShea
I agree but you have had to move the branding to another location, by default Bootstrap doesnt do that, which lve always thought a bit dumb myself.. To assume every company has six or seven characters in the name or tiny logo is a hideous oversight and not very well thought through.
And l will just add l was commenting on how the OP suggested they wanted to layout the structure, branding left, nav center, tel/email right, not how you have executed it which seems far more achievable to me.
Moving the branding to a more prominent location was a design decision from the start. Bootstrap can do whatever the front-end developer needs it to do if they take time to learn it.
The OP said his sites are too "cookie cutter." I say that's not a platform problem; that's a people problem.
By @Nancy OShea
Unless you have very few 'open' links then its always going to be a problem if you try and put the branding on the same level. A solution is to use a burger of some kind from the off, which seems to be popular............whatever your tipple, but think about it. The Bootstrap nav examples are not realistic, they are more done to make it look nice rather than usefully functional. They only show max 4 top level links and a silly amount of characters for the branding text - Navbar.
Well if its looking like a cookie-cutter then they are not altering much of the default styling/colors and if they do - well it kind of defeats the objective of using a framework as you might as well write your own.
Well if its looking like a cookie-cutter then they are not altering much of the default styling/colors and if they do - well it kind of defeats the objective of using a framework as you might as well write your own.
By @osgood_
Moving the branding to a more prominent location was a design decision from the start. Bootstrap can do whatever the front-end developer needs it to do if they take time to learn it.
The OP said his sites are too "cookie cutter." I say that's not a platform problem; that's a people problem.
By @Nancy OShea
Adding to what @osgood_ has said about centering the navigation items, copy and paste the following code into a new document.
<!doctype html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<header class="">
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg justify-content-between">
<a class="navbar-brand me-auto ms-auto" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbar1_collapse">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
<div class="navbar-nav justify-content-end d-none d-lg-flex ms-md-auto">
<a class="nav-item nav-link" href="#"><i class="fa fa-slack"></i></a>
<a class="nav-item nav-link" href="#"><i class="fa fa-twitter"></i></a>
<a class="nav-item nav-link" href="#"><i class="fa fa-facebook"></i></a>
</div>
</nav>
</div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
This the result:
AdChoices