Getting started with web development

Web development refers in general to the tasks associated with developing websites for hosting via intranet or internet. The web development process includes web design, web content development, client-side/server-side scripting and network security configuration, among other tasks.

Web development is the coding or programming that enables website functionality, per the owner's requirements. It mainly deals with the non-design aspect of building websites, which includes coding and writing markup.

Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services.

Web development is also known as website development, while the professionals that maintain a website are called web developers or (more commonly) web devs.

So, you’re interested in learning web development and becoming a web developer? First of all, congratulations. You’ve made a great choice.

Learning Web Development can be hard

Start with the end in mind. One of the first things I recommend doing when starting out learning web development is to decide upon a clear end goal, and keep it in mind.

Whatever your goal, it’s important to understand why you are doing this. This understanding will help you be more productive with your learning time. It will also help encourage you through those times when you feel like giving up.

Remember, no matter how elaborate and far away the end goal may seem now, you can achieve it with hard work and perseverance.

Assuming you have no previous experience, it’s a good idea in the beginning to also decide if your interest lies in back end or front end development. Let me briefly explain the difference.

• Frontend — this is what the end user see’s and interacts with on the page. Its all the design, fancy effects, layout and imagery that creates the user experience. Generally front end developers will be visual creatives with excellent design skills and a passion for accessibility and user experience. Technologies often associated with front end web development are HTML, CSS and JavaScript.

• Backend — this is the part that typically processes, stores, and manipulates data. It’s how the website or application works. Back-end developers are generally good problem solvers, logical thinkers who are interested in the functionality of a website or application. Back-end development is usually associated with server side languages such as PHP, Python, and Ruby.

  Either way, wherever your interest lies, I still think that the best place to start is by learning some basic HTML and CSS. After all, it doesn’t matter what area of development that you ultimately want to work in, you still need to be able to display it on a webpage in some kind of mildly presentable form.

Getting started with the web is a concise series introducing you to the practicalities of web development. You'll set up the tools you need to construct a simple webpage and publish your own simple code.

It's a lot of work to create a professional website, so if you're new to web development, we encourage you to start small. You won't build another Facebook right away, but it's not hard to make your own simple website online, so we'll start there.

In Installing basic software, we show you what tools you need to do simple web development and how to install them properly.

What tools do I actually need, right now?

In this article, we'll set you up with the bare minimum — a text editor and some modern web browsers.

Installing a text editor

You probably already have a basic text editor on your computer. By default Windows includes Notepad and macOS comes with TextEdit. Linux distros vary; Ubuntu comes with gedit by default.

We recommend starting with Visual Studio Code, which is a free editor, that offers live previews and code hints.

Installing modern web browsers

• Firefox
• Chrome
• Opera
• Safari
• Microsoft Edge

We recommend to use Chrome, because it is very flexible in all platform.

What tools do the professionals use?

• A computer. Maybe that sounds obvious to some people, but some of you are reading this article on your phone or a library computer. For serious web development, it's better to invest in a desktop or laptop computer running Windows, macOS or Linux.
• A text editor, to write code in. Visual Studio Code and there are many text editor out there!
• Web browsers, to test code in. Currently, the most-used browsers are Chrome, Opera, Safari, Firefox, Microsoft Edge
• More tools besides!

Introduction to Hypertext Markup Language (HTML)

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

HTML defines the basic framework of a website – the foundation upon which everything else is built upon. It forms the blocks that define a page’s layout, format, and critical components. Although it is theoretically possible to code a website on HTML only, it will be just a barebone site with no functions unless it’s enriched with CSS and JavaScript. Also, even simple style modifications such as changing the color of a button require a lot of coding to be executed using HTML only.

"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.

HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements".

• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML elements tell the browser how to display the content

The main parts of our element are as follows:

• The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.
• The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
• The content: This is the content of the element, which in this case, is just text.
• The element: The opening tag, the closing tag, and the content together comprise the element.

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) allows you to create great-looking web pages Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices.

In short meaning CSS is use for styling and designing the website such as how the layouts should look like, fonts, colors, background etc.

CSS is the language we use to style a Web page.

• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS SYNTAX

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

In this case our H1 element should be color blue and font-size of 12px.

There are 3 ways to link your stylesheets to your HTML files

• Inline
• Internal
• External

Out of the 3 given. We recommend to use the External CSS. To manage your code properly.

JavaScript — Dynamic client-side scripting

JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which (HTML and CSS) we have covered in much more detail in other parts of the Learning Area.

JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.

JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:

• Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.
• Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.

• JavaScript is the world's most popular programming language.
• JavaScript is the programming language of the Web.

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:

• HTML to define the content of web pages
• CSS to specify the layout of web pages
• JavaScript to program the behavior of web pages

• HTML is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page.
• CSS is a language of style rules that we use to apply styling to our HTML content, for example setting background colors and fonts, and laying out our content in multiple columns.
• JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)

There are many resources in the Internet to start learning JavaScript.

JavaScript is very complex topic we recommend you to practice, practice, practice, code, code code.

Bootstrap CSS Frameworks

Build fast, responsive sites with Bootstrap

What is Bootstrap

It is a front-end framework used for easier and faster web development. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many others. It can also use JavaScript plug-ins. It facilitates you to create responsive designs.

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

• Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.
• Bootstrap is completely free to download and use!

There are 2 ways to include Bootstrap in your project

• Install via package manager
• Include via CDN

Checkout this documentation to learn more about Bootstrap

SASS (Syntactically Awesome Stylesheet)

What is a Sass?

SASS stands for Syntactically Awesome Stylesheet. Sass is an extension to CSS. Sass is a CSS pre-processor. Sass is completely compatible with all versions of CSS. Sass reduces repetition of CSS and therefore saves time.

SASS is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. SassScript is the scripting language itself.

• Sass is a CSS pre-processor.
• Sass reduces repetition of CSS and therefore saves time.
• Sass stands for Syntactically Awesome Stylesheet
• Sass is an extension to CSS
• Sass is completely compatible with all versions of CSS
• Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
• Sass is free to download and use

Why Use Sass?

Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.

SASS lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.

SASS VS CSS

As you can see we can nest element in SASS making our CSS more powerful and dynamic

SCSS contains all the features of CSS and contains more features that are not present in CSS which makes it a good choice for developers to use it. SCSS is full of advanced features. SCSS offers variables, you can shorten your code by using variables. It is a great advantage over conventional CSS.

To learn more about SASS you can look at the documentation.

Git (Version Control) & Github (Code hosting platform)

What is GitHub? What is Git? And How to Use These Developer Tools.

The first programs you write will probably not be very impressive. You'll make lots of mistakes and you'll never want to revisit the past.

But soon enough, you'll be writing large, complex programs. Maybe you'll delete some stuff now that you want to bring back later. Or maybe you'll bring in a friend to help, and want to gracefully add their changes to your program while you continue to work on your parts.

That's where version control comes in, and it's a skill that any employer will expect you to have mastered. It's also extremely useful for anyone working on anything that is saved in pieces - from a computer program to a recipe to a novel.

The first thing you'll want to do are install git. Click hero to install Git

Once you've done that, create a Github account.

What is version control?

Version control refers to the ability to save your place in a document or folder and reference previous saves.

What is Git?

Git is a version control system developed by Linus Torvalds in 2005 (the same guy who wrote Linux). Git helps developers keep track of the state of their code and allows collaboration on a codebase. We'll go over the main components a little later.

Git is a version-control system for tracking changes in computer files and coordinating work on those files among multiple people. Git is a Distributed Version Control System. So Git does not necessarily rely on a central server to store all the versions of a project’s files. Instead, every user “clones” a copy of a repository (a collection of files) and has the full history of the project on their own hard drive. This clone has all of the metadata of the original while the original itself is stored on a self-hosted server or a third party hosting service like Github.

Instead of needing to keep track of every single line of code in your program, it instead notes the changes between the code you have now and the last time you saved. It keeps a running note of when each line of code was saved last, and stores them in a special hidden folder.

What is Github?

Github is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere. This tutorial teaches you GitHub essentials like repositories, branches, commits, and pull requests.

GitHub is an online software development platform used for storing, tracking, and collaborating on software projects. It enables developers to upload their own code files and to collaborate with fellow developers on open-source projects.

Below is a sample of Github repository.

We recommend to watch Git & Github tutorial to understand better.

React JavaScript Library

What is React used for?

React is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It's used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.

• React is a JavaScript library for building user interfaces.
• React is used to build single-page applications.
• React allows us to create reusable UI components.

React is a JavaScript-based UI development library. Facebook and an open-source developer community run it. Although React is a library rather than a language, it is widely used in web development. The library first appeared in May 2013 and is now one of the most commonly used frontend libraries for web development.

React offers various extensions for entire application architectural support, such as Flux and React Native, beyond mere UI.

Why React?

React’s popularity today has eclipsed that of all other front-end development frameworks. Here is why:

• Easy creation of dynamic applications: React makes it easier to create dynamic web applications because it requires less coding and offers more functionality, as opposed to JavaScript, where coding often gets complex very quickly.
• Improved performance: React uses Virtual DOM, thereby creating web applications faster. Virtual DOM compares the components’ previous states and updates only the items in the Real DOM that were changed, instead of updating all of the components again, as conventional web applications do.
• Reusable components: Components are the building blocks of any React application, and a single app usually consists of multiple components. These components have their logic and controls, and they can be reused throughout the application, which in turn dramatically reduces the application’s development time.
• Unidirectional data flow: React follows a unidirectional data flow. This means that when designing a React app, developers often nest child components within parent components. Since the data flows in a single direction, it becomes easier to debug errors and know where a problem occurs in an application at the moment in question.
• Small learning curve: React is easy to learn, as it mostly combines basic HTML and JavaScript concepts with some beneficial additions. Still, as is the case with other tools and frameworks, you have to spend some time to get a proper understanding of React’s library.
• It can be used for the development of both web and mobile apps: We already know that React is used for the development of web applications, but that’s not all it can do. There is a framework called React Native, derived from React itself, that is hugely popular and is used for creating beautiful mobile applications. So, in reality, React can be used for making both web and mobile applications.
• Dedicated tools for easy debugging: Facebook has released a Chrome extension that can be used to debug React applications. This makes the process of debugging React web applications faster and easier.

To learn more about React checkout the React documentation.