Questions about Dasmoto's solutions

Web Development Front-End
1

I feel pretty confident in most of my code- but I was wondering if the solution for this part was best practices

My two questions

  • Was it ok to apply the background color style in HTML rather than CSS because based on the style sheet it was a one time design decision, that was not replicated anywhere else on the website
    *was using span ok to change the formatting of that specific line of text
            <article>
                <h2 style="background-color: lightcoral;">Frames</h2>
                <img src="recources\files\frames.jpeg">
                <h3>Art Frames (assorted)</h3>
                <p>Assorted frames made of different material, including MDF, birchwood, and PDE. 
                    Select frames can be sanded and painted according to your needs. <span>Starting at $2.00 / frame.</span></p>
            </article>

Full code is here (https://www.codecademy.com/workspaces/666516da9e5f3f0c069c3c4b)
please ignore the broken image links, the original code is local

2

Nonetheless, a decision that comes with a gotcha down the road on any future rebuilds. Inline styles are gnarly beasts to have to override and one would be wise to avoid their use under any circumstance. That is what the embedded style sheet is for.

In the HEAD

<style>
  .one-off {
    background-color: lightcoral;
  }
</style>

In the BODY

  <h2 class="one-off"> ... </h2>

That can at least be maintained and overridden if needs be and leaves an out for the designer.

Perfectly alright, just so long as it is not hiding the text from the user. Remember, italics and bold face have semantic repercussions, color changes may not be visible to all users, and altering the text should convey some discernable meaning to the user. We can take eye candy too far if we only wish to please ourselves.

If there is an implied meaning in the text change, we can notify screen readers via the title attribute. For instance, a common case is change in human language, which is conveyed via the lang attribute and a translation provided via the title. Regular users see the translation if they hover on the text.

<span lang="FR" title="allow to do">laissez-faire</span>

Above we notify of the change of human language and provide as close to literal translation as possible. It might warrant an aside, but that can be shared with all users. This could also be wrapped with an anchor that links to the ASIDE elsewhere in the page. The color change would then signal a link, not any special meaning.

We could also style it using an attribute selector that targets the lang attribute, and not have to assign a class or id.

span[lang] {
  font-style: oblique;
}

laissez-faire

Hover on the above line of text.

<html lang="EN">

is assumed, but in the case of other languages (different lang value) the title would just be written in that language.

1 Like
3

Just following on from the “one-off” CSS styles - would this be an appropriate time to use ‘id’ rather than class?

  • then in the CSS sheet just using #one-off to keep all CSS consistent rather than having some in-line, some embed style sheet and some in the CSS stylesheet

Wondering what the most common usual way would be for dealing with this situation?

4

IMHO, no. It is way harder to override, which option should always be left open. The fewer ID attributes we have, the less global identifiers the browser has to manage. On top of that, using a class permits re-use on the off-chance you decide to use the same styling in another element. ID is not a magic bullet and should only be used when identifying global objects, namely page fragments.

Designs change, ideas change, structure changes. We never want to carve anything in stone, especially while ideating on layout and structure. A one-off idea may evolve into something that is used site wide, at which point it would be installed in the external style sheet. If it never gets wider adoption, it is not hurting anything as a solitary class in that single page, assuming it remains in the embedded style sheet.

Aside

Page fragments are hookable URIs, meaning we can link to them either in the page, or from another page, or even another site (though not recommended). They show up in the location bar as a hash at the end of the URL.

www.example.com/products.html#paints

From that we could assume an entire section of the page devoted to paints.

<section id="paints">
 <!-- a whole plethora of content -->
</section>

As children of the parent, all the child elements can be selected using that ID so would not need a class or other specific selector (other than type) for the purpose of styling.

#paints h2 {

}
#paints h3 {

}
#paints p {

}

We would assume there are generic rules for H2, H3, and P in the main styles. This group would only need to include any properties that are overridden.

5

Hi mtf,

i know Javascript concepts but not able to implement in project. can please suggest what to do. Please help me i suffering a lot from this. please guide me

6

But do you? We use the language to fulfill our needs, not the other way around. What is it you want to do? You are the boss. This is not a test.

7

i am not able to implement javascript concepts in any projects , but i know each and every concept . Please guide me .
How to connect personally with you

8

How do you connect with the concepts? This is not a handholding situation. Apply what you know!

9

i am able to understand concepts but some times getting weak in logical thinking