General Programming Question

First, this post might not be appropriate for the freeCodeCamp forums because it asks a question about programming in general. If it is inappropriate and beyond the intended scope of these forums, please tell me.

Next, if the question is not too far afield for these forums, I might have it posted in the wrong topic. If so, please tell me where it should be posted.

I’m trying to be good citizen and to use the resources appropriately.


The screen above will be incorporated into a website. The purpose of the website is to display family history information. The screen was created by the HTML code shown below and the CSS files it links to.

As you can see, each of the 9 major boxes is coded explicitly in separate div tags. Furthermore, each box is styled in its own CSS file. Each box is essentially the same except for content and positioning onscreen. The number of boxes will be determined by the number of generations to be displayed which will vary. For every 9 generations a separate screen will be needed.

It seems to me that it should be possible to code the styling in a single CSS file and write code that will determine how many generations of data are present and figure out how many screens will be needed them generate the html or other code to display them. In one family line I have 24 generations of names and associated information. There will be a family line for every family contributing to the genealogy. Coding each of those explicitly can be done but does not appropriately exploit the power of using computers.

I’m just beginning this web development project. I have an overall website structure planned and have coded the CSS to style parts of screens and whole screens and the html to display what you see. I do not yet have a database that stores the information. I plan to use javascript - and possibly REACT - to create the interactive website.

If I were doing this like I did back in my mainframe coding days, I’d first design the data structures and stores (files) then create an algorithm that would read the files based on user responses and format screens and display them. It’s been over 50 years since I was a programmer. I’m a bit rusty.

My first instinct tells me that I will need to have algorithms that build screen content from data, styling, and markup, but I need an example to follow to break through the conceptual fog my head is now in.

Can someone give me guidance on how to use the basic building block elements then reuse them to create the pages that will be displayed?

tia

<!DOCTYPE html>
<html lang="en">
  <head>  <!--  BEGINNING OF HEAD SECTION  -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <title>
        Surname Line
      </title>

      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Birthstone">
      
      <link
      rel="stylesheet"
      href="/Styles/line-1surname-page.css">

      <link
      rel="stylesheet"
      href="/Styles/line-2surname-masthead.css">

      <link
      rel="stylesheet"
      href="/Styles/line-3surname.css">

      <link
      rel="stylesheet"
      href="/Styles/line-page-number.css">

      <link
      rel="stylesheet"
      href="/Styles/line-grid-container.css">

      <link
      rel="stylesheet"
      href="/Styles/line-gen1.css">

      <link
      rel="stylesheet"
      href="/Styles/line-gen2.css">

      <link
      rel="stylesheet"
      href="/Styles/line-gen3.css">

      <link
      rel="stylesheet"
      href="/Styles/line-gen4.css">

      <link
      rel="stylesheet"
      href="/Styles/line-gen5.css">

      <link
      rel="stylesheet"
      href="/Styles/line-gen6.css">

      <link
      rel="stylesheet"
      href="/Styles/line-gen7.css">

      <link
      rel="stylesheet"
      href="/Styles/line-gen8.css">

      <link
      rel="stylesheet"
      href="/Styles/line-gen9.css">

      <link
      rel="stylesheet"
      href="/Styles/line-page-end.css">

   

    <style>     
          /* ALL STYLING IS IN EXTERNAL CSS FILES LINKED ABOVE
          */
    </style>

  </head> <!--    END OF HEAD SECTION -->
  

  <body>  <!--  BEGINNING OF BODY SECTION 
                (PAGE CONTENT) -->

      <div class="line-1surname-page">

          <div class="line-2surname-masthead">
         
            <div class="line-3surname">
               Hutchins Paternal Line
            </div>
          </div>

          <div class="line-page-number">
            Page:
          </div>

          <div class="line-grid-container">

            <div class="line-gen1">
                Name:<br>
                LDS ID:<br>
                Born:<br>
                Died:<br>
                Married: spouse name and place of marriage<br>
                Children: names preceded by birth order number<br>
                Children: names preceded by birth order number<br>
                
            </div>
   
            <div class="line-gen2"> 
              Name & LDS ID:<br>
                Born:<br>
                Died:<br>
                Married: spouse name and place of marriage<br>
                Children: names preceded by birth order number           
            </div>

            <div class="line-gen3">
              Name & LDS ID:<br>
              Born:<br>
              Died:<br>
              Married: spouse name and place of marriage<br>
              Children: names preceded by birth order number3
            </div>
   
            <div class="line-gen4">
              Name & LDS ID:<br>
              Born:<br>
              Died:<br>
              Married: spouse name and place of marriage<br>
              Children: names preceded by birth order number
            </div>

            <div class="line-gen5">
              Name & LDS ID:<br>
                Born:<br>
                Died:<br>
                Married: spouse name and place of marriage<br>
                Children: names preceded by birth order number
            </div>

            <div class="line-gen6">
              Name & LDS ID:<br>
              Born:<br>
              Died:<br>
              Married: spouse name and place of marriage<br>
              Children: names preceded by birth order number
            </div>
   
            <div class="line-gen7"> 
              Name & LDS ID:<br>
                Born:<br>
                Died:<br>
                Married: spouse name and place of marriage<br>
                Children: names preceded by birth order number
            </div>

            <div class="line-gen8"> 
              Name & LDS ID:<br>
                Born:<br>
                Died:<br>
                Married: spouse name and place of marriage<br>
                Children: names preceded by birth order number8
            </div>

            <div class="line-gen9"> 
              Name & LDS ID:<br>
              Born:<br>
              Died:<br>
              Married: spouse name and place of marriage<br>
              Children: names preceded by birth order number
            </div>

          </div> <!-- END of .line-grid-container -->
        
        <div class="line-page-end">
          End/Next Page
        </div>
          
      </div>  <!--END of .surname-line-page -->
    
        

  </body> <!--  END OF BODY SECTION 
                (END OF PAGE CONTENT)  -->


</html>
~~~

When I had started building project, I never really got CSS and felt it very hard to use.

Later I figured out with below techniques, do checkout below 2 posts from my side which will help you to build above complex web page

  1. From CSS hater to CSS super confident with below techniques ( share your thoughts )

  2. How to use CSS step by step to build webpage based on design

separate files are excessive, you could use classes, and apply them to each box, so that they have all the same styling

when you say “separate screen” do you mean scrolling down, or a different page?
if you go beyond only CSS and HTML this can be done programmatically, change the content of the page at the click of a button

if you work through the freeCodeCamp curriculum you will learn how to do it


I changed my approach to formatting this page. Instead of styling each of the 9 boxes (all identical except for position on page), I wrote a single CSS style for the box layout. To get the box to display in 3 rows in 3 columns I used a grid container, as shown in the CSS and HTML below.

  1. I’ve looked until I no longer have fresh eyes. I cannot see my mistake that causes the boxes to appear with what appears to be a huge left margin making them shift outside the page frame styling. What am I missing?
  2. In the HTML div where each of the 9 boxes are assigned values (1, 2, 3 …9) to display within them, I want to display several lines of content (name, birthdate, birthplace, marriage info, death date, death place, burial place, children names) that is the same in each box. Is it possible to define that content once within a tag then refer to the tag by name? Conceptually, the screen is an array with 3 rows in 3 columns showing 9 elements with each element having constant text displayed. How should this be coded using just CSS and HTML? Can I create a CSS style (eg .line-box-contents) that has the values with breaks to create them on separate lines? Apparently I can’t form a search argument that will get me to a solution.

tia

.line-grid-container
{
  display: grid;
  grid-template-columns: repeat(3, 325px);
  grid-template-rows: repeat(3, 140px);
}

.line-grid-container > div
{
  border-style: ridge;
  border-width: 1.5px;
  border-radius: 5px;
  border-color: brown;
  background-color: rgb(248, 244, 244);
  font-family: "Birthstone";
  font-weight: 700;
  font-size: 14.5px;
  padding-left: 5px;
  text-align: left;
  margin-top: 32px;
  margin-left: 40px;
  grid-gap: 10px;
  padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
  <head>  <!--  BEGINNING OF HEAD SECTION  -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <title>
        Surname Line
      </title>

      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Birthstone">
      
      <link
      rel="stylesheet"
      href="/Styles/line-1surname-page.css">

      <link
      rel="stylesheet"
      href="/Styles/line-2surname-masthead.css">

      <link
      rel="stylesheet"
      href="/Styles/line-3surname.css">

      <link
      rel="stylesheet"
      href="/Styles/line-page-number.css">

      <link
      rel="stylesheet"
      href="/Styles/line-grid-container.css">

      <link
      rel="stylesheet"
      href="/Styles/line-gen-box.css">

      <link
      rel="stylesheet"
      href="/Styles/line-page-end.css">

   

    <style>     
          /* ALL STYLING IS IN EXTERNAL CSS FILES LINKED ABOVE
          */
    </style>

  </head> <!--    END OF HEAD SECTION -->
  

  <body>  <!--  BEGINNING OF BODY SECTION 
                (PAGE CONTENT) -->

      <div class="line-1surname-page">
          <div class="line-2surname-masthead">
            <div class="line-3surname">
               Hutchins Paternal Line
            </div>
          <div class="line-page-number">
            Page:
          </div>

          <div class="line-grid-container">
              <div class="line-gen-box">l</div>
              <div class="line-gen-box">2</div>
              <div class="line-gen-box">3</div>  
              <div class="line-gen-box">4</div>
              <div class="line-gen-box">5</div>
              <div class="line-gen-box">6</div>
              <div class="line-gen-box">7</div>
              <div class="line-gen-box">8</div>
              <div class="line-gen-box">9</div>
            </div>  <!--  END of .line-grid-container -->

            <div class="line-page-end">
              End of Line
            </div>
      </div>  <!--END of .surname-line-page -->
    
        

  </body> <!--  END OF BODY SECTION 
                (END OF PAGE CONTENT)  -->


</html>

I can’t reproduce the issue with the code you shared. Can you reproduce the issue with only the code you shared?

Hi there,

Can you look through some of your posts like this one and make sure you have responded back to the people who replied to you to confirm that you have solved the issue (or to let them know if you have moved on?) In addition to showing the person who responded to you that you appreciate their taking the time to help you it will be also helpful to others reading these posts in the future to know what is the conclusion to the question(s) you asked.

Please also consider marking the post that helped you solve the topic as the solution (there is a checkmark available for each reply for this purpose and this helps us know if your topic is considered closed or not).

Thanks so much for taking this advice into consideration.

All the best.

2 Likes

I moved on from this question.

I did resolve the issue but I did so by starting a completely new project to start afresh and shed mental block. This worked.

I don’t know what I did differently in the fresh approach; so I cannot say what I did, exactly, to fix the issue. I still don’t know what to do to make the grid-container align the first column where I wanted it.

that’s fair. I was just following up to make sure you’re aware that the topic was sill open and people who responded to you may wonder why they never heard anything back.
(Hopefully you’ll follow up on topics even if you decide to not resolve the original question)

1 Like

I’ve tried to do that but sometimes fail. I’ll work on it because I truly do appreciate the willingness of others to spend time helping me and others.

1 Like

Unless you have a good reason to hardcode the column widths, grid is perfectly responsive and will make layouts a breeze. Start by using the fr (fractional) unit, e.g.:

.container {   
   display: grid;
   grid-template-columns: repeat(3, 1fr); /* Example: 3 equal columns */
   ...
}

Other relevant grid properties to explore include: justify-items, align-items, justify-content, align-content, height.

Have you ever tried Grid Garden? It’s a very quick interactive grid tutorial, I highly recommend!

1 Like

Thank you for that insight and those suggestsions. I shall definitely follow up on them.

My reason for explcitly coding to achieve results is to understand basics before adopting more advanced skills. I don’t want to get the cart before he horse. Also, I’m somewhat ‘drinking from a fire hose’ by simultaneously addressing HTML, CSS, javascript and the tools needed to learn them , VS Code, Git/GitHub,Dev_Tools, etc.

I perfectly understand! However the volume in the fire hose never reduces, it only gets BIGGER lol. I will say this, every developer makes use of Google/MDN and Stack Overflow - relentlessly! :100: It’s the way of the world. Good luck my friend in your learning.

1 Like

@Arekkusu44
I took your advice and tried the Grid Garden tutorial. I did OK up to the 26th of 28 lesson. Here’s the screen with the property to be used filled in, but without the values specified:


I find the question to be answered a bit obstruse.

The exercise asks the student to define which grid containers are watered but has already defined that in the #water selector. Similarly, all of the rows and columns appear despite there being no grid-template-rows definition in the example code.

I tried using percentages (%) and fractions (#fr) and integers but could not make the water appear in the bottom 4 grids. I’m confused by both the instructions and the fact that nothing I tried worked.

Can you help me understand this execise? I’d have asked the Grid Garden folks but saw no way to contact them.

I’m sorry I got to this a little late, but I went through the game (mistakenly called it a tutorial, sorry) and I was also confused. It seems as though grid-row: 5 / 6 would limit where water can be.

I went through the game (first time in years, I am now coming back and starting web dev all over). I got stumped at the same step. I reset the game, went through it again thinking I might have missed something. This reset didn’t really give me any hints. So it asks to water all but the top 50px; from top to bottom grid-template-rows values should consist of 50px and 4 additional row values - fr’s, percentages, whatever.

I found the solution, but I can’t explain why it works. Because the game is interactive, I was changing the fr value going from 5 to 4, then to 3, and so on. I noticed when the fr was by itself, the water appeared in the first row and I wondered if 0fr could be a valid value. I tried it and it worked. Adding additional 0fr for each additional row until it was solved/complete. I ended up with 4 values. I would have never figured it out had it not been for the interactivity of the game. I intend to study more on this, as grid garden doesn’t really go into any depth. It already expects a certain baseline knowledge I was lacking/forgot.

And the answer:

grid-template-rows: 50px 0fr 0fr 0fr;

From GPT-40 mini:

“Using 0fr can be useful in scenarios where you want to create a layout where certain items do not contribute to the overall size of the grid …”

So while 0fr doesn’t visually contribute to the layout, it is evaluated when the css engine is laying out the grid.

1 Like