freeCodeCamp.org

HTML-CSS
1

yo help me it say Your Technical Documentation project should use at least one media query.help
HTML code:

<title>freeCodeCamp Technical Documentation Project</title>

<!--local style sheet-->
 <link rel="stylesheet" href="styles.css">
<!--stylesheet for highlight.js: this line chooses the color scheme-->
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/github.min.css">
<!--main script for commmon highlight.js langs-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"></script>

<nav class="navbar" id="navbar">
  <div class="nav-container">
    <header>
      <a href="https://github.com/mattn/emmet-vim" class="nav-header">emmet-vim</a>
    </header>
    <a href="#Introduction" class="nav-link">Introduction</a>
    <a href="#Expand_an_Abbreviation" class="nav-link">Expand an Abbreviation</a>
    <a href="#Wrap_with_an_Abbreviation" class="nav-link">Wrap with an Abbreviation</a>
    <a href="#Balance_a_Tag_Inward" class="nav-link">Balance a Tag Inward</a>
    <a href="#Balance_a_Tag_Outward" class="nav-link">Balance a Tag Outward</a>
    <a href="#Go_to_the_Next_Edit_Point" class="nav-link">Go to the Next Edit Point</a>
    <a href="#Go_to_the_Previous_Edit_Point" class="nav-link">Go to the Previous Edit Point</a>
    <a href="#Update_an_image’s_Size" class="nav-link">Update an image’s Size</a>
    <a href="#Merge_Lines" class="nav-link">Merge Lines</a>
    <a href="#Remove_a_Tag" class="nav-link">Remove a Tag</a>
    <a href="#Split/Join_Tag" class="nav-link">Split/Join Tag</a>
    <a href="#Toggle_Comment" class="nav-link">Toggle Comment</a>
    <a href="#Make_an_anchor_from_a_URL" class="nav-link">Make an anchor from a URL</a>
    <a href="#Make_some_quoted_text_from_a_URL" class="nav-link">Make some quoted text from a URL</a>
    <a href="#Installing_emmet.vim_for_the_language_you_are_using" class="nav-link">Installing emmet.vim for the language you are using</a>
    <a href="#Enable_emmet.vim_for_the_language_you_using" class="nav-link">Enable emmet.vim for the language you using</a>
    <a href="#Reference" class="nav-link">Reference</a>
  </div>
</nav>

<main class="main-doc" id="main-doc">
  <section class="main-section" id="Introduction">
    <header>Introduction</header>
    <p><b>This documentation is for <em>emmet-vim</em>: a vim plug-in which provides support for expanding abbreviations similar to emmet. </b>Note: the <code class="keystroke">&lt;c-y&gt;</code> notation is shorthand for holding the <code class="keystroke">ctrl</code> button and pressing the letter <code class="keystroke">y</code>.</p>
    <p>Emmet is a web-developer’s toolkit that can greatly improve your HTML &amp; CSS workflow.</p>
    <p>Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.</p>
    <p>Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.</p>
  </section>
  <section class="main-section" id="Expand_an_Abbreviation">
    <header>Expand an Abbreviation</header>
    <p>Type the abbreviation as <code class="keystroke">div&gt;p#foo$*3&gt;a'</code> and type <code class="keystroke">&lt;c-y&gt;,</code></p>
    <pre><code class="html">

<div>
<p id=“foo1”>
<a href=“”></a>
</p>
<p id=“foo2”>
<a href=“”></a>
</p>
<p id=“foo3”>
<a href=“”></a>
</p>
</div>



Wrap with an Abbreviation

Write as below.



  • test1

  • test2

  • test3

  • test4

  • test5


Then do visual select (line wise) and type <c-y>,. Once you get to the ‘Tag:’ prompt, type ‘ul>li*’




<ul>

<li>test1</li>

<li>test2</li>

<li>test3</li>

<li>test4</li>

<li>test5</li>

</ul>

If you type a tag, such as ‘blockquote’, then you’ll see the following:




<blockquote>

test1

test2

test3

test4

test5

</blockquote>



Balance a Tag Inward

Type <c-y>d in insert mode.




Balance a Tag Outward

Type <c-y>D in insert mode.




Go to the Next Edit Point

Type <c-y>n in insert mode.




Go to the Previous Edit Point

Type <c-y>N in insert mode.




Update an image’s Size

Move cursor to the img tag.




<img src=“foo.png” />

Type <c-y>i on img tag.




<img src=“foo.png” width=“32” height=“48” />



Merge Lines

Select the lines, which include <li>




<ul>

<li class=“list1”></li>

<li class=“list2”></li>

<li class=“list3”></li>

</ul>

and then type <c-y>m




<ul>

<li class=“list1”></li><li class=“list2”></li><li class=“list3”></li>

</ul>



Remove a Tag

Move cursor in block.




<div class=“foo”>

<a>cursor is here</a>

</div>

Type <c-y>k in insert mode.




<div class=“foo”>


</div>

And type <c-y>k in there again.





    </code></pre>
  </section>
  <section class="main-section" id="Split/Join_Tag">
    <header>Split/Join Tag</header>
    <p>Move the cursor inside block.</p>
    <pre><code class="html">



<div class=“foo”>

cursor is here

</div>

Type <c-y>j in insert mode.




<div class=“foo”/>

And then type <c-y>j in there again.




<div class=“foo”>

</div>



Toggle Comment

Move cursor inside the block.




<div>

hello world

</div>

Type <c-y>/ in insert mode.




<!-- <div>

hello world

</div> –>

Type <c-y>/ in there again.




<div>

hello world

</div>



Make an anchor from a URL

Move cursor to the URL.




http://www.google.com/

Type <c-y>a




<a href=“http://www.google.com/”>Google</a>



Make some quoted text from a URL

Move cursor to the URL.




http://github.com/

Type <c-y>A




<blockquote class=“quote”>

<a href=“http://github.com/”>Secure source code hosting and collaborative development - GitHub</a><br />

<p>How does it work? Get up and running in seconds by forking a project, pushing an existing repository…</p>

<cite>http://github.com/&lt;/cite&gt;

</blockquote>



Installing emmet.vim for the language you are using


cd ~/.vim


unzip emmet-vim.zip


  </code></pre>
  <p>Or if you are using pathogen.vim:</p>
  <pre><code class="shell">



cd ~/.vim/bundle # or make directory


unzip /path/to/emmet-vim.zip


    </code></pre>
    <p>Or if you get the sources from the repository:</p>
    <pre><code class="shell">



cd ~/.vim/bundle # or make directory


git clone GitHub - mattn/emmet-vim: emmet for vim: http://emmet.io/


    </code></pre>
  </section>
  <section class="main-section" id="Enable_emmet.vim_for_the_language_you_using">
    <header>Enable emmet.vim for the language you using</header>
    <p>You can customize the behavior of the languages you are using.</p>
    <pre><code class="shell">



cat >> ~/.vimrc


let g:user_emmet_settings = {

\  ‘php’ : {

\    ‘extends’ : ‘html’,

\    ‘filters’ : ‘c’,

\  },

\  ‘xml’ : {

\    ‘extends’ : ‘html’,

\  },

\  ‘haml’ : {

\    ‘extends’ : ‘html’,

\  },

}



Reference

This documentation taken from emmet-vim
github page here.



<!-- freeCodeCamp script for validating project for submission-->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!--need to call highlight.js script to apply syntax highlighting-->
<script>hljs.initHighlightingOnLoad();</script>

CSS code:
html {
font-size: 20px;
}

body {
font-family: sans-serif;
margin: 0;
}

.navbar {
background-color: #3b3c44;
height: 100%;
margin: 0;
overflow: auto;
position: fixed;
width: 30%;
}

.nav-container {
margin: 0 5px 5px 5px;
}

.nav-container header {
text-align: center;
}

.nav-header {
color: #7acb17;
font-size: 2rem;
font-weight: 700;
padding-bottom: 0.2rem;
text-shadow: -1px 1px 1px #000;
text-decoration: none;
}

.nav-link {
color: #bfe394;
display: block;
font-weight: 700;
padding: 0.5rem;
text-decoration: none;
}

.nav-link:hover {
background-color: #bfe394;
border-radius: 5px;
color: #fff;
}

.main-doc {
/* set margin-left to width of navbar to account for navigation */
margin-left: 31%;
padding: 1px 12px;
}

.main-doc header {
font-size: 1.5rem;
}

.main-doc p {
line-height: 1.4rem;
margin-left: 1rem;
}

.main-doc code {
font-size: 0.8rem;
}

.keystroke {
background-color: #f8f8f8;
color: #000080;
padding: 6px 6px 6px;
}

.main-section li {
list-style: none;
}

@media (max-width: 768px) {
html {
font-size: 18px;
}

@media screen and (max-width: 30rem) {
body {
background-color: lightgreen;
}
}

body {
margin: 0;
}

.navbar {
height: 10rem;
position: static;
width: 100%;
}

.main-doc {
margin-left: 0;
}
}
@media screen and (max-width:768px) {

}

2

Please format your post and give it a title explaining what you are asking help for

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.