jacobricktified / freecodecamp-open_source

Hope we can use this to learn how to effectively contribute to open source with all its facets using this free resource . Its important we support this project as I will partly donate to the main freeCodeCamp project .If you want to contribute to the main project go to: https://contribute.freecodecamp.org/#/ and if you want to learn to code for free using freecodecamp's curriculum go to: https://www.freecodecamp.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

freecodecamp

/Responsive /Web /Design In this Responsive Web Design , I learnt the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.

First, I built a cat photo app to learn the basics of HTML and CSS. Later, i learnt modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a web form.

Finally,I learnt how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid.

1.# Basic HTML and HTML5 HTML is a markup language that uses a special syntax or notation to describe the structure of a webpage to the browser. HTML elements usually have opening and closing tags that surround and give meaning to content. For example, different elements can describe text as a heading, paragraph, or list item. In this course I learnt to build a cat photo app to learn some of the most common HTML elements — the building blocks of any webpage.

2.# Basic CSS CSS, or Cascading Style Sheets, tell the browser how to display the text and other content that you write in HTML. With CSS, you can control the color, font, size, spacing, and many other aspects of HTML elements. Now that i have described the structure of your cat photo app, I give it some style with CSS.

3.# Applied visual design Visual design is a combination of typography, color theory, graphics, animation, page layout, and more to help deliver your unique message.

In this course, I learnt how to apply these different elements of visual design to your webpages.

  1. Applied Accessibility

In web development, accessibility refers to web content and a UI (user interface) that can be understood, navigated, and interacted with by a broad audience. This includes people with visual, auditory, mobility, or cognitive disabilities. In this course, I learn best practices for building webpages that are accessible to everyone.

5.# Responsive Web Design Principles There are many devices that can access the web, and they come in all shapes and sizes. Responsive web design is the practice of designing flexible websites that can respond to different screen sizes, orientations, and resolutions.

In this course, I learn how to use CSS to make your webpages look good, no matter what device they're viewed on.

6.# CSS Flexbox Flexbox is a powerful, well-supported layout method that was introduced with the latest version of CSS, CSS3. With flexbox, it's easy to center elements on the page and create dynamic user interfaces that shrink and expand automatically.

In this course, you'll learn the fundamentals of flexbox and dynamic layouts by building a Twitter card.

7.# CSS Grid The CSS grid is a newer standard that makes it easy to build complex responsive layouts. It works by turning an HTML element into a grid, and lets you place child elements anywhere within.

In this course, you'll learn the fundamentals of CSS grid by building different complex layouts, including a blog.

  1. Responsive Web Design Projects

Time to put your newly learnt skills to work. By working on these projects, you will get a chance to apply all of the skills, principles, and concepts you have learned so far: HTML, CSS, Visual Design, Accessibility, and more.

Complete the five web programming projects below to earn your Responsive Web Design certification.

About

Hope we can use this to learn how to effectively contribute to open source with all its facets using this free resource . Its important we support this project as I will partly donate to the main freeCodeCamp project .If you want to contribute to the main project go to: https://contribute.freecodecamp.org/#/ and if you want to learn to code for free using freecodecamp's curriculum go to: https://www.freecodecamp.org/

License:MIT License


Languages

Language:HTML 93.7%Language:JavaScript 6.3%