title
Becoming a Frontend Developer / Designer in 2019 - Five Step Guide

description
https://skl.sh/designcourse19 - First 500 people to sign up will get their first 2 months free! Today's Question: Should a UI designer be able to code frontend as well? -- Now that the new year is here, I thought I would put this video together that addressed the idea of becoming a frontend developer / designer here in 2019. It's a 5 step, sequential process that I formulated that I feel would make the process of going from an absolute beginner to a pretty solid frontend dev by the end of 2019 and beyond. Technically, I'm mixing two job roles into one by suggesting frontend developers should start with design. However, I personally think the two are so closely related that they should become one. A UI designer who lacks frontend development knowledge might make the mistake of designing UI's that just aren't achievable or efficient in code. A frontend developer who lacks design knowledge won't be able to identify problematic areas in a mockup/prototype provided to him. Also, if you're a one man show freelancer, understanding ui/ux and frontend dev is a necessity! Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'Becoming a Frontend Developer / Designer in 2019 - Five Step Guide', 'heatmap': [{'end': 564.56, 'start': 541.906, 'weight': 0.754}, {'end': 637.554, 'start': 616.517, 'weight': 0.708}, {'end': 893.202, 'start': 845.523, 'weight': 1}], 'summary': 'Learn the five-step approach to become a front-end developer in 2019, with a special offer from skillshare including 25,000 classes and a 2-month free subscription. understand ui design fundamentals, prototyping, evolution of design tools, css, sas, javascript, and front-end development essentials.', 'chapters': [{'end': 111.159, 'segs': [{'end': 44.5, 'src': 'embed', 'start': 20.362, 'weight': 0, 'content': [{'end': 26.646, 'text': "For instance, you're about to watch my video on front end development, but after you could watch this course along with many others at Skillshare.", 'start': 20.362, 'duration': 6.284}, {'end': 30.849, 'text': 'Skillshare is also super affordable with a subscription that only costs 10 bucks a month.', 'start': 26.766, 'duration': 4.083}, {'end': 37.074, 'text': "But if you're one of the first 500 of my subscribers to click the link below here in the description, you get the first two months free.", 'start': 31.109, 'duration': 5.965}, {'end': 37.955, 'text': 'So take advantage.', 'start': 37.234, 'duration': 0.721}, {'end': 40.177, 'text': 'Hey everyone, Gary Simon, of course, Zetro.', 'start': 38.115, 'duration': 2.062}, {'end': 44.5, 'text': "Welcome to 2019 as if I'm the mayor of 2019.", 'start': 40.217, 'duration': 4.283}], 'summary': 'Skillshare offers affordable subscription at $10/month with first 2 months free for first 500 subscribers.', 'duration': 24.138, 'max_score': 20.362, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw20362.jpg'}, {'end': 105.877, 'src': 'embed', 'start': 77.052, 'weight': 1, 'content': [{'end': 80.115, 'text': "And they came to me and said, Hey Gary, I'm going to become a front end developer.", 'start': 77.052, 'duration': 3.063}, {'end': 89.924, 'text': "What should I do? Uh, this is basically the approach that I've kind of outlined a blueprint for for making this a reality for your life.", 'start': 80.536, 'duration': 9.388}, {'end': 91.265, 'text': 'If you want to become a front end dev.', 'start': 89.984, 'duration': 1.281}, {'end': 91.846, 'text': 'All right.', 'start': 91.645, 'duration': 0.201}, {'end': 94.368, 'text': 'So you can notice it also says a five step approach.', 'start': 91.886, 'duration': 2.482}, {'end': 94.768, 'text': 'All right.', 'start': 94.428, 'duration': 0.34}, {'end': 98.531, 'text': "So I also made these five steps and we're going to talk about each one of them.", 'start': 94.828, 'duration': 3.703}, {'end': 102.554, 'text': "And I made them in the the idea that they're going to be in sequential order.", 'start': 98.991, 'duration': 3.563}, {'end': 105.877, 'text': "So you're going to start with step one and you're going to end with step five.", 'start': 102.654, 'duration': 3.223}], 'summary': 'Outlined a 5-step approach for becoming a front end developer.', 'duration': 28.825, 'max_score': 77.052, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw77052.jpg'}], 'start': 0.249, 'title': 'Becoming a front end developer in 2019', 'summary': 'Provides a five-step approach for becoming a front-end developer in 2019, and includes a special offer from skillshare with 25,000 classes and a 2-month free subscription.', 'chapters': [{'end': 111.159, 'start': 0.249, 'title': 'Becoming a front end developer in 2019', 'summary': 'Provides a five-step approach for becoming a front-end developer in 2019, with a special offer from skillshare including 25,000 classes and a 2-month free subscription.', 'duration': 110.91, 'highlights': ['Skillshare offers 25,000 different classes in coding, design, business, and more, along with a super affordable subscription for $10 a month. Skillshare provides a wide range of classes and a cost-effective subscription, making learning accessible.', 'The chapter outlines a five-step approach for becoming a front-end developer, designed for individuals with basic computer experience. The approach is tailored for those with basic computer knowledge and provides a structured path for becoming a front-end developer.', 'A special offer of the first two months free on Skillshare is available for the first 500 subscribers who click the provided link in the description. The first 500 subscribers can avail of a special offer for a free two-month subscription on Skillshare by clicking the provided link.']}], 'duration': 110.91, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw249.jpg', 'highlights': ['Skillshare offers 25,000 classes for $10 a month, making learning accessible.', 'The chapter outlines a five-step approach for becoming a front-end developer.', 'A special offer of the first two months free on Skillshare is available for the first 500 subscribers.']}, {'end': 403.118, 'segs': [{'end': 217.616, 'src': 'embed', 'start': 152.997, 'weight': 0, 'content': [{'end': 154.998, 'text': 'But for the most part, try to stick to this template.', 'start': 152.997, 'duration': 2.001}, {'end': 159.461, 'text': "So let's start off with the very first step, which is design fundamentals.", 'start': 155.419, 'duration': 4.042}, {'end': 160.766, 'text': 'All right.', 'start': 160.506, 'duration': 0.26}, {'end': 172.25, 'text': 'so design fundamentals or understanding basic design principles is not specific or unique to just UI design or front end developers and designing apps and websites.', 'start': 160.766, 'duration': 11.484}, {'end': 183.714, 'text': "Really, it's an all encompassing principles and guidelines that apply to identity and logo design, to poster design, print design, packaging design,", 'start': 172.75, 'duration': 10.964}, {'end': 184.134, 'text': 'et cetera.', 'start': 183.714, 'duration': 0.42}, {'end': 187.876, 'text': "And so we're going to talk about some of these right now.", 'start': 184.614, 'duration': 3.262}, {'end': 198.061, 'text': "But first, understanding these design fundamentals is really important because there's some front end developers who maybe might be great at HTML,", 'start': 188.476, 'duration': 9.585}, {'end': 200.582, 'text': "CSS and JavaScript, but they're not great at design.", 'start': 198.061, 'duration': 2.521}, {'end': 206.667, 'text': 'But if you really wanted to be a well-rounded front-end developer who can handle both of these aspects,', 'start': 200.642, 'duration': 6.025}, {'end': 209.889, 'text': 'then understanding these following points is going to be very important.', 'start': 206.667, 'duration': 3.222}, {'end': 212.692, 'text': "And don't worry, it doesn't take months to learn them.", 'start': 209.99, 'duration': 2.702}, {'end': 217.616, 'text': 'I mean you could sit down, read a book about them, go on Google,', 'start': 212.752, 'duration': 4.864}], 'summary': "Understanding design fundamentals is crucial for well-rounded front-end developers and doesn't take months to learn.", 'duration': 64.619, 'max_score': 152.997, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw152997.jpg'}, {'end': 334.409, 'src': 'embed', 'start': 260.98, 'weight': 3, 'content': [{'end': 269.843, 'text': "There's a great plugin that I use often, called Contrast with a K, that you can use to help you make sure that your contrast is up to par.", 'start': 260.98, 'duration': 8.863}, {'end': 275.644, 'text': 'But understanding color and contrast and using correct color combinations is very important.', 'start': 270.483, 'duration': 5.161}, {'end': 277.645, 'text': 'Next up is white space.', 'start': 276.405, 'duration': 1.24}, {'end': 279.626, 'text': 'So if we see on this slide right here,', 'start': 278.005, 'duration': 1.621}, {'end': 290.316, 'text': "we'll see that we have design fundamentals this type here and we have step one and it seems to be sort of encased in what is negative or white space,", 'start': 280.606, 'duration': 9.71}, {'end': 296.423, 'text': "as it's called, and it really helps to frame the important elements of your design quite a bit.", 'start': 290.316, 'duration': 6.107}, {'end': 303.05, 'text': 'so using this padding and these margins and white space essentially, and knowing how to use them, is really important.', 'start': 296.423, 'duration': 6.627}, {'end': 305.311, 'text': 'Next up is visual hierarchy.', 'start': 303.61, 'duration': 1.701}, {'end': 309.554, 'text': "For instance, we have step one up here and notice it's a lot smaller.", 'start': 305.691, 'duration': 3.863}, {'end': 312.916, 'text': "I've also made it all caps lock.", 'start': 309.834, 'duration': 3.082}, {'end': 316.539, 'text': 'And then we have this huge design fundamentals.', 'start': 313.397, 'duration': 3.142}, {'end': 325.705, 'text': "That's because I've placed priority over these two different elements of this design and I've emphasized them by scale.", 'start': 316.579, 'duration': 9.126}, {'end': 328.066, 'text': 'And I also caps lock this.', 'start': 326.425, 'duration': 1.641}, {'end': 334.409, 'text': 'So creating visual separation between the different areas on your design is so important.', 'start': 328.346, 'duration': 6.063}], 'summary': 'Using contrast plugin, white space, and visual hierarchy for design fundamentals is crucial.', 'duration': 73.429, 'max_score': 260.98, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw260980.jpg'}, {'end': 403.118, 'src': 'embed', 'start': 357.47, 'weight': 6, 'content': [{'end': 363.375, 'text': 'uh in in in all these unnecessary elements, simply because they have them and they know how to use them.', 'start': 357.47, 'duration': 5.905}, {'end': 372.021, 'text': 'uh, technically, but usually more often than not, simplest being simple is a lot more effective than being complex.', 'start': 363.375, 'duration': 8.646}, {'end': 375.764, 'text': 'So understanding that dynamic also very important.', 'start': 372.362, 'duration': 3.402}, {'end': 380.107, 'text': 'Uh, and then consistency, understanding consistency is very important.', 'start': 376.365, 'duration': 3.742}, {'end': 389.492, 'text': 'You know, uh, accurately or consistently, using the same type, uh, in the same pattern of sense, uh, the same colors, uh, this,', 'start': 380.167, 'duration': 9.325}, {'end': 396.295, 'text': "the same general design aesthetic that you're using or that you're going for to elicit certain emotions is very important as well.", 'start': 389.492, 'duration': 6.803}, {'end': 398.416, 'text': "one that i didn't include here is also scale.", 'start': 396.295, 'duration': 2.121}, {'end': 403.118, 'text': 'understanding scale, especially as it pertains to type, is very important.', 'start': 398.416, 'duration': 4.702}], 'summary': 'Simplicity and consistency are key in design, as scale and type play crucial roles.', 'duration': 45.648, 'max_score': 357.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw357470.jpg'}], 'start': 111.159, 'title': 'Ui design fundamentals', 'summary': 'Emphasizes the importance of understanding design fundamentals before learning user interface design, focusing on principles such as color and contrast, white space, visual hierarchy, complexity versus simplicity, and consistency, as highlighted during live design reviews.', 'chapters': [{'end': 217.616, 'start': 111.159, 'title': 'Ui design fundamentals & learning steps', 'summary': 'Discusses the importance of understanding design fundamentals before learning user interface design, as highlighted during live design reviews, emphasizing the all-encompassing principles and guidelines that apply to various design aspects and the importance of being a well-rounded front-end developer.', 'duration': 106.457, 'highlights': ['Understanding design fundamentals before learning user interface design is crucial, as highlighted during live design reviews, where lack of understanding in design principles is evident in work.', 'Design fundamentals apply to various design aspects, including identity and logo design, poster design, print design, and packaging design, emphasizing their all-encompassing nature.', 'Importance of being a well-rounded front-end developer who can handle both design and development aspects, stressing the significance of understanding design principles in addition to HTML, CSS, and JavaScript skills.']}, {'end': 403.118, 'start': 217.616, 'title': 'Ui design fundamentals', 'summary': 'Emphasizes the importance of color and contrast, white space, visual hierarchy, complexity versus simplicity, and consistency in ui design, highlighting the significance of each principle in creating effective and aesthetically pleasing designs.', 'duration': 185.502, 'highlights': ['Understanding color and contrast is crucial for UI designs, as incorrect contrast can hinder readability; a plugin called Contrast with a K can be used to ensure contrast is up to par. Color and contrast are essential in UI designs, as incorrect contrast can hinder readability. A plugin called Contrast with a K can be used to ensure contrast is up to par.', 'Utilizing white space effectively frames the important elements of a design, emphasizing the significance of padding, margins, and white space in design. Utilizing white space effectively frames the important elements of a design, emphasizing the significance of padding, margins, and white space in design.', 'Creating visual hierarchy through scale, emphasis, and design elements is crucial for prioritizing different elements in a design, ensuring clear separation and emphasis. Creating visual hierarchy through scale, emphasis, and design elements is crucial for prioritizing different elements in a design, ensuring clear separation and emphasis.', 'Emphasizing the importance of simplicity over unnecessary complexity in design, with a focus on utilizing design elements effectively to enhance effectiveness. Emphasizing the importance of simplicity over unnecessary complexity in design, with a focus on utilizing design elements effectively to enhance effectiveness.', 'Consistency in design elements, such as type, color, and overall aesthetic, is vital in creating a cohesive and emotion-evoking design. Consistency in design elements, such as type, color, and overall aesthetic, is vital in creating a cohesive and emotion-evoking design.', 'Understanding scale, particularly in relation to type, is crucial for effective UI designs. Understanding scale, particularly in relation to type, is crucial for effective UI designs.']}], 'duration': 291.959, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw111159.jpg', 'highlights': ['Understanding design fundamentals before learning user interface design is crucial, as highlighted during live design reviews, where lack of understanding in design principles is evident in work.', 'Importance of being a well-rounded front-end developer who can handle both design and development aspects, stressing the significance of understanding design principles in addition to HTML, CSS, and JavaScript skills.', 'Design fundamentals apply to various design aspects, including identity and logo design, poster design, print design, and packaging design, emphasizing their all-encompassing nature.', 'Understanding color and contrast is crucial for UI designs, as incorrect contrast can hinder readability; a plugin called Contrast with a K can be used to ensure contrast is up to par.', 'Utilizing white space effectively frames the important elements of a design, emphasizing the significance of padding, margins, and white space in design.', 'Creating visual hierarchy through scale, emphasis, and design elements is crucial for prioritizing different elements in a design, ensuring clear separation and emphasis.', 'Emphasizing the importance of simplicity over unnecessary complexity in design, with a focus on utilizing design elements effectively to enhance effectiveness.', 'Consistency in design elements, such as type, color, and overall aesthetic, is vital in creating a cohesive and emotion-evoking design.', 'Understanding scale, particularly in relation to type, is crucial for effective UI designs.']}, {'end': 529.878, 'segs': [{'end': 466.817, 'src': 'embed', 'start': 423.615, 'weight': 0, 'content': [{'end': 430.883, 'text': "I'll try to put some resources in the description below is really going to help you before you start to jump into the next step.", 'start': 423.615, 'duration': 7.268}, {'end': 435.324, 'text': 'So step two after you understand these basic design fundamentals,', 'start': 431.403, 'duration': 3.921}, {'end': 443.127, 'text': 'then you can try to learn how to apply them by designing and prototyping your user interfaces, be that for web pages or apps or whatever.', 'start': 435.324, 'duration': 7.803}, {'end': 448.408, 'text': 'And before we talk about which different software options that you have available,', 'start': 443.847, 'duration': 4.561}, {'end': 454.391, 'text': "it's very important that you understand that you should learn how to design before you code.", 'start': 448.408, 'duration': 5.983}, {'end': 458.393, 'text': "Now that's going to be step three, which is learning HTML, CSS, etc.", 'start': 454.451, 'duration': 3.942}, {'end': 466.817, 'text': "And that's because I notice there's some front end developers, like I mentioned before, who might be great at HTML, CSS, etc.", 'start': 459.054, 'duration': 7.763}], 'summary': 'Learn basic design fundamentals before coding, then apply them through prototyping. step three involves learning html, css, etc.', 'duration': 43.202, 'max_score': 423.615, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw423615.jpg'}, {'end': 537.383, 'src': 'embed', 'start': 509.087, 'weight': 1, 'content': [{'end': 517.972, 'text': "And that's why you want to go first back into one of these prototyping and design tools, And that way it's much easier to change things around,", 'start': 509.087, 'duration': 8.885}, {'end': 524.835, 'text': "and it makes your life much easier as well, just because you're able to visualize right in front of you exactly what you want to design.", 'start': 517.972, 'duration': 6.863}, {'end': 529.878, 'text': "All right, so let's talk about these actual software applications.", 'start': 525.196, 'duration': 4.682}, {'end': 537.383, 'text': 'Now, before I begin, when I started in the late 90s, We use Adobe Photoshop for UI design and creating mockups.', 'start': 529.938, 'duration': 7.445}], 'summary': 'Using prototyping tools for ui design improves visualization and flexibility.', 'duration': 28.296, 'max_score': 509.087, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw509087.jpg'}], 'start': 403.118, 'title': 'Ui design fundamentals & prototyping', 'summary': 'Emphasizes the importance of understanding design fundamentals before learning to code, highlighting the benefits of prototyping in creating user interfaces for web pages or apps.', 'chapters': [{'end': 529.878, 'start': 403.118, 'title': 'Ui design fundamentals & prototyping', 'summary': 'Emphasizes the importance of understanding design fundamentals before learning to code, highlighting the benefits of prototyping in creating user interfaces for web pages or apps.', 'duration': 126.76, 'highlights': ['Understanding design fundamentals is crucial before learning to code, as it helps in effectively prototyping user interfaces for web pages or apps.', 'Prototyping and designing interfaces before coding can save time and effort, as it allows visualization and easy modification of the design.', 'Learning HTML, CSS, etc., should follow understanding design fundamentals and prototyping to ensure a comprehensive skill set for front end developers.']}], 'duration': 126.76, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw403118.jpg', 'highlights': ['Understanding design fundamentals is crucial before learning to code, as it helps in effectively prototyping user interfaces for web pages or apps.', 'Prototyping and designing interfaces before coding can save time and effort, as it allows visualization and easy modification of the design.', 'Learning HTML, CSS, etc., should follow understanding design fundamentals and prototyping to ensure a comprehensive skill set for front end developers.']}, {'end': 841.481, 'segs': [{'end': 573.263, 'src': 'heatmap', 'start': 541.906, 'weight': 0.754, 'content': [{'end': 546.61, 'text': "And some people still choose to use it just because they're old school.", 'start': 541.906, 'duration': 4.704}, {'end': 555.276, 'text': "But what happened eventually is we had Sketch, which released, or it's called Sketch app, which is just for Mac only.", 'start': 546.81, 'duration': 8.466}, {'end': 556.737, 'text': 'And it really.', 'start': 555.837, 'duration': 0.9}, {'end': 564.56, 'text': 'made a lot of people shift away from Photoshop and into this app because it was designed specifically for UI design.', 'start': 557.838, 'duration': 6.722}, {'end': 573.263, 'text': "Photoshop is a Swiss army knife and it's just bogged down with so many different features that aren't really pertinent to UI design.", 'start': 565.3, 'duration': 7.963}], 'summary': 'Sketch app for mac led to shift from photoshop for ui design.', 'duration': 31.357, 'max_score': 541.906, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw541906.jpg'}, {'end': 641.077, 'src': 'heatmap', 'start': 616.517, 'weight': 0.708, 'content': [{'end': 623.081, 'text': "It's in browser and it has a lot of interesting features that you can use, and all of these software you know.", 'start': 616.517, 'duration': 6.564}, {'end': 628.625, 'text': 'just feel free to check them out on your own and experiment and learn more about them.', 'start': 623.081, 'duration': 5.544}, {'end': 631.187, 'text': 'Next is Envision App.', 'start': 629.145, 'duration': 2.042}, {'end': 637.554, 'text': "there's also Gravit Designer, there's Framer, there's one called Principle, there's a bunch of them,", 'start': 631.187, 'duration': 6.367}, {'end': 641.077, 'text': "and I'm probably forgetting and leaving out a bunch of the others.", 'start': 637.554, 'duration': 3.523}], 'summary': 'Overview of browser-based software with multiple features and applications such as envision app, gravit designer, framer, and principle.', 'duration': 24.56, 'max_score': 616.517, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw616517.jpg'}, {'end': 684.341, 'src': 'embed', 'start': 641.438, 'weight': 0, 'content': [{'end': 650.326, 'text': 'But really, when it comes to the three big UI design and prototyping tools, you have Sketch, you have Adobe XD and you have Figma,', 'start': 641.438, 'duration': 8.888}, {'end': 654.149, 'text': "which I would say are probably the most popular, and you're still more coming out.", 'start': 650.326, 'duration': 3.823}, {'end': 660.213, 'text': "In fact, there's one that's in beta that's really going to change things up quite a bit, but I'm not going to mention that right now.", 'start': 654.189, 'duration': 6.024}, {'end': 661.033, 'text': 'All right.', 'start': 660.753, 'duration': 0.28}, {'end': 666.597, 'text': 'So after you understand how, you know, step one, you understand your design fundamentals.', 'start': 661.133, 'duration': 5.464}, {'end': 675.829, 'text': 'And then you understand step two you start working within these design and prototype tools to apply what you learned in step one to create UI designs that look really good.', 'start': 667.017, 'duration': 8.812}, {'end': 683.479, 'text': 'And by the way, a little pro tip for that is check out the UI design inspiration slash galleries that exist.', 'start': 675.849, 'duration': 7.63}, {'end': 684.341, 'text': "There's a bunch of them.", 'start': 683.499, 'duration': 0.842}], 'summary': 'Sketch, adobe xd, and figma are popular ui design and prototyping tools, with more coming out. understanding design fundamentals and utilizing these tools is essential for creating impressive ui designs.', 'duration': 42.903, 'max_score': 641.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw641438.jpg'}, {'end': 795.294, 'src': 'embed', 'start': 771.019, 'weight': 2, 'content': [{'end': 779.726, 'text': "All right, so for most of you, if you just download Visual Studio Code, you're going to be ready to go for learning HTML, which is the next process.", 'start': 771.019, 'duration': 8.707}, {'end': 784.569, 'text': "So I wouldn't learn CSS first, I would definitely learn HTML.", 'start': 779.766, 'duration': 4.803}, {'end': 790.212, 'text': 'And understanding HTML is simply an acronym for Hyper Text Markup Language.', 'start': 785.59, 'duration': 4.622}, {'end': 795.294, 'text': 'Next, HTML structures web pages essentially.', 'start': 791.273, 'duration': 4.021}], 'summary': 'Visual studio code is recommended for learning html first, before css. html is an acronym for hyper text markup language and structures web pages.', 'duration': 24.275, 'max_score': 771.019, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw771019.jpg'}], 'start': 529.938, 'title': 'Evolution of ui design tools', 'summary': "Explains the shift from adobe photoshop to specialized tools like sketch, adobe xd, and figma, with a focus on adobe xd's features and popularity, followed by an overview of html and css and recommended code editors.", 'chapters': [{'end': 841.481, 'start': 529.938, 'title': 'Evolution of ui design tools', 'summary': "Explains the evolution of ui design tools, highlighting the shift from adobe photoshop to specialized tools like sketch, adobe xd, and figma, with a focus on adobe xd's features and popularity, followed by an overview of html and css and recommended code editors.", 'duration': 311.543, 'highlights': ['The shift from Adobe Photoshop to specialized UI design tools like Sketch, Adobe XD, and Figma resulted in a significant change in the industry, with Adobe XD gaining popularity and being personally used by the speaker. The release of specialized UI design tools like Sketch, Adobe XD, and Figma led to a shift away from Adobe Photoshop, with Adobe XD gaining popularity and being personally used by the speaker, who has also provided numerous tutorials on the platform.', 'The speaker emphasizes the importance of understanding design fundamentals, applying them in UI design and prototype tools, and seeking inspiration from professional designers and developers. The speaker stresses the significance of understanding design fundamentals and applying them in UI design and prototype tools to create professional-looking designs, while also recommending seeking inspiration from professional designers and developers.', 'An overview of HTML and CSS is provided, with a focus on learning HTML first, understanding its role in structuring web pages, and recommendations for code editors like Visual Studio Code and Sublime Text. The chapter provides an overview of HTML and CSS, emphasizing the importance of learning HTML first, understanding its role in structuring web pages, and recommending code editors like Visual Studio Code and Sublime Text for beginners.']}], 'duration': 311.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw529938.jpg', 'highlights': ['The shift from Adobe Photoshop to specialized UI design tools like Sketch, Adobe XD, and Figma resulted in a significant change in the industry, with Adobe XD gaining popularity and being personally used by the speaker.', 'The speaker emphasizes the importance of understanding design fundamentals, applying them in UI design and prototype tools, and seeking inspiration from professional designers and developers.', 'An overview of HTML and CSS is provided, with a focus on learning HTML first, understanding its role in structuring web pages, and recommendations for code editors like Visual Studio Code and Sublime Text.']}, {'end': 1197.358, 'segs': [{'end': 893.202, 'src': 'heatmap', 'start': 845.523, 'weight': 1, 'content': [{'end': 849.164, 'text': 'So CSS is an acronym for cascading style sheets.', 'start': 845.523, 'duration': 3.641}, {'end': 851.285, 'text': 'And it sounds really strange.', 'start': 849.204, 'duration': 2.081}, {'end': 857.107, 'text': 'But all it really is, if you think about it, HTML is the skeleton and CSS is the flesh.', 'start': 851.725, 'duration': 5.382}, {'end': 858.387, 'text': "It's what you see.", 'start': 857.287, 'duration': 1.1}, {'end': 859.207, 'text': 'All right.', 'start': 858.927, 'duration': 0.28}, {'end': 860.868, 'text': 'So CSS will take.', 'start': 859.227, 'duration': 1.641}, {'end': 868.511, 'text': 'those ugly HTML elements which are just have default styling which the browser puts onto them,', 'start': 861.788, 'duration': 6.723}, {'end': 872.333, 'text': 'but it gives it structure and it makes it look a thousand times better.', 'start': 868.511, 'duration': 3.822}, {'end': 879.796, 'text': 'So like I said, it allows you to style those HTML elements and it contains selectors, properties, and values.', 'start': 873.413, 'duration': 6.383}, {'end': 882.157, 'text': "And that's basically it.", 'start': 880.396, 'duration': 1.761}, {'end': 886.259, 'text': 'So if you learn HTML and CSS, you can then move on to SAS.', 'start': 882.217, 'duration': 4.042}, {'end': 887.079, 'text': 'All right.', 'start': 886.779, 'duration': 0.3}, {'end': 892.362, 'text': 'So SAS is an acronym for syntactically awesome style sheets.', 'start': 887.099, 'duration': 5.263}, {'end': 893.202, 'text': 'All right.', 'start': 892.902, 'duration': 0.3}], 'summary': "Css enhances html elements' appearance, making them look a thousand times better, and it enables moving on to sas after learning html and css.", 'duration': 47.679, 'max_score': 845.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw845523.jpg'}, {'end': 896.803, 'src': 'embed', 'start': 868.511, 'weight': 6, 'content': [{'end': 872.333, 'text': 'but it gives it structure and it makes it look a thousand times better.', 'start': 868.511, 'duration': 3.822}, {'end': 879.796, 'text': 'So like I said, it allows you to style those HTML elements and it contains selectors, properties, and values.', 'start': 873.413, 'duration': 6.383}, {'end': 882.157, 'text': "And that's basically it.", 'start': 880.396, 'duration': 1.761}, {'end': 886.259, 'text': 'So if you learn HTML and CSS, you can then move on to SAS.', 'start': 882.217, 'duration': 4.042}, {'end': 887.079, 'text': 'All right.', 'start': 886.779, 'duration': 0.3}, {'end': 892.362, 'text': 'So SAS is an acronym for syntactically awesome style sheets.', 'start': 887.099, 'duration': 5.263}, {'end': 893.202, 'text': 'All right.', 'start': 892.902, 'duration': 0.3}, {'end': 896.803, 'text': "And it's a preprocessor that enhances the power of CSS.", 'start': 893.382, 'duration': 3.421}], 'summary': 'Learning html and css allows progression to sas, a preprocessor enhancing css power.', 'duration': 28.292, 'max_score': 868.511, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw868511.jpg'}, {'end': 961.463, 'src': 'embed', 'start': 920.035, 'weight': 1, 'content': [{'end': 930.882, 'text': "And then when you make a file save or you save it, depending on how you're integrating your SAS, it will output a regular CSS file for you.", 'start': 920.035, 'duration': 10.847}, {'end': 941.389, 'text': 'And the purpose of a preprocessor like SAS is to enhance the functionality and the feature set of CSS itself.', 'start': 931.342, 'duration': 10.047}, {'end': 943.991, 'text': "So you can do things in SAS that you can't in CSS.", 'start': 941.469, 'duration': 2.522}, {'end': 947.173, 'text': "All right, so that's hugely important.", 'start': 944.731, 'duration': 2.442}, {'end': 953.237, 'text': "I wouldn't say it's more important than learning HTML and CSS, but once you get to the point of HTML and CSS,", 'start': 947.593, 'duration': 5.644}, {'end': 955.719, 'text': 'I would say you definitely want to learn SAS at least.', 'start': 953.237, 'duration': 2.482}, {'end': 958.741, 'text': "There's also other ones called LESS and Stylus and Compass.", 'start': 955.739, 'duration': 3.002}, {'end': 961.463, 'text': 'You can check those out as well, but SAS is the most important.', 'start': 958.781, 'duration': 2.682}], 'summary': 'Sas enhances css functionality, important to learn after html and css.', 'duration': 41.428, 'max_score': 920.035, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw920035.jpg'}, {'end': 1027.444, 'src': 'embed', 'start': 983.82, 'weight': 2, 'content': [{'end': 994.569, 'text': "that's like the simplest definition that i could find, and it allows you to dynamically update content, animate elements, control multimedia and much,", 'start': 983.82, 'duration': 10.749}, {'end': 995.83, 'text': 'much, much more.', 'start': 994.569, 'duration': 1.261}, {'end': 1007.155, 'text': 'so there are a ton of different javascript tutorials and courses for beginners, and really i recommend taking multiple,', 'start': 995.83, 'duration': 11.325}, {'end': 1016.478, 'text': 'multiple beginner courses so they can really solidify what exactly javascript is and, once you go from understanding the basic concepts,', 'start': 1007.155, 'duration': 9.323}, {'end': 1021.44, 'text': 'go to the intermediate level as well, especially before proceeding to step five.', 'start': 1016.478, 'duration': 4.962}, {'end': 1027.444, 'text': 'And this will really provide you with a solid grounding and understanding of JavaScript itself.', 'start': 1021.801, 'duration': 5.643}], 'summary': 'Javascript allows dynamic content update, animation, and multimedia control. take multiple beginner courses before moving to intermediate level.', 'duration': 43.624, 'max_score': 983.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw983820.jpg'}, {'end': 1124.092, 'src': 'embed', 'start': 1096.678, 'weight': 0, 'content': [{'end': 1104.703, 'text': "So, when it comes to the usefulness of these JavaScript front end frameworks that I'm going to outline in a second,", 'start': 1096.678, 'duration': 8.025}, {'end': 1107.345, 'text': "they're useful for building these single page applications.", 'start': 1104.703, 'duration': 2.642}, {'end': 1109.086, 'text': "They're component based.", 'start': 1108.025, 'duration': 1.061}, {'end': 1111.807, 'text': "They have strong communities because they're very popular.", 'start': 1109.606, 'duration': 2.201}, {'end': 1116.27, 'text': 'And they also handle state management, which is for handling data.', 'start': 1112.147, 'duration': 4.123}, {'end': 1124.092, 'text': 'and trying to handle data and also represent it in a user interface with just straight up pure vanilla JavaScript is very difficult.', 'start': 1116.73, 'duration': 7.362}], 'summary': 'Javascript front end frameworks are useful for building single page applications, with strong communities and component-based structure.', 'duration': 27.414, 'max_score': 1096.678, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw1096678.jpg'}], 'start': 842.502, 'title': 'Css, sas, and javascript for front-end development', 'summary': 'Provides an introduction to css and sas, explaining their enhancements to html elements, and emphasizes the importance of javascript in front-end development, highlighting its role, the need for beginner courses, and usefulness of frameworks like react, angular, and vue.', 'chapters': [{'end': 961.463, 'start': 842.502, 'title': 'Css and sas introduction', 'summary': 'Provides an introduction to css and sas, explaining how css enhances the look of html elements and how sas enhances the power of css, allowing for additional features and functionality.', 'duration': 118.961, 'highlights': ['Cascading Style Sheets (CSS) enhances the look of HTML elements, making them look a thousand times better and giving them structure.', 'SAS is a preprocessor that enhances the power of CSS, allowing for additional features and functionality that are not available in CSS.', 'Learning HTML and CSS is a prerequisite for moving on to SAS, which is considered hugely important.', "A preprocessor like SAS allows for writing CSS with different features that it doesn't yet have, and then outputs a regular CSS file with the added features."]}, {'end': 1197.358, 'start': 961.683, 'title': 'Javascript for front-end development', 'summary': 'Emphasizes the importance of javascript in front-end development, highlighting its role in enhancing web pages, the need for multiple beginner courses to solidify understanding, and the usefulness of javascript frameworks like react, angular, and vue for building complex web apps.', 'duration': 235.675, 'highlights': ['JavaScript is a scripting language for enhancing web pages, allowing dynamic content updates, element animation, multimedia control, and more. JavaScript facilitates dynamic content updates, element animation, multimedia control, and more, making it an essential tool for front-end development.', 'Multiple beginner courses are recommended to solidify understanding of JavaScript before progressing to the intermediate level. The recommendation of taking multiple beginner courses to solidify understanding before advancing to the intermediate level emphasizes the importance of a strong foundational knowledge of JavaScript.', 'JavaScript frameworks and libraries like React, Angular, and Vue are essential for creating complex web applications, handling state management, and building single-page applications. The necessity of JavaScript frameworks like React, Angular, and Vue for creating complex web applications, handling state management, and building single-page applications is highlighted, showcasing their importance in modern web development.']}], 'duration': 354.856, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw842502.jpg', 'highlights': ['JavaScript frameworks like React, Angular, and Vue are essential for creating complex web applications, handling state management, and building single-page applications.', "A preprocessor like SAS allows for writing CSS with different features that it doesn't yet have, and then outputs a regular CSS file with the added features.", 'Multiple beginner courses are recommended to solidify understanding of JavaScript before progressing to the intermediate level.', 'Learning HTML and CSS is a prerequisite for moving on to SAS, which is considered hugely important.', 'JavaScript facilitates dynamic content updates, element animation, multimedia control, and more, making it an essential tool for front-end development.', 'SAS is a preprocessor that enhances the power of CSS, allowing for additional features and functionality that are not available in CSS.', 'Cascading Style Sheets (CSS) enhances the look of HTML elements, making them look a thousand times better and giving them structure.']}, {'end': 1417.24, 'segs': [{'end': 1339.523, 'src': 'embed', 'start': 1220.991, 'weight': 0, 'content': [{'end': 1229.934, 'text': 'And each of the three are more than capable of solving and tackling pretty much any complex project that you might have in terms of development.', 'start': 1220.991, 'duration': 8.943}, {'end': 1239.621, 'text': 'All right, so to conclude, the very first thing I think it makes most sense to start with is learning design fundamentals.', 'start': 1230.994, 'duration': 8.627}, {'end': 1246.327, 'text': "Again, that's understanding the color and contrast, scale, consistency, visual hierarchy, et cetera.", 'start': 1239.641, 'duration': 6.686}, {'end': 1252.472, 'text': "And then, once you understand these basic concepts and how they're applied to user interface design,", 'start': 1246.787, 'duration': 5.685}, {'end': 1259.298, 'text': 'then you want to learn how to actually apply them and how to design effective user interfaces and also prototype them.', 'start': 1252.472, 'duration': 6.826}, {'end': 1262.439, 'text': 'Depending on which tool you use.', 'start': 1261.138, 'duration': 1.301}, {'end': 1264.719, 'text': 'for instance, Adobe Experience Design.', 'start': 1262.439, 'duration': 2.28}, {'end': 1268.46, 'text': "it's set up in two different tabs where you can design and then you can prototype,", 'start': 1264.719, 'duration': 3.741}, {'end': 1277.603, 'text': 'which means you can add functionality to them and add animations and just to showcase how it should look in the browser or different devices.', 'start': 1268.46, 'duration': 9.143}, {'end': 1285.265, 'text': "After you understand and you're able to design well, then it's time to make it a reality in the browser or the device.", 'start': 1278.903, 'duration': 6.362}, {'end': 1289.866, 'text': 'And that comes with HTML and CSS.', 'start': 1285.765, 'duration': 4.101}, {'end': 1295.767, 'text': 'First learn your HTML and then learn how to style those HTML elements with CSS.', 'start': 1289.946, 'duration': 5.821}, {'end': 1301.429, 'text': 'And then also if you want, which I think would be an added bonus, definitely learn SAS as well.', 'start': 1296.208, 'duration': 5.221}, {'end': 1305.331, 'text': 'And then you can step into the world of JavaScript.', 'start': 1302.169, 'duration': 3.162}, {'end': 1310.854, 'text': 'And again, the JavaScript is a massive topic that can do many, many things.', 'start': 1305.751, 'duration': 5.103}, {'end': 1319.259, 'text': 'that I think is, in this day and age, a requirement if you want to be an in-demand and effective front-end developer.', 'start': 1310.854, 'duration': 8.405}, {'end': 1320.619, 'text': 'um after.', 'start': 1319.839, 'duration': 0.78}, {'end': 1330.541, 'text': 'at that point you can also then begin to experiment um in in developing preferences for the various front-end frameworks or libraries that exist out there.', 'start': 1320.619, 'duration': 9.922}, {'end': 1339.523, 'text': "if you don't understand javascript at a fundamental level first and you try to jump straight into something like react or angular or view,", 'start': 1330.541, 'duration': 8.982}], 'summary': 'Front-end developers should learn design fundamentals, html, css, sas, and javascript to become in-demand and effective, and then experiment with front-end frameworks.', 'duration': 118.532, 'max_score': 1220.991, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw1220991.jpg'}], 'start': 1197.438, 'title': 'Front-end development fundamentals', 'summary': 'Covers ui design fundamentals, transitioning to user interface design and prototyping, implementing designs using html and css, and emphasizes learning javascript, sas, and big three frameworks/libraries for front-end development in 2019.', 'chapters': [{'end': 1295.767, 'start': 1197.438, 'title': 'Ui design fundamentals and development', 'summary': 'Emphasizes the importance of learning design fundamentals, transitioning to user interface design and prototyping, and then implementing the designs using html and css to solve complex development projects.', 'duration': 98.329, 'highlights': ['The chapter stresses the importance of learning design fundamentals such as color and contrast, scale, consistency, and visual hierarchy for effective user interface design and development.', 'It highlights the significance of transitioning to user interface design and prototyping after grasping the basic design concepts, emphasizing the use of tools like Adobe Experience Design for designing and prototyping.', 'The chapter also emphasizes the necessity of implementing the designs using HTML and CSS to make them a reality in the browser or on devices, indicating that these technologies are capable of solving complex development projects.']}, {'end': 1417.24, 'start': 1296.208, 'title': 'Essential front-end development skills for 2019', 'summary': 'Emphasizes the importance of learning javascript as a fundamental skill for front-end development in 2019, followed by sas and then exploring big three frameworks/libraries such as react, angular, or vue.', 'duration': 121.032, 'highlights': ['JavaScript is a requirement for in-demand and effective front-end development in 2019, followed by learning SAS and then experimenting with big three frameworks/libraries such as React, Angular, or Vue.', 'Understanding JavaScript at a fundamental level is crucial before experimenting with front-end frameworks or libraries like React, Angular, or Vue.', 'Newcomers should focus on learning JavaScript first before delving into other technologies like build tools and github repositories to keep the process simple and manageable.']}], 'duration': 219.802, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9kl30htP1iw/pics/9kl30htP1iw1197438.jpg', 'highlights': ['JavaScript is a requirement for in-demand and effective front-end development in 2019, followed by learning SAS and then experimenting with big three frameworks/libraries such as React, Angular, or Vue.', 'The chapter stresses the importance of learning design fundamentals such as color and contrast, scale, consistency, and visual hierarchy for effective user interface design and development.', 'The chapter also emphasizes the necessity of implementing the designs using HTML and CSS to make them a reality in the browser or on devices, indicating that these technologies are capable of solving complex development projects.', 'It highlights the significance of transitioning to user interface design and prototyping after grasping the basic design concepts, emphasizing the use of tools like Adobe Experience Design for designing and prototyping.', 'Understanding JavaScript at a fundamental level is crucial before experimenting with front-end frameworks or libraries like React, Angular, or Vue.']}], 'highlights': ['Skillshare offers 25,000 classes for $10 a month, making learning accessible.', 'A special offer of the first two months free on Skillshare is available for the first 500 subscribers.', 'Understanding design fundamentals before learning user interface design is crucial, as highlighted during live design reviews, where lack of understanding in design principles is evident in work.', 'Importance of being a well-rounded front-end developer who can handle both design and development aspects, stressing the significance of understanding design principles in addition to HTML, CSS, and JavaScript skills.', 'Understanding color and contrast is crucial for UI designs, as incorrect contrast can hinder readability; a plugin called Contrast with a K can be used to ensure contrast is up to par.', 'Utilizing white space effectively frames the important elements of a design, emphasizing the significance of padding, margins, and white space in design.', 'Creating visual hierarchy through scale, emphasis, and design elements is crucial for prioritizing different elements in a design, ensuring clear separation and emphasis.', 'Emphasizing the importance of simplicity over unnecessary complexity in design, with a focus on utilizing design elements effectively to enhance effectiveness.', 'Consistency in design elements, such as type, color, and overall aesthetic, is vital in creating a cohesive and emotion-evoking design.', 'Understanding design fundamentals is crucial before learning to code, as it helps in effectively prototyping user interfaces for web pages or apps.', 'Prototyping and designing interfaces before coding can save time and effort, as it allows visualization and easy modification of the design.', 'The shift from Adobe Photoshop to specialized UI design tools like Sketch, Adobe XD, and Figma resulted in a significant change in the industry, with Adobe XD gaining popularity and being personally used by the speaker.', 'An overview of HTML and CSS is provided, with a focus on learning HTML first, understanding its role in structuring web pages, and recommendations for code editors like Visual Studio Code and Sublime Text.', 'JavaScript frameworks like React, Angular, and Vue are essential for creating complex web applications, handling state management, and building single-page applications.', "A preprocessor like SAS allows for writing CSS with different features that it doesn't yet have, and then outputs a regular CSS file with the added features.", 'Multiple beginner courses are recommended to solidify understanding of JavaScript before progressing to the intermediate level.', 'Learning HTML and CSS is a prerequisite for moving on to SAS, which is considered hugely important.', 'JavaScript facilitates dynamic content updates, element animation, multimedia control, and more, making it an essential tool for front-end development.', 'SAS is a preprocessor that enhances the power of CSS, allowing for additional features and functionality that are not available in CSS.', 'Cascading Style Sheets (CSS) enhances the look of HTML elements, making them look a thousand times better and giving them structure.', 'JavaScript is a requirement for in-demand and effective front-end development in 2019, followed by learning SAS and then experimenting with big three frameworks/libraries such as React, Angular, or Vue.', 'The chapter stresses the importance of learning design fundamentals such as color and contrast, scale, consistency, and visual hierarchy for effective user interface design and development.', 'The chapter also emphasizes the necessity of implementing the designs using HTML and CSS to make them a reality in the browser or on devices, indicating that these technologies are capable of solving complex development projects.', 'It highlights the significance of transitioning to user interface design and prototyping after grasping the basic design concepts, emphasizing the use of tools like Adobe Experience Design for designing and prototyping.', 'Understanding JavaScript at a fundamental level is crucial before experimenting with front-end frameworks or libraries like React, Angular, or Vue.']}