StackHack 1.0

To develop a website, we have two important bundles: Front-end and Back-end

Front - end:

This is your web interface. This is how your users are going to view the website. To create the User Interface of your website, you need to learn HTML / CSS.

HTML:

HTML markup describes the structure of a webpage to the browser using tags, which you’ll immediately recognize as the text between the . These tags tell the browser how to present page elements like titles, headings, text, and links that are included in the HTML document.

CSS:

CSS (Cascading Style Sheets) is a style-sheet language. It gives developers greater control over things like the color, fonts, layout, and overall design of a webpage. By separating presentation (CSS) from structure (HTML) into style sheets, designs can be shared across multiple pages or tailored to different environments.

Together, these two languages are all you need to provide the structure and style of a static website, where web pages have fixed content, zero scripting, and hyperlinks are the sole form of interactivity. These days dynamic sites are where it’s at. More advanced client-side and server-side scripting languages provide a whole new range of features allowing for more interactive websites that can be tailored to each new visitor.

These language though help in static webpages. Let’s get into the practical implementation of this. Learn the HTML and CSS coding from the following links.

• Khans academy - HTML & CSS tutorial for beginners
• HTML Build

HTML and CSS included—is any code that runs in the browser a person is using to view a website. The browser temporarily downloads the source code it needs to display a webpage from a web server, then processes it independently from that server. As long as the browser remains open, the user will be able to view the static page even if they lose their Internet connection. If the site must respond to user events that require external data, like search queries, the client will need to make a request to the server over the Internet.

Moving further, with several advancements to improve the UI in terms of client interaction, scripting is done. Angular JS, is widely used coding language to serve this purpose.

You can learn Angular JS from the following links -

• Why Angular JS? How can this help in building a website?
• Fundamentals of Angular (The Tour of Heroes tutorial covers the fundamentals of Angular. In this tutorial you will build an app that helps a staffing agency manage its stable of heroes.)
• Let's learn more Angular (The goal of the course is to cover the fundamental aspects of Angular development: Components, Directives,Pipes, Services and Modules, and establish some solid ground for further courses).

Let go deeper ! Go through the following to get a broader learning :)

React Tutorial:

ReactJS basically is an open-source JavaScript library which is used for building user interfaces specifically for single page applications. It’s used for handling view layer for web and mobile apps. React also allows us to create reusable UI components. Learn here.

How to Learn React — A roadmap from beginner to advanced
This guide is for people who are starting with React. They have carefully curated the best videos and articles in each section to make it easier for learning.
Learn React online from the best React tutorials & courses recommended by the programming community.

Other Resources -

What is GitHub?

GitHub is a social network that has completely changed the way we work. Having started as a developer’s collaborative platform, GitHub is now the largest online storage space of collaborative works that exists in the world. Whether you’re interested in participating in this global mind meld or in researching this massive file dump of human knowledge, you need to be here.

What is jsFiddle?

Every developer has been in the situation where you have code or a design that you need to test quickly and possibly share with others. jsFiddle is the perfect solution; it provides a custom environment (based on user selections) to test (or fiddle with) your JavaScript, HTML, and CSS code right inside your browser.

Have a look at the blog - Top 10 web development tutorials for beginners.