Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
# Thriving in Our Programming Community

As you embark on your journey in the landscape of programming, it's essential to recognize that you're not alone. The vast programming community is here to support and enrich your experience every step of the way. Your achievement lies in the interconnected community that shapes it. In this lesson, we'll delve into the significance of engaging actively with the programming community and how it can improve your coding skills to new heights.

## The Power of Programming Communities

Coding is an art which thrives on collaboration and shared knowledge. By immersing yourself in the programming community, you open doors to a world of collective expertise. Whether you're working on a complex algorithm or seeking guidance on best practices, the community is your go-to resource.

The programming community facilitates:

1. **Collaboration**: Bringing together diverse minds can lead to innovative solutions that an individual might not have considered.
2. **Learning from Others**: Exploring different perspectives helps you grasp concepts faster and broadens your understanding.
3. **Problem Solving**: Tackling coding challenges becomes smoother with the input and insights of fellow programmers.

The sense of community has a huge impact on human advancement. Here is a [TedX](https://www.youtube.com/watch?v=7yNl-AsQRRw) session about how communities help each other create an exponential impact. An impact not just on your path, but in the path of other people who work along with you too. You are an important part of the community we seek to develop, as an important part of this future, we urge you to be inclusive and help us build this into an impactful ecosystem


## Discord: The Platform for Building Our Coding Community

At the heart of our community lies Discord, a versatile and powerful platform that enhances your coding experience in numerous ways:

1. **Real-time Communication**: Discord provides an interactive space for instant discussions, allowing you to seek help and share insights without delay.
2. **Dedicated Channels**: Organized channels for specific topics, projects, and interests enable focused conversations & knowledge sharing.
3. **Support**: A support pipeline of dedicated staff, who are available to answer and offer a helping hand for all your questions and queries related to the course.
4. **Network**: A network for communication with all the students and alumni taking our courses from across the country. Opening gates to conversations related to your programming stories and problems/solutions you have faced during your learning experience and a network of other developers.

## Open Source Platforms: Pillars of Collaboration

Several open-source platforms serve as pillars of collaboration, enabling programmers to contribute, learn, and grow together:

- **[GitHub](https://github.com)**: A hub for collaborative coding, version control, and open-source project hosting.
- **[Stackoverflow](https://stackoverflow.com/)**: A platform that supports shared coding endeavors, fostering a strong developer community.


## Embracing the Coding Community Philosophy

Engaging in the programming community requires adopting a set of principles that promote mutual growth and respect:

1. **Inclusivity and Respect**: Every voice matters; create an environment where all feel valued and heard.
2. **Active Participation**: Engage in discussions, code reviews, and collaborative projects to contribute and learn.
3. **Giving and Receiving**: Embrace mentorship and offer assistance to fellow programmers, fostering a culture of support.
4. **Continuous Learning**: Develop a growth mindset by learning from peers and seeking constructive feedback.

## Graduate attribute for Web development professionals

While going through your web developpment courses, students will be exposed to a range of attributes that are of highly valued in the programming community across the globe. And are some necessary aspects for the web development professionals. It is important that you take note of these values and focus to build up on these skills as you approach your professional path in the area of web development. Use the discord community and intiate conversations about these topics with your fellow learners.

1. **Comprehensive Web skills** : Develop mastery in HTML,CSS & JS, and other web technologies, enabling you to develop complex and responsive web solutions.
2. **Full-stack proficiency** : Acquire front-end and back-end expertise, integrating databases and APIs to build complete web applications.
3. **Problem-Solving Mastery** : Analyze and practise complex technical issues, enhancing your ability to created optimized solutions.
4. **Effective Collaboration** : Utilize Git for version control and teamwork, communicating and contributing effectively within development groups.
5.**User-Focused Design**: Learn about UI/UX and design principles and understant the importance of catering intelligent user interfaces.
6. **Security and Ethical Awareness** : Learn about security measures, prioritizing data privacy, and adhere to ethical standards while showcasing professionalism and accountability.

Here is a [reference link](https://www.ugc.gov.in/e-book/locf/mobile/index.html#p=7), go to page number 6 to read more about graduate attributes._


## Behavioral Rules and Standards

To ensure a positive and productive experience within the programming community, we adhere to the following behavioral rules and standards:

1. **Respectful Communication**: Treat all community members with courtesy and respect. Avoid offensive language, personal attacks, and discriminatory remarks.

2. **Constructive Criticism**: Provide feedback in a constructive manner, focusing on the code and ideas rather than attacking individuals.

3. **Collaborative Environment**: Embrace collaboration, share insights, and engage in healthy discussions to promote collective learning.

4. **Plagiarism-Free Zone**: Give credit where it's due and refrain from submitting others' work as your own. Plagiarism undermines the spirit of learning and growth.

5. **Inclusivity and Diversity**: Embrace diversity of backgrounds, experiences, and perspectives. Our community is strengthened by its rich tapestry of voices.

6. **Helping Others**: Contribute positively by assisting fellow members, particularly those who are newer to coding. A helping hand can make a significant impact.

7. **Adherence to Platform Guidelines**: Respect the guidelines of the platforms we use, such as GitHub and GitLab, when contributing to projects.

## Resources for Cultivating Your Coding Community Involvement


Remember community engagement is all about sharing, do not refrain from sharing whenever you come across something interesting, that might intrigue your fellow programmers. To start with consider exploring these resources that we would like to share with you:


* The Mythical Man-Month Book by Fred Brooks : An interesting read about software development, presenting some ideas about second-system effect and advocacy of prototyping.

* [Some interesting project ideas for when you are done with our WD courses.](https://www.crio.do/projects/category/web-development-projects/)


In your coding journey, remember that the programming community is your steadfast companion. Engage, collaborate, and share on the discord channel, and contribute to the community that will shape your path to success.

[Community meme](https://img.devrant.com/devrant/rant/r_660997_XfjvN.jpg)


12 changes: 12 additions & 0 deletions Basic Introduction to HTML & CSS/CSS and styling structure.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# Enhancing Web Design with CSS:

In our recent lessons, you've gained an understanding of what HTML is and how it's used to structure documents. However, you may have noticed that the documents we created looked quite basic when viewed in web browsers. Headings appeared larger than regular text, paragraphs had spacing and line breaks, and links were colored and underlined to stand out.

## Unleashing Creative Possibilities:

The web would indeed be a boring place if all websites adhered to this basic appearance. This is where Cascading Style Sheets (CSS) come into play. With CSS, you have the power to finely control how HTML elements are presented in the browser, allowing for creativity and customization.

## Exploring CSS:

In the upcoming lessons, we'll delve deeper into the world of CSS. You'll learn how to style HTML elements, apply colors, adjust layouts, and create visually appealing web pages. CSS empowers web developers and designers to transform the look and feel of web content, making each website unique and engaging.

5 changes: 5 additions & 0 deletions Basic Introduction to HTML & CSS/CSS classes and selectors.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Selecting Elements for Styling in CSS:

To style different elements in our HTML page, first we have to find a way to refer to those elements. In CSS, selectors are used to **target** the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, which helps us to precisely select which element to style.

Let's find out how to use these selectors.
9 changes: 9 additions & 0 deletions Basic Introduction to HTML & CSS/CSS styling overrides.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# Defining CSS Rules in HTML Projects:

We already know that, in any HTML project, there are three different places where we can write our CSS rules:

1. Along with the HTML elements, as inline styles.
2. Inside HTML `HEAD`, using the `<style>` tag, as an internal style sheet.
3. By creating an external CSS file and later linking it with the HTML using the `link` tag.

Now the question is, what if we define different CSS rules for a single HTML element, in all of these three places? Then which one would be applied and finally be visible in the browser? Let's find out.
65 changes: 65 additions & 0 deletions Basic Introduction to HTML & CSS/HTML & Semantic.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
# Understanding HTML Semantics:

In this lesson, we'll delve into the semantics of HTML. In programming, semantics refers to the meaning conveyed by a piece of code.

## Semantics in HTML:

In HTML, semantics play a crucial role in defining the meaning of elements. For instance, we use the `<img>` tag to display images. The `<img>` tag carries the semantic meaning of including a picture on our webpage. Similarly, the `<h1>` tag is used to display top-level headings, providing semantic structure to the text it encloses.

## Choosing the Right Element:

While we can visually style text wrapped by a `<span>` to resemble a heading, it lacks semantic value. Using the appropriate HTML element for its intended purpose offers several advantages.

## Benefits of Semantic Structure:

A well-structured web page benefits in multiple ways. It aids search engines like Google, Yahoo, or Bing in extracting essential keywords, improving discoverability. Additionally, it serves as a guide for screen readers, assisting visually impaired users in navigating the content effectively.

## Separating Data from Presentation:

It's important to code HTML to represent the underlying data rather than focusing on its default presentation. Presentation styling can be modified using Cascading Style Sheets (CSS).

```html
<html>
<head>
<title>Writing semantic HTML</title>
</head>
<body>
<header>Semantic HTML</header>
<main>
<p>This is a paragraph</p>
</main>
</body>
</html>
```

Here, we have `<title>`, which represents the web page's title. There is a `<header>` tag that wraps the web page's heading. Then there is core content enclosed within the `<main>` tag.

We can represent a generic standalone section of a document using the `<section>` tag. It should always have a heading.

```html
<h1>Learning HTML</h1>
<section>
<h2>Introduction</h2>
<p>This document acts as a guide to master HTML</p>
</section>
```

To represent a self-contained text, the `<article>` tag can be used. We can create an `<article>` with one or more `<section>` within it.

```html
<article>
<h1>Reviews</h1>
<section>
<h4>Simple to understand</h4>
<p>HTML is simple to understand</p>
</section>
<section>
<h4>Easy to learn</h4>
<p>Very easy to learn HTML</p>
</section>
</article>
```

A few other semantic elements available are `<footer>`, `<nav>`, `<article>`, `<summary>` etc.

Mozilla has excellent documentation on semantic HTML: https://developer.mozilla.org/en-US/docs/Glossary/Semantics
52 changes: 52 additions & 0 deletions Basic Introduction to HTML & CSS/Introduction to HTML Elements.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
# HTML Structure:

An HTML document begins with the `<html>` tag, serving as the root element. All other elements must be descendants of this element. The main content of a web page is typically enclosed within the `<body>` tag.

## Headings:

To create headings in HTML, you can use a range of header tags, from `<h1>` to `<h6>`. These tags help establish a hierarchy of importance on your web page, with `<h1>` being the highest level of importance and `<h6>` the lowest.

## Text Content:

Normal text content can be added to a web page using the `<p>` element. This element is used for paragraphs and separates text into distinct blocks.

## Tabular Data:

For presenting data in a tabular format, HTML provides the `<table>` element. You can include an optional header for the table using the `<thead>` element. Each row within the table is represented by the `<tr>` element. To populate data within a specific column in a table row, you should use the `<td>` element, which stands for "table data cell."

```html
<html>
<head>
<title>This is my web page</title>
</head>
<body>
<h1>This is a top level heading</h1>
<h2>This is a sub heading</h2>
<p>This is a normal text</p>

<table>
<thead>
<tr>
<th>id</th>
<th>fruit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Apple</td>
</tr>
<tr>
<td>2</td>
<td>Orange</td>
</tr>
</tbody>
</table>
</body>
</html>
```

MDN has an excellent reference on HTML elements at https://developer.mozilla.org/en-US/docs/Web/HTML/Element

MDN documentation on [Form input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
MDN documentation on [Table element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
17 changes: 17 additions & 0 deletions Basic Introduction to HTML & CSS/Learn more about CSS.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# More about CSS

Are you interested to learn more about what you've seen in the previous lesson? Want to learn how to write custom CSS of your own?

Unfortunately, we don't have the time to dig deeper into CSS in _this_ course. However, we think that the best way to learn CSS is by _experimenting_ with it.

If you want a structured way to learn the traditional way of writing CSS, one of your best options is to follow along with [a tutorial like the one offered by w3schools.com](https://www.w3schools.com/css/css_intro.asp).

## Some suggestions

1. Follow along for the first few chapters, try things out in your web page.
2. Don't feel pressured to complete such tutorials - CSS is a _vast_ topic.
3. Skim through some of the options that CSS gives you - play around with some CSS properties.
4. Look at websites that you like and try to build elements that look similar. This might seem difficult at first - use tutorials to learn more about specific properties that'll help you achieve the look that you want.

Finally, don't rush. As we've mentioned before, CSS is complex topic - give yourself plenty of time to absorb all of the tools that it offers.

16 changes: 16 additions & 0 deletions Basic Introduction to HTML & CSS/Learn more about HTML.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
> This is optional reading. In this target we'll link you to external documentation that you can look at if you want to. Do that only if you are curious and have the time to spare. Otherwise you can safely skip this chapter.

## Additional tutorials

Here are a few more tutorials that can help you improve your understanding of HTML-based web page development.

1. [Create and Deploy a Basic Static HTML Website](https://egghead.io/courses/create-and-deploy-a-basic-static-html-website-2960)
2. [Learn HTML – Full Tutorial for Beginners](https://www.youtube.com/watch?v=kUMe1FH4CHE)

## References

Here are a few references for the HTML specification and related documentation. These links contain details about all the HTML elements and the places they can be used within our web pages.

1. [W3C HTML Specification](https://html.spec.whatwg.org/multipage/)
2. [Mozilla HTML Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML)
3. [W3Schools HTML reference](https://www.w3schools.com/html/default.asp)
39 changes: 39 additions & 0 deletions Basic Introduction to HTML & CSS/Linking Pages.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
In this lesson, we will learn about linking external pages and internal elements to our web pages.

# Linking external pages and internal elements to our web pages

The `a` HTML element (or *anchor* element), with its `href` attribute, creates a hyperlink to web pages, files, email addresses, locations on the same page, or anything else a URL can address.

## External Links

You can use the `a` (anchor) element to link to content outside your web page.

The `a` element needs a destination web address specified using the `href` attribute. They also require anchor text which you click to navigate to that web address. Let's try out the below code on our HTML page.

```html
<a href="https://www.google.org">This links to Google</a>
```

When you open this HTML page on your browser, it will display the text `This links to Google` as a link you can click. And if we click on the link, it will take us to `https://www.google.com`.

## Internal Links

`a` (anchor) elements can also create internal links to jump to different sections within a webpage.

To create an internal link, you assign a link's `href` attribute to a hash symbol `#` plus the value of the `id` attribute for the element that you want to link to, usually further down the page internally.

You then need to add the same `id` attribute to the element you are linking to. An `id` is an attribute that uniquely identifies an element.

Let us create an `a` tag and an `h2` tag on our HTML page. Next, let us update the `id` attribute of the `h2` same as the `href` attribute for the anchor tag.

```html
<a href="#projects-header">Projects</a>
...
<h2 id="projects-header">Projects</h2>
```

When you open this HTML page on your browser and click the Projects link, you will be taken to the section of the webpage with the **Projects** heading element.

In this lesson, we learned about the HTML `a` (anchor) element, and how it is used to link internal elements and external webpages from our web page.

You can learn more about the attributes that can be used with this element [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
11 changes: 11 additions & 0 deletions Basic Introduction to HTML & CSS/Styling HTML using CSS files.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
Keeping _Cascading Style Sheets_ (CSS) inside of HTML files isn't a common practice. Let's start by learning how we can keep our styles in their own `.css` files.

** Video **

To learn move about CSS, check out [w3schools.com, which has a very detailed tutorial](https://www.w3schools.com/css/default.asp). The number of different ways that you can style a web page is infinite. You're limited only by your imagination, so take your time and experiment!

### Recap: How to include CSS in your webpage

* **Inline:** There's no need to use _selectors_ here, directly include a `style` attribute in the element. For example: `<h1 style="color: red;">Heading</h1>`
* **Embedded:** We can place CSS in the HTML file using a `<style> ... </style>` tag.
* **External:** The CSS is kept in a seperate file, and we use a `link` tag, like so: `<link rel="stylesheet" href="path/to/my/custom.css">`. This is generally the preferred way of writing custom CSS.
Loading