Code Monkey home page Code Monkey logo

jacobricktified / freecodecamp-open_source Goto Github PK

View Code? Open in Web Editor NEW
6.0 2.0 0.0 543 KB

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

JavaScript 6.28% HTML 93.72%
css javascript html backend-development apis coding-interview-challenges data-analysis data-visualization frontend-development information-security

freecodecamp-open_source's Introduction

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.

freecodecamp-open_source's People

Contributors

jacobricktified avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.