+
Perfect Combination Of CSS And JAVASCRIPT
+
Here We Are Going To Cover The Path That Will Make You Ride In The Combination Of CSS And JAVASCRIPT In
+ FRONT
+ END WEB DEVELOPMENT World
+
Created By Aryan Garg
+
+
Hi Readers. Today anyone can learn anything whether it is a new technical thing that is
+ trending or any other
+ technical stuff that could be a Programming Language. Basically we are going to see the use of JAVASCRIPT.
+ Here
+ You will see the blog on perfect combination of Cascading Style Sheets(CSS) along with the taste the
+ JAVASCRIPT
+ provides at the Frontend And Backend Both in web development. Here I will focus mainly at the Frontend part
+ consisting of Vanilla JAVASCRIPT along with the use of Cascading Style Sheets(CSS) which designs the website
+ in
+ a very comprehensive way. We will also take look at various animations and transition that are playing big
+ role
+ in the UI/UX (User Interface/User Experience) improvement. At the you all can find the necessary resources
+ required for comprehensive and stylish Front End Web Development.
+
+
Web Development Is one of the rising passions in this technical world. In every
+ passionate web development
+ learner, the ultimate goal is to design a webpage or a webpage with a lot of designs and functionalities.
+ This seems very superior to think inside our mind, but the question arises “How to design a website with
+ full of
+ interaction ?”
+ Every website or a webpage we see on a web browser is consisting of a lot of instructions and steps involved
+ in
+ making of that website and designing of that webpage which has been created by the use of various components
+ which includes the use of libraries and framework code. In order to make a website, thinking the design of
+ the
+ page or how the page looks is really important as it will help us to reference about the how we have to
+ design
+ the webpage. It could be done with the help of Wireframes. They consist of various components hat are to be
+ situated inside a webpage.
+
+
+
HTML basically provides the basic structure about the webpage or the website that is
+ visible to a client or
+ the
+ user that is using that website for a particular use.
+ Here you can see the presence of the presence of the basic HTML document which we will focus later on to the
+ application of CSS and further the application of the JAVASCRIPT which will make it one of the great web
+ document with a lot of animations and presence of good interaction with the components of the web document
+ with
+ absolute stunning UI of the webpage.
+
+
CSS provides the basic structure of the styling to the webpage or the website that
+ has been formed with he
+ use
+ HTML and makes to look the website look very user interactive in design and improves the user interface a
+ lot.
+ Now our task includes to design the webpage that we have included in it and then to add the styles to the
+ UI/UX
+ by using the CSS . We are here going to separately add the external CSS File which will include all of the
+ styles of the CSS. Here in the CSS we will take all of the different components and then take each component
+ for
+ taking down the styles individually for that particular component and then take each of the component and
+ then
+ add styles to that webpage. CSS adds a lot of styling to a common and simple looking webpage and design it
+ to
+ look really impressive in scene and make it look really awesome.
+
+
+
JAVASCRIPT provides the life to the website or the webpage by making interactive in
+ nature by making it user
+ interactive in which the user could do calculations in it, interact with the buttons or the components of
+ the
+ website. After it’s release in back 1995 it has been one of the most powerful component of web development
+ which
+ has created a big revolution in this modern field.
+ Now you all will see the nice interaction with the web documents by use of DOM. DOM refers to Document
+ Object
+ Model. All the elements we are talking about are the parts and various other components that can be referred
+ as
+ the HTML parent elements or he HTML child elements. As JAVASCRIPT is a scripting language and that all helps
+ us
+ to use the logic behind the scene in the client side webpage. UI/UX can also be changed in the Vanilla
+ JAVASCRIPT. JAVASCRIPT changed the whole world as now we can code in JAVASCRIPT to make our Backend vey
+ feasible
+ and that helps a user to learn single programming language and apply that particular knowledge for making
+ the
+ website and resulting in the comprehensive design of the webpage.
+
+
+
The Best Visual Studio Code Extensions for Front End Developers
+
Here we will see the various extensions of vs code we can use in our daily front end development.
+
Created By Aryan Garg
+
+
Great tooling can help developers write faster, cleaner, and more consistent code.
+ Visual Studio Code extensions allow you to add tools, languages, debuggers, and more, to help you do just
+ that. A while back, I asked front end developers here at Shopify what extensions, packages, and plugins they
+ couldn’t live without.
+
+ Based on those conversations, I wrote two articles about the best Sublime Text plugins and the best Atom
+ packages for front end developers. In this article, I’ve highlighted my top picks for Visual Studio Code (VS
+ Code) extensions, and broken them down into the following six categories. If you want to ensure that what
+ you're building is secure, you can also check out our article on how to improve your client’s website
+ security.
+
+
Introduction
+
You should note that Visual Studio Code has a lot of built-in support for many of
+ the widely used extensions, plugins or packages found in other editors. These include support for Emmet, an
+ integrated terminal, IntelliSense for a bunch of different languages out-of-the-box (JavaScript, TypeScript,
+ JSON, HTML, CSS, Less, and Sass), as well as version control support.
+
+ Browsing and installing extensions from within Visual Studio Code is pretty easy. Simply type cmd + shift +
+ x (on a Mac) or ctrl + shift + x (on a PC) to bring up the View: Extensions panel, then click on the Install
+ button to install the Visual Studio Code extension you want.
+
+ You can also browse and install extensions by clicking on the Extensions tab in the Activity Bar at the top
+ of the VS Code home page. Or, you can use the Command Palette to install extensions (all at the same time)
+ by typing cmd + shift + p (OSX) or ctrl + shift + p (Windows, Linux), then type “Install extensions” and
+ select Extensions: Install Extensions.
+
+
+
HTML Snippets
+
HTML Snippets adds in rich language support for HTML markup, including snippets, quick
+ info, and descriptions that include whether a tag is deprecated.
+
+
+
ES Lint
+
This extension integrates ESLint into VS Code, and it requires you to have already
+ installed ESLint on your computer either locally or globally. You can do this with npm, by running npm
+ install -g eslint. There are more detailed configuration and installation settings and instructions on the
+ Visual Studio Code extension marketplace page.
+
+
+
Git Lens
+
The GitLens extension is truly amazing; it enables you to visualize code authorship
+ within VS Code. You can
+ browse and explore the history of a file, view a git blame annotation for each file line, and even add a
+ changes (diff) hover annotation, all of which are fully customizable.
+
+
+
CSS Peek
+
CSS Peak extends HTML and Embedded JavaScript templates with Go To Definition support
+ for CSS classes and IDs
+ found in your markup.
+
+
+
Rainbow Brackets
+
Add some fun into your editor with Rainbow Brackets! This Visual Studio Code extension
+ provides rainbow
+ colors for round brackets, square brackets, and curly brackets. This can be especially helpful for
+ JavaScript programmers!
+
+
+
Indent Rainbow
+
+ The Indent Rainbow is a simple extension that colorizes the indentation in front of your text, alternating
+ between different colors on each step. It makes your indentation easier to read, especially if you’re
+ writing code for Python or Nim.
+
+
+
+
My Experience At 30 Days Of Web Development
+
Here I Have Included My Experience At The 30 Days Of Web Development Path
+
Created By Aryan Garg
+
+
+ 30 Days Of Web Development Got Started From 20 December Last Year And The Things I havve Learned From it and
+ learned many new things such as firebase that was really new to me as i was used many other things such as
+ node js and mongo DB as the backend and database for the web development. Here i also met various other new
+ mentors and seniors which helped in helped in every issue or error i got and that has made me very efficient
+ in coding and web development and the resources that could be used here and there so that could be used in
+ various things.I Would like to thanks Harsh Kumar Khatri Sir for smooth conduction of the
+ program. they made us learn various other thing which are really necessary along with coding.various other
+ new guys and partners in coding met with me that have taught me really necessary new things that would be
+ really important in upcoming life.
+
+
+
+ the path started from html and went through styling with CSS and then it went through framework bootstrap
+ and finally we went into the ocean of scripting language javascript that had given life to web development
+ and finally we went into the firebase which provided various other facilities such as database, backend
+ along with hosting services.
+ so in last, i colud conclude that the projects that i developed in this series or the path were really
+ interesting and unique projects that could be included in our CV or resume that would be really beneficial.
+ I hope we get to see more path or series of interesting coding competitions from DSC Gropus all over the
+ INDIA as i am also the member of DSC NIT J . it was great expereince with various Gopus and collaborators as
+ it made this program really big thing that could help many of students to achieve new things in their life.
+
+
+
Bye For Now. Thanks to all of the mentors, collaborators and DSC Leads.
+