Skip to content

Instantly share code, notes, and snippets.

@AdrianSkar

AdrianSkar/index.html

Created July 31, 2018 12:21
Show Gist options
  • Save AdrianSkar/bdb78c5edbfc684d92b16f2082998e93 to your computer and use it in GitHub Desktop.
Save AdrianSkar/bdb78c5edbfc684d92b16f2082998e93 to your computer and use it in GitHub Desktop.
Download ZIP
[RWD] Project: Build a technical doc page
Raw
index.html
<head><link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">
</head>
<body>
<nav id="navbar">
<header>FCC's RWD cert.</header>
<ul>
<a href="#Basic_HTML_and_HTML5" class="nav-link"><li>Basic HTML and HTML5</li></a>
<a href="#Basic_CSS" class="nav-link"><li>Basic CSS</li></a>
<a href="#Applied_visual_design" class="nav-link"><li>Applied visual design</li></a>
<a href="#Applied_accessibility" class="nav-link"><li>Applied accessibility</li></a>
<a href="#RWD_principles" class="nav-link"><li>RWD principles</li></a>
<a href="#CSS_flexbox" class="nav-link"><li>CSS flexbox</li></a>
<a href="#CSS_grid" class="nav-link"><li>CSS grid</li></a>
<a href="#RWD_projects" class="nav-link"><li>RWD Projects</li></a>
</ul>
</nav>
<main id="main-doc">
<h1>Responsive web design certification </h1>
This documentation aims to provide brief description of sections available at the <abr title="Responsive Web Design">RWD</abr> certification course at <a href="https://learn.freecodecamp.org">freeCodeCamp</a>.
<section class="main-section" id="Basic_HTML_and_HTML5">
<header id="basich">Basic HTML and HTML5</header>
<p>
HTML, or HyperText Markup Language, is a markup language used to describe the structure of a web page. It uses a special syntax or notation to organize and give information about the page to the browser. Elements usually have opening and closing tags (eg: <code>&lt;ol&gt;</code> and <code>&lt;/ol&gt;</code> ) that surround and give meaning to content. For example, there are different tag options to place around text to show whether it is a heading, a paragraph, or a list.
<br>
<p>For example:</p>
<pre class="prettyprint lang-html">
&lt;p&gt;A paragraph of text. Some information we would like to communicate to the viewer. This can be as long or short as we would like.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Number one on the list&lt;/li&gt;
&lt;li&gt;Number two&lt;/li&gt;
&lt;li&gt;A third item&lt;/li&gt;
&lt;/ol&gt;</pre>
<p>Becomes:</p>
<p>A paragraph of text. Some information we would like to communicate to the viewer. This can be as long or short as we would like.</p>
<ol>
<li>Number one on the list</li>
<li>Number two</li>
<li>A third item</li>
</ol>
<hr>
<p>The HyperText part of HTML comes from the early days of the web and its original use case. Pages usually contained static documents that contained references to other documents. These references contained hypertext links used by the browser to navigate to the reference document so the user could read the reference document without having to manually search for it.
</p>
<p>
As web pages and web applications grow more complex, the W3 Consortium updates the HTML specification to ensure that a webpage can be shown reliably on any browser. The latest version of HTML is HTML5.</p>
</p>
</section>
<section class="main-section" id="Basic_CSS">
<header id="basicc">Basic CSS</header>
<p>Cascading Style Sheets (CSS) tell the browser how to display the text and other content that you write in HTML.</p>
<p>Note that CSS is case-sensitive so be careful with your capitalization. CSS has been adopted by all major browsers and allows you to control:</p>
<ul class="disc">
<li>color</li>
<li>fonts</li>
<li>positioning</li>
<li>spacing</li>
<li>sizing</li>
<li>decorations</li>
<li>transitions</li>
</ul>
<!-- tester does not recognize code tags inside p elements (already 6 of 5 required) Issue at https://github.com/freeCodeCamp/testable-projects-fcc/issues/497
Yes it does, the error was mine. -->
<!--<code></code>
<code></code>
<code></code>
<code></code>
<code></code>-->
<p>There are three main ways to apply CSS styling. You can apply inline styles directly to HTML elements with the <code>style</code> attribute. Alternatively, you can place CSS rules within <code>style</code> tags in an HTML document. Finally, you can write CSS rules in an external style sheet, then reference that file in the HTML document. Even though the first two options have their use cases, most developers prefer external style sheets because they keep the styles separate from the HTML elements. This improves the readability and reusability of your code. The idea behind CSS is that you can use a selector to target an HTML element in the DOM (Document Object Model) and then apply a variety of attributes to that element to change the way it is displayed on the page.</p>
</section>
<section class="main-section" id="Applied_visual_design">
<header id="visual">Applied visual design</header>
<p>Visual Design in web development is a broad topic. It combines typography, color theory, graphics, animation, and page layout to help deliver a site's message. The definition of good design is a well-discussed subject, with many books on the theme.</p>
<p>At a basic level, most web content provides a user with information. The visual design of the page can influence its presentation and a user's experience. In web development, HTML gives structure and semantics to a page's content, and CSS controls the layout and appearance of it.</p>
</section>
<section class="main-section" id="Applied_accessibility">
<header id="access">Applied accessibility</header>
<p>"Accessibility" generally means having web content and a user interface that can be understood, navigated, and interacted with by a broad audience. This includes people with visual, auditory, mobility, or cognitive disabilities. Websites should be open and accessible to everyone, regardless of a user's abilities or resources. Some users rely on assistive technology such as a screen reader or voice recognition software. Other users may be able to navigate through a site only using a keyboard. Keeping the needs of various users in mind when developing your project can go a long way towards creating an open web. Here are three general concepts this section will explore throughout the following challenges:</p>
<ol>
<li>Have well-organized code that uses appropriate markup</li>
<li>Ensure text alternatives exist for non-text and visual content</li>
<li>Create an easily-navigated page that's keyboard-friendly</li>
</ol>
<p>Having accessible web content is an ongoing challenge. A great resource for your projects going forward is the W3 Consortium's Web Content Accessibility Guidelines (<abr>WCAG</abr>). They set the international standard for accessibility and provide a number of criteria you can use to check your work.</p>
</section>
<section class="main-section" id="RWD_principles">
<header id="rwdp">RWD principles</header>
<p>Today, there are many types of devices that can access the web. They range from large desktop computers to small mobile phones. These devices have different screen sizes, resolutions, and processing power. Responsive Web Design is an approach to designing web content that responds to the constraints of different devices. The page structure and CSS rules should be flexible to accommodate these differences. In general, design the page's CSS to your target audience. If you expect most of your traffic to be from mobile users, take a 'mobile-first' approach. Then add conditional rules for larger screen sizes. If your visitors are desktop users, then design for larger screens with conditional rules for smaller sizes. CSS gives you the tools to write different style rules, then apply them depending on the device displaying the page. This section will cover the basic ways to use CSS for Responsive Web Design.</p>
</section>
<section class="main-section" id="CSS_flexbox">
<header id="flex">CSS flexbox</header>
<p>A website's User Interface ("UI") has two components. First, there are the visual elements, such as colors, fonts, and images. Second, there is the placement or positioning of those elements. In Responsive Web Design, a UI layout must accommodate many different browsers and devices accessing the content.</p>
<p>CSS3 introduced Flexible Boxes, or flexbox (<code>display: flex</code>) , to create page layouts for a dynamic UI. It is a layout mode that arranges elements in a predictable way for different screen sizes and browsers. While somewhat new, all popular modern browsers support flexbox. This section covers how to use flexbox and the different layout options it offers.</p>
</section>
<section class="main-section" id="CSS_grid">
<header id="grid">CSS grid</header>
<p>CSS Grid (<code>display: grid</code>) helps you easily build complex web designs. It works by turning an HTML element into a grid container with rows and columns for you to place children elements where you want within the grid.</p>
</section>
<section class="main-section" id="RWD_projects">
<header id="projects">RWD Projects</header>
<p>Time to put your newly learnt skills to work! By working on projects you would have the opportunity of applying all the skills, principles and concepts you have learnt so far HTML, CSS, Visual Design, Accessibility, etc.
</p>
<p>In this section you get the chance to:</p>
<ul class="disc">
<li>Build a tribute page</li>
<li>Build a survey form</li>
<li>Build a product landing page</li>
<li>Build a technical documentation page (this one)</li>
<li>Buils a personal portfolio page</li>
</ul>
<p>By the end of this, you would have 5 responsive websites under your belt that you can show off to friends, family, employers, etc. Have fun and remember to use the Read-Search-Ask method if you get stuck.</p>
</section>
<footer>
<p>Credits:
<ul>
<li>Content: <a href="https://learn.freecodecamp.org">freeCodeCamp</a></li>
<li>Syntax highlighter: <a href="https://github.com/google/code-prettify">google/code-prettify</a></li>
<li>HTML enconding: <a href="https://codebeautify.org/html-encode-string">Code beautify</a> </li>
</ul>
</p>
</footer>
</main>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js" async></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
</body>
Raw
rwd-project-build-a-technical-doc-page.markdown
Raw
style.css
body {
font-family: Inconsolata, sans-serif;
}
header, main { background-color: #fff; padding: 1em;}
#navbar header{padding: 0; margin-top: 2.6em; text-align: center;
font-size: 1.6em; font-weight: bold; text-decoration: none;
}
#navbar{
width: 25%;
position:fixed;
}
h1, section header {background: #ffe;padding-left: .6em;border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
section header {font-weight: bold; font-size: 1.3em; }
h1 {padding: .6em;}
nav h1 {background: #ffe; text-decoration: underline; border-radius: 5px; padding: .6em;border-top: 1px solid #999; }
nav ul li {border-top: 1px solid #999; padding: .5em 2em; background: #ffe; border-radius: 3px 1px;}
nav ul:last-child {border-bottom: 1px solid #999;}
main {margin-left: 25%; position: absolute;}
nav ul {list-style-type: none; padding: 0;}
nav ul a {text-decoration: none; color: black;}
ul a:hover { text-decoration: underline;}
.link {font-size: 0.5em; vertical-align: text-top;}
.disc {list-style-type: disc; margin-left: 2em;}
pre {
white-space: pre-wrap;
background: #eee;
padding: 1em !important;
border: 2px dashed #fff !important; overflow:auto;}
code {background: #ffe; color: #800;}
section {padding :.6em;}
.credits{font-size:0.8em;}
footer {padding:.5em;}
@media only screen and (max-width:880px){
#navbar {position: relative; width: 100%; overflow: auto;}
main {margin: 0;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment