Front-End Development Beginner Guide

Don’t worry about choosing your specialty yet. The basics are the same for pretty much any front-end speciality. 

… To get the hang of front-end web development, you need to learn HTML and CSS, as a basis. (More-and-more frontenders are expected to know some JavaScript, too). 

You also need to learn Applied Visual Design, Responsive Web Design, and Applied Accessibility principles.

These will cement the basics of writing good website code. This should be taken slowly, as they are foundational to building-up your knowledge.

After that, you should go ahead and learn layout techniques, such as CSS Grid and CSS Flexbox. Then, you can actually start creating projects.

Starting Out

You first need to choose a plan-of-attack. Web development is an enormous endeavour, with limitless possibilities. 

There is a massive amount of information floating around on the internet. So, structure your strategy (the best way of doing this is to choose one resource to focus on).

When you focus on one resource - one training tool - you get a uniformly-structured education. For example, with FreeCodeCamp, you get these resources - all for free:

1. A curriculum - You can use this as your primary plan-of-attack. Step-by-step, fill it in.
2. Mini-exercises - Coding is a problem-solving challenge. 
3. Project-work - by the end of each chapter you will have built five projects. Once done, you will be certified. 
4. Community resources - Talk to real people and share information in blogs, a YouTube channel, and a forum. Talk to people who are at various levels. 

There are advantages to paying for a course. See the Resources section, for more… That said, here are some things you are likely to cover - in any top, frontend dev course:

Responsive Web Design

This covers the basics of how to build static websites,which the best free website builders use. Another aspect of this is how to apply styles to these websites.

Also known as RWD - for short - this is an approach to designing websites so that they render optimally on a wide-variety of devices, or window-sizes.

This is very important for user-satisfaction and user-experience. RWD also adapts layouts so that viewing is optimally-proportionate to “proportion-based grids.”

Due to the importance of mobile traffic, responsive web design has never been more important. Mobile traffic accounts for over 50% of all internet traffic... One of the easiest ways to boost SEO-scores is to have a mobile-friendly website. 

• Flexible images that do not expand outside of the containing element
• Responsive layouts that automatically set the screen size to match whatever device is being used 
• Media queries (like CSS3) that lets the page wield different CSS styles, depending on the nature of the device that is viewing the website, e.g. such as adjusting the width of the browser

CSS Flexbox

This is a very simple yet extremely powerful technology that lets you manage how information is laid out and aligned inside a particular amount of space or environment.

You can think of this as an algorithm that lets a layout automatically adjust itself to best fit the available space, allowing for the best experience on any device.

For example, a Flexbox container could expand itself to better till the available free-space, or shrink itself to avoid overflow from occurring (when information spills outside of the containment box).

CSS Grid

The CSS grid is a more advanced version of the CSS Flexbox. You may have even come across this, if you have tried to create your own website using a WordPress theme template.

Also known as the CSS grid layout, this technology uses Cascading Style Sheets, so that websites layouts can be even more responsive and consistent, regardless of the browser being used.

Most major browsers use this already. You can think of it as an advanced alternative to the CSS flexbox (also written as CSS flex box). 

Try To Make Stuff!

Practice makes perfect. Hayloft Hue tips to start to play around with your new coding skills, learning as you go:

1. Set up a code editor on your machine, so  you can begin to figure out how it works
2. Set up an account with Codepen. They let you build-out projects, run tests and practice frontend
3. Start to learn some of the basics of command-lines 

Yes, you need to start to speak a new language. But, starting with the basics is best. Once you have this foundation, learning more advanced programming languages will be more second-nature.

Basic HTML

HTML is not actually a programming language. It’s what we call a markup language, responsible for defining how your content is structured.

(Just think of your teacher noting where changes should be made on your essay, and you have the right idea of what a markup language is.) 

There are a series of elements inside of any piece of functioning HTML code.

It's your responsibility to wrap up or enclose different sections of your content, so that your content acts or looks a specific way.

For example ... you can use <tags>, to make certain sections of your text hyperlink to another location on the internet. Tags can also be used to make fonts bigger, smaller, or formatted in other specific ways.

Every piece of HTML code has these four elements :

1. An opening tag, which sets up the beginning of your chosen element, like emboldening, or creating hyperlinks.
2. The content that is being manipulated by the element, which might be an image or a text -  or something else.
3. The element itself. This describes what the opening tag, the closing tag and the content are creating
4. A closing tag, which always includes a slash before the element’s name... This signifies that the element has ended in that location. If you do not use a closing tag, the HTML code code will result in an error (... a rookie error)

HTML5

HTML5 was new-stuff in 2017. And it’s still very important. It's simply the latest version of HTML, also known as Hypertext Markup Language.

We explained - above - that you should think of a markup language as the same thing as your teacher highlighting changes on an essay you submitted.

HTML talls your content what to do and how to look... HTML5 allows much more manipulation of content without requiring users to download browser plug-ins.

HTML5 is used in everything from music and movies, to animations and apps. It can also be used for building very complicated browser applications.

This technology is constantly evolving. Some very cool features include web apps, video and graphics, as well as geolocation technologies. It's already fully-integrated with the most popular browsers like Explorer, Edge, Chrome, Safari, Opera, and Firefox.

… In order to create HTML5 websites, you'll be using the same frontend dev tools you use to create basic HTML. Specific softwares like Adobe Dreamweaver can also be used, to automate some of this - even to a great extent.

Also look out for Adobe's Edge, which is a dedicated HTML5 animation tool. Edge makes it easy to make animations similar to Adobe Flash, for your websites. 

CSS (HTML’s Version of Snape Head-Master)

CSS is short for Cascading Style Sheets. These are responsible for how your HTML elements are displayed on websites. on paper, and in various media forms.

They’re like a responsible-adult making sure kids don’t talk too much - while in class - that they get a failing grade.

CSS is very useful for doing heavy lifting, automatically. It manages your web page layouts, all in one go. For this reason, it is extremely powerful.

The native file types for external style sheets are CSS files. Different style sheets can display the same content in a massively-wide variety of ways.

This tool is important to use if you want to have more ability to stylize your web pages - working with HTML - including the overall layout, design, and design variations. Also, for varying screen-sizes on different devices.

CSS does what people think HTML was designed to do. HTML is just a mark-up tool. It was never meant to format a web page!

CSS fills that Gap, letting you apply advanced changes to font, color, and other attributes that are important for making a web page look awesome. 

--

We’ve named other programming languages in this guide, but start with these three as your basics: Basic HTML, HTML5 and Basic CSS. (Once again, a good course will have this organized for you). 

After this, learn about Applied Visual Design. Responsive Web Design, and Applied Accessibility. All of these are very important for creating mobile-responsive websites. And are as important, foundationally, as HTML, HTML5 and CSS.

  Front end development guide - PRO TIP:  Start with the three basic programming languages before looking at JavaScript... It will probably be a heck of a lot easier, after.

Besides specific programming questions where you have to look at lines of code and figure out how to solve it, as though doing a math equations, these are conceptual questions you may be asked.

Most are useful questions (some are not), but all are commonly asked.

Common Dev Interview Questions :

1. What is the DOM?
2. What is a closure?
3. What is Big O notation / why is Big O notation useful?
4. What is REST and why is it used? 
5. What is system design?
6. Take us through the process of full stack implementation of an autocomplete widget.
7. Describe what event bubbling is and how it works.
8. How do I fix a slow website? (A top-tier VPS host may be a common fix)
9. What frameworks are you familiar with? Also describe the benefits and drawbacks of each
10. Why are frameworks important? Describe the kinds of problems that frameworks solve
11. Break down how prototypal inheritance works (and how this is not the same thing as classical inheritance)

Further Tips

These are general, “concept” questions. You will be asked many specific questions relating to CSS, HTML, JavaScript, browsers, DOMs and linked lists. You can find lots of online questions about each. (There are a ton of questions that could be asked here). 

HTML is not very used these days, so it won't be explored as much. CSS questions will be used as warm-up questions if you are a JavaScript specialist. (And it will be used in any front-end dev questions interview.)

JavaScript is really where the big-money comes in. If you can master this area, you can get very highly-paid jobs. You should have a solid understanding of how it works, before going to an interview.

Some of JavaScripts features are intuitive and easy, but others can be a little bit tricky... Get a good grasp of the trickiest concepts like undefined, scope, closure, hoisting, cache, currying, null and chaining.

Don’t forget the basics, like knowing what's a quality domain registrar. 

Questions YOU Should Ask

Prospective employers like to know that candidates have a genuine interest in working in their company.

You should be aware of certain company-info while being interviewed, so that you seem sharp and enthusiastic.

Be sensible in choosing what questions to ask and when to ask them.

These questions will also give you a better understanding of if you want to work at a particular company:

Questions to Ask

1. Why is this position being hired for?
2. What will I be responsible for in my role?
3. What programming languages will I be working in, day-to-day?
4. Where exactly will I be working?
5. How long is this contract for?
6. What is the target-salary (as in, the range)?
7. What is your team structure?
8. How is work assigned?
9. How are teams seated together?
10. Are there isolated areas for people to work?
11. How frequent are team meetings?
12. How is work estimated?
13. How is your workflow currently being managed?
14. What time-zone does your company work inside?
15. Who are the star role-models in your company?
16. Is there a dress code? 

Don't be afraid to ask specific questions about the various programming languages, and the specifics of what you expect to be doing in your role.