Div class programming with col and row

Div class programming with col and row
0

#1

On the following exercise:

There’s a bit of code like this (because I want it to show as code in HTML, I added a quotation before every < and > sign):
’<div class=“row”’>
’<div class=“col-xs-8”’>
’<h2 class=“text-primary text-center “’>CatPhotoApp’</h2’>
’</div’>
’<div class=“col-xs-4”’>
’<a href=”#”’>’<img class=“img-responsive thick-green-border” src=“https://bit.ly/fcc-relaxing-cat” alt="A cute orange cat lying on its back. "’>’</a’>
’</div’>
’</div’>

I wondered, if I could lower the amount of written code, when doing this instead:
’<div class=“row”’>
’<h2 class=“text-primary text-center col-xs-8”’>CatPhotoApp’</h2’>
’<a href="#"’>’<img class=“img-responsive thick-green-border col-xs-4” src=“https://bit.ly/fcc-relaxing-cat” alt="A cute orange cat lying on its back. "’>’</a’>
’</div’>

It would make the code a bit smaller, but would there be an effective difference in how the info is displayed on the screen?
If I enter the code, it displays just the same, however, I can’t pass the exercise with that second code.


#2

Not sure why you are adding the single quotes as you say you are. Doing so is not valid html and will cause major problems. Also, as long as you don’t implement the single quote structure you were talking about above you can certainly write the following:

<div class="row">
<h2 class="text-primary text-center col-xs-8">CatPhotoApp</h2>
<a href="#"><img class="img-responsive thick-green-border col-xs-4" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
</div>

#3

I guess technically you could do that… but unnecessarily at the expense of structure and readability. Those few lines alone were hard to read…if it was full page or entire site worth of code like that, theres no way Id even attempt to look at moreless touch it.

I recently read something that was funny but also very true… when you code, imagine the person who has to read it and work on it is a psychopathic serial killer who knows where you live.

ETA to make code viewable in the forum, dont add a single quote in front of it, wrap it in backticks, or highlight the code and click the </> button in the formatting tray.


#4

Hi rmawson71!
The quotes were just used, because the forum wouldn’t display the code by itself.
I don’t have a ‘code’ button, so how did you get that code to display in the forum?

cndragn:
Why did you write that?
I heard from an exemplary programmer, that the right way of programming, is to reduce the amount of code to a minimum; and that it’s called ‘elegant’. (paraphrased from a book of the man that coded the Yahoo services).
Though his coding is in LISP, I thought it’s the aim of every coder, to code small, efficient, and clean.


#5

Whenever you want to display code on the forum, you must put three backticks (typically the key below Esc on US keyboards) on the line before and after the code you want to display. See animated gif below for demo:


#6
Testing code.
<a href=www.test.com></a>

AH!
Our US keyboards don’t have that symbol.
I remember in Europe they call it ‘Accent Grave’, or something.


#7

It’s definitely not the same thing and it’s important that you understand why.

<div class="col-xs-12">
   <h2>Text</h2>
</div>
    
<h2 class="col-xs-12">Second Text</h2>

In the first example your h2 is child of a div, meaning that don’t necessary share the same space or width, while in the second case the colum class is attached directly to the h2.

This means that In the first example, by splitting the “concern” of how big and how to display to the div, I can then be flexible and change anything I want in the child h2 without directly affecting the parent (or any other sibiling)

While in the second case, everything is tied up to how h2 is told to behave.

Generally speaking the first approach is what is considered the best, since give you more flexibility at the expense of a tiny bit more code.

I made a pen with some colour to help you visualise the difference in space they occupy:


#8

On the US keyboard, its the key to the very left of the numeral 1 key and shares its key with the tilde mark.

download (1)


#9

Thank you!
I see it now!

Never used it before :sweat_smile::clown_face: