Insight/Help On Various Topics

#1

Hi everyone. :wave: As I’ve been working on my portfolio project the past few days, I found myself coming across so many issues (naturally). I’ve been researching on my own and found a few opinions/solutions, but I’d also like some direct responses coming from fellow campers too. I’ve had these things on my mind, and it would mean a lot if I could get some thoughts/opinions/answers from all of you here in the FCC community. Novice or experienced developers–all responses are welcomed. Have at it, guys/gals. Sorry if the post is kinda long. :v:

  1. What are your thoughts on using pure CSS for styling, vs using Bootstrap?

  2. How does one make a responsive website if Bootstrap isn’t being used?

  3. What’s the “best” or most efficient way to go when displaying thumbnails of websites/apps, in my portfolio–grid layout, columns, or neither?

  • Are grid layouts mostly used for creating the whole website itself, and not used for “areas” of a website?
  1. How can I place the “full page” effect on my website?
  • For example, each section (Home, Portfolio, Contact) will fill up the browser screen when their link is selected. You would be able to access each section by just scrolling up/down, but I’m trying to get the effect where you can click on the link from the navigation bar, then the page would auto scroll to the selected section, but the browser would only show that section. I hope I’m making sense–I don’t know the technical term of this function/effect.
  1. The text in each section crashes into each other when i adjust the browser window… height issue maybe? Please help.

This is what I have so far. Code will definitely be moved around and changed–just hopefully not too much. :disappointed:

#2
  1. Both are perfectly fine, Boostrap is just quick and easy in comparison. Less work to do yourself.
  2. Many tricks to use, https://developer.mozilla.org/en-US/docs/Web/CSS/@media is one you could look at.
    3 - 5 I’m sadly not very good at frontend so I’ll leave it for someone else to answer.
#3

Thanks for the link @Logiar. I’ll be sure to take a look at it. And thanks for your opinion too–I like to hear others’ takes on CSS vs Bootstrap.

#4

  1. CSS vs Bootstrap – BS is still CSS. It’s not some different kind of animal. BS is just pre-made classes so you don’t have to re-invent the wheel. You can have a mix of both BS and custom CSS in your project. It’s not one or the other. You can use both – and save a lot of time and work.

  2. How to responsive without BS – again, if you look at BS code, the responsiveness is achieved via @media-queries. So without using BS, the answer is still the same… via @media-queries

  3. One can code the html using unordered list, or divs. And then just style the different li tags (or div tags) using CSS. The thumbnails/grids will then flow left-to-right on a wide monitor and wrap around. On a small mobile display, it will just stack up in one-column. On an iPad portrait format, you can have 2 or 3 thumbnails per row, and then it will wrap around to next line.

  4. “full page” effect – my question to you is what happens if the user’s monitor/display isn’t big enough to display that section? You don’t have control over the height of the content area because people may have sized their browser differently, may not be occupying the whole screen and just a narrow area. The best you can do is when you click on your menu section is you just scroll to the top of that section. If the display is small, then users can still scroll down and view the rest.

1 Like
#5

As to your “full page effect”, if I understand you, that is fairly trivial and should have been covered in the FCC materials before you got here. You can use and anchor tag to link to any div (for example) with and id. For example, you if you a section that is:

<div id="contact">...

then an anchor of:

<a href="#contact">Contact</a>

will target it.

Here is a simple demonstration pen. With CSS you can make a better transition and you can make a better navbar, but you get the idea.

As to your other questions:

1-2: You can use someone else’s work or do it yourself. If you do it yourself (at this point in your education) you are going to make a lot of mistakes and it is going to take you a really long time. The DIY approach is going to be a nightmare for you. Save that for later when you have more skills.

  1. BS has solutions for this. Grids can be the whole site or just sections. Or grids within grids - whatever you need. BS is one solution. CSS Grids are new. I’m really liking FlexBox. There are other libraries.
1 Like
#6

@owel Regarding my “CSS vs Bootstrap” question–I should have worded it differently. It was meant to come off as which method of styling does one prefer: using the pre-made classes of bootstrap or custom CSS. I’m aware that Bootstrap is CSS. But I appreciate your responses. All of this is still very new to me so it’s great to hear from those who have more knowledge on this material.

#7

Haha yeah… I quickly realized how much of a pain doing it this way was. Hours of researching how to make the page responsive without Bootstrap… on top of researching the best way to go about making my ideas display how I want them to… yeah putting that on hold for now. My stubbornness got the best of me.

Thanks for the clarification. I wasn’t sure if there was a ‘right’ or ‘wrong’ way with using grid layouts. FlexBox looks interesting. Thanks for mentioning that man–now I have another option to check out. :facepunch:

#8