What You Need to Know to be a Front End Developer in 2018

What You Need to Know to be a Front End Developer in 2018

Trane's and front-end development are always changing what worked yesterday may not work today this can make being your friend and developer pretty challenging but what's most challenging about being your friend and developer is also what's most exciting you're always learning new technologies so if you're an aspiring front-end developer or you're learning front-end technology here's what you need to know to be a front-end developer in 2018 first up what is a front-end developer there are generally two parts to any web application the front-end or client side of the web app is everything you see and interact with in the browser as a user of the application then there's the backend or server side of the web application where the applications data is saved updated manipulated and sent back to the client side think of your favorite video site when you click on that video of waterskiing puppies the video is retrieved from a database and served you by a server that's the backend the friend end displays it for you in the browser allows you to interact with the video by providing buttons to blow up the video to full screen pause rewind or share with your grandma as a web developer you'll likely need to have some knowledge of how the front and back ends of an application interact with each other however many companies split these roles into two careers a front-end developer and a back-end developer back-end developers use languages like Java Python Ruby and PHP to build the behind the scenes functionality of a web site such as storing and retrieving user data or securely accepting and storing credit card numbers a front-end developer is a generic term for someone who builds the user facing parts of websites and applications using HTML CSS and JavaScript nearly every business uses a website or application to communicate to its customers the world needs the skills of a front-end developer in this video I'm going to talk to you about what you need to know to be more general but still awesome front-end developer to be a front-end developer you'll need to learn many different technologies but the main technologies are HTML CSS and the script HTML or hypertext markup language is the foundation of every web page without it everything on the internet would be a shapeless wall of text with HTML you provide the web browser with information about how your content is structured by defining its different parts for example you surround the content of your web pages within different HTML tags to tell the browser which parts are headings sidebars a footer or main area of the site one of the goals of hTML is to provide good semantic markup that is provide information about what kind of content the HTML tag contains you use HTML to define which elements are links list items buttons paragraphs checkboxes radio buttons you style a page with CSS but search engines use this information to understand your pages and semantic markup helps accessibility tools like screen readers make more sense of your content CSS or cascading style sheets is a design language with a lot of power CSS helps us describe the presentation of webpages we use CSS to define how HTML should look and be laid out for example we can use CSS to tell the browser that we want our web page to display in a certain number of rows or columns or how much space should be between each element we'd also use CSS to change the color or font size of a button make it wider or taller bigger or smaller place it on the left right or middle of the webpage and so on part of writing good CSS means making sure designs are consistent across different devices we use CSS to make web pages responsive that means that they look good and function well on any screen size or device CSS seems deceptively easy at first but it can quickly become challenging the nuances of formatting and styling are tough and you've got thousands of options at your disposal you may need to consult a ton of different references and resources to get things right it requires a lot of practice javascript is the first programming language that you're likely to learn is a front-end developer it's a continuously evolving language that's used nearly everywhere these days on the front end back in on mobile and even desktop devices like everything else it can be challenging but fun to learn generally front-end developers write JavaScript for the browser using the Dom or document object model the document object model is like a representation of your webpage or application that allows JavaScript and the browser to communicate each HTML element on your web page is represented by the Dom and you can use JavaScript to manipulate those Dom elements for example say you have some text on your web page that reads click me you'd use HTML tags to define that text as a button with CSS you'd control what that button looks like finally with JavaScript you'd write code that triggers the page or application to do something every time the button is clicked like play a video or submit a comment to a social media post if you're serious about being a friend and developer javascript is a language you'll want to master these are some of the main tools and technologies that you'll use on a daily basis as a front-end developer the text editor is where you'll spend most of your time it's where you write the code for a given site or app Microsoft's Visual Studio code atom or sublime text are popular traces in 2018 don't worry too much about which one you should use you can try them all and figure out which one you like best developer tools for google chrome and firefox lets you look at any website and see how it's structured dev tools help you evaluate and debug your applications step through JavaScript code and manipulate and experiment with your application CSS git is a popular version control system version control systems help you to track and save changes to your project so that you can easily manage different versions and features you can also revert to previous versions of your projects or work on a single codebase as part of a team github is a specific service that allows you to your code online as well as fork or make copies of other existing code bases so you can work on them yourself or see how they're made let's talk about a few more technologies that are common for front-end developers to learn once you have a good understanding of CSS you'll be ready to learn sass sass is what's known as a CSS preprocessor basically it adds useful features to CSS that make writing organizing and maintaining the CSS easier a lot easier let's talk about JavaScript libraries and frameworks jQuery has been around since 2006 and is still widely used on a lot of websites it's not the newest library but still worth knowing as a front-end developer as it lets you quickly and easily add complex JavaScript interactions to your webpages newer JavaScript libraries and frameworks include react angular and vue.js these are all designed to make it easier to create and maintain complex web applications typically those that display large amounts of data or complex data have complex user interfaces or made up of many different UI elements and components Twitter bootstrap is a design framework that provides a variety of design templates for common website and web application components like typography forms buttons and navigation menus by adding pre-styled bootstrap CSS classes to your HTML you can quickly layout and style your webpages bootstrap makes it easy to drop in and set up calm and user interface components like photo carousels and modal windows learning how to use the terminal or the command line will give you greater control over the functionality of your computer it'll help you install different software packages and libraries as well as use version control systems like get more quickly and efficiently than using a graphical user interface no matter what kind of development you do front-end or back-end knowledge of the terminal will help you succeed as your projects grow larger and more complex you'll find that they're made up of many different parts frameworks modules libraries and tooling bundling tools like web pack and brow five with gulp help you minify and bundle your code so it can be loaded quickly and efficiently into the browser helping your applications load faster 25% of the web is WordPress WordPress is a content management system that is free and open-source WordPress is extremely versatile and while it has a reputation as a blogging platform you can extend the functionality of any wordpress site by using any of the thousands of free and open source plugins Photoshop is the behemoth when it comes to editing images for the web but sketch is a great lightweight tool that is designed for creating vector images sketch is a modern tool built for the web both are paid tools that require a perpetual license wireframes are your plans or sketches for websites before you begin to build them both balsamic and figma have cloud-based tools that let you create and share an idea in its early stages before you commit the time to creating it in full as a front-end developer you'll likely build webpages and applications based on a design or wireframe provided by a web designer rather than designing directly with these tools yourself there can be some overlap however so it's helpful for a front-end developer to know the basics of using these technologies this was a long list and you may be asking yourself how will I ever learn all this stuff it can feel daunting especially when the tools and technologies of 2018 are likely to change in 2019 and beyond just know that it's normal to feel this way take things one step at a time create a learning strategy and commit to learning and practicing as much as you can the concepts principles and tools that you learn from one programming language or framework will make it much much easier to learn similar concepts principles and tools for another language or framework so don't feel like you need to learn everything all at once there are tons of resources for learning how to be a friend and developer podcasts video tutorials books apps conferences meetups just tons of things and while it's a challenge to filter out what's most valuable as most of these resources are going to be talking about things you won't understand just yet immerse yourself in the language and take it all in concentrate at first by getting comfortable with the basics HTML CSS and JavaScript and the rest will come in time learning a new technology is hard and one of the hardest things about approaching a career like front-end development is figuring out what you need to know when you don't know what you need to know I'm a teacher at treehouse an online school where you learn at your own pace at twenty five dollars a month you get access to the front-end web development track which has on-demand content that includes videos quizzes and code challenges that will teach you HTML CSS JavaScript and more everything you need to know to start out as a front-end web developer click the link at the top of the description of this video to start your seven day free trial at treehouse and get started on the front end web development track and I'll see you there I teach the first course

50 thoughts on “What You Need to Know to be a Front End Developer in 2018”

  1. thanks for this useful information, as a beginner i wont know if this topic if usefull or not, but as a front-end web developer i will say good job and keep up.

  2. Do we need to learn the latest versions of programming language such as XHTML & HTML5 or old version of HTML is enough?

  3. To become a front end developer (junior position) it's fairly straightforward like somebody said before:
    HTML , CSS (flexbox-grid) – SASS – Javascript – Jquery – a javascript framework (react etc) and then maybe node.js or some php and SQL.

    I'm not saying it's easy to become good at these and won't take a lot of work but there are plenty of courses to get you along the way. YouTube is an amazing resource which makes everything possible!

  4. my major requires two front-end development classes..i've never coded in my life lol idk if i'm ready. it does seem very interesting though!

  5. Братья русские, нажмите лайк будто я что-то умное написал. Ото английский не понимаю. ©Startend

  6. When you see this animated video, you think all the process is goin to be fun and beautiful. And when it comes to real design…

  7. Kindly visit https://getprotos.org to upload and download projects, comment on projects and participate in online competitions

  8. Brief explanation about front-end web development with tools which are need for front-end web developer.

  9. I am a web developer, what are the essential software that could help me to develop multiple website theme within a few minutes.

  10. Can i use python instead of js? I am learning from the scratch and now enrolled to html and css course.

  11. Nice madam,
    I found many usefull links for frontend developers

Leave a Reply

Your email address will not be published. Required fields are marked *