What is Front-End Web Development?

[MUSIC] 0:00 Think of your favorite website. 0:09 This could be a news website, an e-commerce site for shopping, 0:10 an artist's portfolio site, a social media platform or 0:15 a learning site like Treehouse. 0:20 No matter what category your favorite site falls into, 0:22 it's bound to have a lot in common with other websites. 0:26 To visit any website, you first 0:30 have to load it in a browser like Google Chrome, Firefox or Safari. 0:33 Once it loads, the website usually contains a way to 0:39 get around in the form of navigation links or a search bar. 0:42 In addition to navigation, you might find text to read, 0:47 images to look at, videos to watch, and links to click on. 0:51 All these different types of websites have something else in common. 0:56 Designing them wasn't enough. Designers create the structure 1:00 of a web page using sketches and wireframes, and make decisions 1:05 about color, typography, and photography when creating mockups. 1:09 But until the developer gets involved, a mockup is just a picture. 1:16 Developers turn that picture into an interactive website by writing code: 1:20 code that instructs the web browser to display that text, present those images, 1:25 take the user to a new page once they've clicked a link and much more. 1:31 Hi, my name is Anwar. 1:37 I'm a designer, a developer and a teacher at Treehouse. 1:38 My pronouns are he/him. 1:42 I'm here today to introduce you to front-end web development. 1:44 In the opening of this video, you learned that front-end web developers 1:49 write the code that turns a static mockup into an interactive web page. 1:53 We'll take a look at the types of code front-end developers write in an 1:59 upcoming video and even try it out ourselves. 2:03 But before we do that, let's take a closer look at the term front-end. 2:07 Front-end developers are sometimes referred to as client side developers 2:12 since everything we code is directly viewable by the client. 2:16 In other words, the visitor to our website or app. 2:22 Here I am on Treehouse's website, viewing a course called 2:27 HTML Basics using the Google Chrome web browser. 2:30 There's a navigation bar featuring the green Treehouse logo, 2:35 along with links called Home, Tracks, Library, Community and Support. 2:39 The navigation uses light-colored text on a dark gray background and 2:46 a typeface with rather round-looking letters. There's a bit of empty 2:50 space beneath the navigation, and then the main page contents begin 2:55 including a prominent button inviting me to start the course. 3:01 How did all this content appear in my browser? 3:06 How did Treehouse create a navigation bar containing these exact words, 3:09 this exact combination of colors and typography, and 3:15 exactly this much space underneath? 3:19 Why does this content rearrange as I make my browser narrower 3:22 until my screen resembles the size of a mobile device? 3:27 The answer is that a front-end developer implemented these decisions 3:32 using code by writing a combination of HTML, CSS, and JavaScript. 3:38 We'll begin investigating these languages in our next video. 3:44 So if a front-end developer controls the content and 3:50 presentation of webpages like this, what does a back-end developer do? 3:53 Well, you might have noticed that the top right corner of 3:59 the navigation bar remembers some information about me as a user. 4:02 It looks like I've scored nearly 9,000 points while reviewing Treehouse lessons. 4:07 And there's a small profile picture of me, 4:13 as well as my name if I click the down arrow. 4:16 For a web application to remember data about me, 4:19 it needs to store that information somewhere on a database. 4:23 Back-end developers build the databases that store information. 4:28 You'll learn more about back-end development in the introduction to 4:33 Treehouse's Full Stack JavaScript and Python Tech Degrees. 4:37 So what kind of student makes a great front-end developer? 4:43 You'll need to be excited about learning, exploring, and 4:47 practicing code since front-end developers write a lot of it. 4:50 You'll want to constantly seek inspiration. 4:55 Front-end developers are always checking out other websites and 4:58 seeing how they work. And while front-end 5:01 developers don't need to be experts in User Experience design, 5:04 it helps to have at least some interest in usability principles. 5:09 Everything you build will be interacted with directly by users. 5:14 And as you'll be in constant contact with designers, 5:18 it helps to speak their language. 5:21 Ready to check out some code? We'll investigate the three 5:24 languages used by front-end developers in our next video. 5:28

You need to sign up for Treehouse in order to set up Workspace

Sign up