Portfolio Page Help - CSS Grid instead of Bootstrap and other problems

Code Feedback
1

This is my 2nd attempt at the portfolio page. I am trying to use CSS Grid instead of Bootstrap.

  1. I have tried to put my portfolio thumbnails in rows (2 per row) but its not working
  2. I used position: sticky; to keep my navbar at the top, but as I worked on other parts of the page it now scrolls with the rest of the page. What did I do wrong?
  3. I am having trouble keeping the heading and links in my navbar to line up. Do I just keep playing with the padding?
  4. Should I abandon CSS grid until I am more experienced? Or is it good to learning it from the start?

Any other tips would be great.

  • I haven’t stated on the contact or footer as I am trying to solve these other issues first.
2

2: My personal CSS cheatsheet (FCC condensed waaay down):

4: No, CSS Grid is the future. Bootstrap is the past.

1: Grid-template-areas (covered in the CSS cheatsheet):
“nav nav nav”
“intro intro intro”
“proj1 proj2 proj3”
“proj4 proj5 proj6”
“footer footer footer”
for desktop viewport widths,
and perhaps:
“nav”
“intro”
“proj1”
“proj2”
“…”
“proj6”
“footer”
for mobile viewports.

3: https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

3

I’m not sure how you can confidently make this statement. CSSGrid is just the layout. Unlike Bootstrap, there’s no styling for forms, modals, cards, navigation bars, menus…the list goes on. CSS Grid doesn’t give you client-side form validation, a standard look and feel to alerts and buttons, etc.

If all you want is a layout and you plan on designing all your own buttons and writing thousands of lines of css code to style your entire site from top to bottom, then that’s great. For the rest of us, Bootstrap is maybe the better, faster, more consistent way to go.

Telling people to use CSS grid over Bootstrap is like telling somebody to use that fancy new Intel chip sitting on the table rather than their computer. The chip alone isn’t going to get you nearly as much work done as the computer, but “it’s the future”. :stuck_out_tongue:

Maybe you should be comparing CSS Grid to Flexbox instead? After all, those are both layout modules whereas Bootstrap is a framework.

4

Sadly I can’t help you with the CSS Grid specific questions (I’ve been meaning to start working with it but I just haven’t had a chance yet). By the way I’m getting a 404 error from you codepen link.

4.) I’d say it’s definitely worth keeping in your wheelhouse, BUT I’d also 100% advise you to learn plain old CSS along with Grid and even Bootstrap. As @JaceyBennett mentioned, Grid is strictly for manipulating your layout (in amazing ways), Bootstrap meanwhile will cut your production time down in a lot of ways (unless you end up reworking all the built-in styles). I personally do like to style everything myself but for responsive functionality I prefer something like flexbox (or CSS Grid whenever I get around to actually trying it out :laughing:). As for functionality beyond that, well that depends on what you’re building and what you’re building it with.

1 Like
5

I was simplifying for someone whose comment was that of a newbie, but you’re right. There was definitely hyperbole in my response. I do believe that Grid > Flexbox, and to quote from bootstrap’s own site: Use our powerful mobile-first flexbox grid - they say it’s “built with flexbox.” So, perhaps Bootstrap 5 is reorganized based on Grid, but the whole idea of how it works under the hood at different viewport widths is that of flexbox, so I doubt that will happen. I get the point about consistent styling, but then again - recycling code is kinda the point of stylesheets - a Bootstrap user is just doing it 0 times instead of 1, so O(1) either way. I still maintain that the use of frameworks is a trap, not a shortcut, for the new learner, and the removal of Bootstrap’s mention from the first project example is an improvement in the FCC curriculum. I also would never suggest that Bootstrap should be removed from the curriculum. It is too important to the enterprise ecosystem, precisely for the reasons you enumeratred. But can we agree that Bootstrap was initially built to solve a specific problem, and that problem has now been solved more generally and elegantly by CSS Grid? Without hyperbole, that was what I meant.

3 Likes
6

I have to say, as a back-end developer and somebody with zero artistic talent, Bootstrap changed my life. Suddenly, I was able to build beautiful front ends that were mobile ready and looked really nice.

I can do photo manipulation and back in the day I built real buttons in Fireworks (way before Macromedia was bought by Adobe), but I never found any joy in it; only tedium. For me, it was all about the PHP & MySQL and I just needed a way to show off my code in a pretty way that people would like. Bootstrap did that for me and I continue to use it every day.

I feel like most of the people on this site are not back-end developers looking to improve their JavaScript game, so maybe I can offer a unique perspective.

1 Like
7

I very much agree with that statement. With the introduction of CSS Grid I find very little use for Bootstrap.

Grid not only introduces layout but also responsiveness in a very easy to understand way and It does not clutter the HTML. Combined with flexbox Grid is, in my opinion, the future. Positions, margins, paddings… all were reduced with Grid wherever website I use it.

I understand that Bootstrap has been a great tool for many developers to produce quick and nice websites, it also feels like mass producing websites and it makes me question the future of web development even though I have only just started.

Every year web constructors like WordPress and Wix get better and provide more functionality for people and businesses wanting an easy to maintain website. Does that mean less work for us? I think it does.

As for me, a beginner, I will try to stand out being able to construct tailor-made, from the ground up material. Although I understand companies want quick development, the counter coin is many other thousands of people can use bootstrap right now, and with the easier access to learning coding and better frameworks, it might only get more competitive in the future. I imagine backend won’t be affected much by this “accessibility revolution” But for the rest out there it might be good to learn how to create our own buttons and little things before our job can be done with a couple of clicks.

And shouldn’t be us driving the change in the web? If we can create personalized, awesome websites for a client, other clients will want the same and will have to pay for it. If we keep giving them the same everyone gets(Bootstrap) they’ll just pay the least expensive and move on (to another country perhaps, there seems to be quite some worry about the decentralisation of web development to save costs).

Anyway, food for thought.

Also, the Codepen is gone, I normally use position: float; top: 0; for navbars. And they don’t need to be inside your grid when you take an element outside of the current flow of the page, when you take it out of the grid basically.

2 Likes
8

I taught myself to program using an Apple IIgs in 1987 based on Richard Pryor’s role in Superman III. I went to school for AI and Neuroscience, and liked RealBasic for the exact same reasons that you like Bootstrap - I like writing application logic, not fiddling with precisely-defined UI. At my heart, I think I am a “backend-ish guy” myself, since I last programmed seriously on the desktop/university network/mySQL web DB level. I’m throwing myself back into learning in order to execute a very specific idea, and from there—who knows? As a learner, I get excited by pretty much each new technology to which I’m introduced, since I can see the utility. I think if I weren’t an army of one, I’d get more excited about Bootstrap. But, I very much want pixel-level control over all the devices my consumers will use [my artistic talent being a “truthy” value :slight_smile: ], which is why learning things like Sassy CSS excites me. In general, I look at what has come out in the last 18 months - new tech and updated versions, and I get really excited. There are so many people who have done so much work that I feel like Newton standing on the shoulders of giants. Had I started learning web development three years ago, my tune on Bootstrap and jQuery would be entirely different, I’m sure.

1 Like