The Web Designer’s Guide To Becomming A Programmer - Programming - Nairaland
Nairaland Forum / Science/Technology / Programming / The Web Designer’s Guide To Becomming A Programmer (2181 Views)
Top 10 Movies A Programmer Must Watch. / Must Everything Go The Web Way? / Signs That You Are Not Meant To Be A Programmer (2) (3) (4)
| The Web Designer’s Guide To Becomming A Programmer by thewebcraft(m): 10:12am On May 05, 2015 |
Today's world is heading towards super specialization (for example mobile apps for just about anything). Most designers prefer to focus on their strengths – the creative aspects of the website design. Let the developer figure out how to bring it to life. Or better still, create a live site with modern co-design tools, where there’s no need to call in a developer! But here’s the thing – as a creative, you want full control over your work. You want to see your work go live. You want to push the boundaries To truly master your craft, you need to understand the medium. The medium of the web, is code. For those who aspire to master web design, the question is not really “Does a web designer need to learn how to code?” but it’s more of “How much code does a web designer need to learn?”. A designer does not need to be an HTML or CSS guru. Or an expert coder. A designer needs to understand just enough about the code that forms the basis of the web – to be able to connect the dots and make sound design decisions. For someone who’s never done any programming before, it can get a bit overwhelming. HTML, CSS, JavaScript, PHP, Ruby, SQL .. web development actually uses a bunch of different programming languages. If you’re a designer keen to learn how your website design comes to life, here’s what you need to know and where to get started. Front End vs Back End Web Development The part of the website that viewers see is called the front end. The back end comprises of all the stored data, images, the server and other components. Web design and development is a bit like building a house – an architect designs the house much like web designer designs the website; the construction crew puts up the brick, mortar, plumbing etc akin to back end development, painters, interior decorator etc handle the visible, finishing touches to the house similar to front end development. Frontend development is done in HTML, CSS and JavaScript, while back end developers normally use PHP, Ruby, Python, Java, SQL or .Net for programming. Full stack developers who understand and can code the full stack ie both frontend and backend. A designer does not need to learn all of these programming languages. The goal is not to be a full stack developer, or really any kind of developer (unless you really want to make the transition!). The goal is to understand how a design translates to code. It makes sense for designers to focus on understanding the basics of front end programming since it is the part that creates the layout and the visual elements of the design. HTML (HyperText Markup Language) Going from the design or mockup to a live website involves many stages of coding, and as you saw above, many languages. The first step in the process is usually to map out the components of the site into HTML elements and write out the basic HTML code. Each component is called an element, and specified using tags. Text, images, animations each become an HTML element. Each element is structured into a hierarchy called the DOM tree, which determines the order in which each element is loaded and displayed. Here’s a simple example of basic HTML. <!DOCTYPE html> <html> <head> <title> </title> </head> <body> <h1>A Dummy Heading</h1> <p>Some text that spans the line.. </p> </body> </html> And this is what it looks like:  It’s rather plain ! Other than the basic text we put in, there’s no styling, layout or any other visual elements here. That’s because styling information goes into the CSS. But before we move over to CSS, here’s some great online trainings to help you get familiar with HTML Introduction to HTML from Learnable HTML Introduction at W3Schools Intro to HTML by KhanAcademy CSS (Cascading Style Sheets) Most of the styling information is stored separately from the HTML as CSS sheets. Developers prefer to separate the content from the style so that it is easy to change one or the other without messing everything up, or having to redo the entire code. This works really well especially for large websites with multiple pages. Each page no longer requires to have it’s own layout coded or the fonts etc defined. All pages can use a common set of CSS style sheets to leverage a common layout, font set etc. Or if the client decides they want major changes to the layout at the last minute, you can go and just change the CSS styles without having to edit each page of the site. Usually when developers start coding, it is an iterative process going back and forth between the HTML and CSS before they have the final versions ready. Lets take the first example ahead and add some styling. The following lines make the heading blue and center it. <!DOCTYPE html> <html> <body> <style> h1 { color: blue; text-align: center; } </style> <h1>A Dummy Heading</h1> <p>Some text that spans the line. And goes on. And on. </p> </body> </html> It now looks like this:  Again, this is just a very basic example. You can learn some practical CSS from the following online resources: Practical CSS from Learnable CSS Introduction by W3Schools Intro to CSS at KhanAcademy JavaScript JavaScript is what lets you have dynamic, interactive elements on your web page. Most contact forms, changing image carousels, auto-suggest / auto-fill fields and the likes are all based on JavaScript. Sure there are other ways to add certain dynamic elements, but JavaScript is by an far the most popular. JavaScript is also used to change the HTML content, or load different content. W3School has some good live examples where you can see how JavaScript changes the content. There is an extensive library of JavaScript functions, APIs and plugins readily available for most web tasks. Meaning, you can easily use these pre-built packages and rarely have to write more than the basic JavaScript code yourself. Putting It All Together  So I’ve introduced you to the basic languages of frontend web development – the ones that are used to translate your design into a live web page. Like I said earlier, the coding process is often iterative with the developer switching back and forth between these languages, depending on the functionality required. But how does it all come together? The following courses can help you understand how HTML, CSS and JavaScript come together to bring your designs to life: Build Your First Website with HTML & CSS from Learnable Intro to HTML and CSS from Udacity 30 Days to Learn HTML & CSS from Tut+ Make a Website with HTML+CSS from CodeAcademy Introduction to Web development at Udemy Note that these are just some hand picked introductory courses to get you started. Those interested in diving deeper, or expanding their skills to include front end web development can look up further resources at Learnable, CodeAcademy, Tut+, Udemy or other online portals. Wrapping it Up While designers don’t need to know how to code, taking the effort to learn the basics of front end development will definitely help expand their horizons. It brings in an understanding that helps create new design possibilities the ability to implement or experiment with your own live sites the opportunity or perhaps the vocabulary to interact with developers and most of all, the satisfaction and respect you get from all of the above. Is it hard? Probably (but the super easy, comprehensive course I’ve listed about should make it a breeze). Is it worth it? Definitely. If you’ve already walked this path, do share how has it helped you as a designer?. What were the biggest hurdles you faced? 1 Like 1 Share |
| Re: The Web Designer’s Guide To Becomming A Programmer by Krestkross: 8:33am On May 13, 2015 |
This is nice.. I intended a diploma program in web design and all this was still confusing me. Pls drop your number perhaps email I will like to contact you for something pls.. 1 Like |
| Re: The Web Designer’s Guide To Becomming A Programmer by luvluvluv: 9:37pm On May 13, 2015 |
Wow Tanx so much op. I jus started a class at NIIT and so far I can say am enjoyin HTML. I know I have a lot ahead 2 learn though. Am so luving programin. So far I tink I can actually build a page with HTML codin but am yet to advance 2 CSS and javascript. But am hoping at the end of my 6months trainin, I shall be a guru in web devt. Tanx once again 1 Like |
| Re: The Web Designer’s Guide To Becomming A Programmer by tohero(m): 7:18pm On May 14, 2015 |
Beautiful Insights |
(1) (Reply)
Seunthomas - The Greatest Programmer On Nairaland / Nairalanders Who Build 10k Websites. How Do You Make Profits? / Help Android Code
(Go Up)
| Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 27 |