The Scenic Road for the New Web Developer and the Freecodecamp Camper
A lot of travelers and Campers has reached a point where they crave more, where the normal road is not enough, but also, there are other ways to get the full panoramic view from this road, and this is it…
At first, i can bet, you looked at the Free Code Camp curriculum and clicked the menus over and over with wide eyes trying to grasp what it had to offer you, one of the best tools i have found for learning all about this complex but fun road which is Web Development, you can try clicking at the first lesson and start from there.
In this Post, you will learn how to spend your time learning the most, looking at the landscape with shining eyes and not only running through a marathon, remember to take a time to understand every concept, and if you are ready, lets jump over.
On this guide, we will go through the web design certification until we reach the front end libraries, you can also bring up friends, join the study group of your country and city, and start the trip with some other people
But first, you must wonder what is this web all about, well, you can google it, and get: “The web being a system of servers interconnected that send some formatted documents on files (the most common being html files) and receive data”. Ok, that’s the definition, but what is behind it?
Well, other way of saying it is the Internet or World Wide Web (WWW) is a way of navigating into other computer’s files and folders while they send you data in html and other formats, ok.
Is a way of understanding it, but, what makes the Internet so complex, and so fascinating, one of these thing is the large amount of information you can find and the other being the design, thousand, if not millions of photos are sent each second to the web, how many words? How many clicks? How many articles written? Well, Here you can find the metrics of the social networks each second, Amazing eh?
And the other being, the design of this web, lets talk about it now…
Design Styles
The art of the things, millions of people has worked its way, leaving his brushstroke on every webpage and picture on the internet, Now let’s talk about Trends:
- Minimalism: This is the peak of design on 2018 and what is to come, a style that just is there with its simplicity and impact and the most important right now, “Less is more”.
- Broken Grid Layouts: This is just a way of saying that some elements of the page “breaks” the page flow
- Variations of Shapes and Figures: Simplistic webpage with figures and elements on the background with different colors and abstract shapes
And others more…
Also here is a video which summarizes some of the good and bad styles for the upcoming year
And… Awwards where you can find the prizes granted to the best sites on the internet
If you did read until here and still convinced you want to change the world of the web development, congratz! Go for your html and css course, good luck on your project.
Maybe a little help would be nice, eh? Ok, Here are some good help for some of the concepts of Grid and Flexbox
Grid And Flex
The Mermelade and Peanut butter of css
You can click Up there and understand a lot better how does these mechanics work, and make great layouts with them 😉
Also, here i drop some guide for Flexbox and Grid, these are some great manuals you can save and use.
Do you need a color guide?
Say no more.
Mockups? Sure, Tasks manager? Too!
Need a way of printing what you have on mind and shape it? You can use Milanotes if you want, a great app for taking notes and saving ideas, Adobe xd and photoshop are great ways to see how your webpage will look before you take hands-to-code, and why not use paper? Take down these papers and pencils and scribble some notes, doodle some squares, and make up the webpage you always dreamt of
Animations
What about animations? This course is great, not only for the fact that is well explained, but also, you can try the code on codepen
Congratz!
If you reached here, that means you want to make the projects to reach that first certification, and why not, Try reading some of the Mozilla Docs and you are ready.
I did something when i reached there, i left the portfolio for later, because, you will be adding some more works later, but is up to you
Welcome to JS
Now, here comes the part where you get to know how webpage moves inside, what is what makes them so dynamic and complex
And this is Javascript, a programming language with a wide range of uses, where, if you are new into programming, you will scratch your head trying to grasp every concept while they are passed to you
Very well, you can start here, what is the best way to learn something than explained to you by one of his creators, eh?
Es6
When you reach ES6 or Ecmascript, and you having a hard time, look at this, there is also the WesBos course, but is paid to watch, you can search for it on your own if you want.
I highly recommend at this point (if you didn’t before) look for the fcc study group of your country, state or city, and share your doubts with them, also you have the forum, even you can try working on the exercises with some other people 😁, also you can ask on stack overflow, which is one of the best programming communities out there.
About the DOM, i Highly recommend reading some sources about this.
JSDOM
You can look at the mozilla documentation, read this article on css-tricks (this resource can help you in a lot of things), or take a Javascript DOM course, net ninja has a great serie of videos, also, you can learn making some exercises day by day, and what is a better way of doing it than taking the javascript30.
Front End Libraries
By here, you must be reaching the front end libraries part, very well there are two videos you can check for Sass
This first one, is where i learned, you can learn the basics and try them at your own pace .
And this one, helps you styling a webpage while you make the course.
Pretty cool eh?
You can also check the documentation for Sass, Jquery and React one, If you want to be the best at it you have to check how to learn by reading a documentation
Here i will drop a guide to jquery if you want, before we jump into react
And for react, you can check a serie of videos from the Net Ninja, which envelops React, react app, react router and redux.
If you reached this point with me, go for that certification for front end and Congratulations! You now can make projects as front end developer, keep on working on your Road Map, Also, i want to thanks, all the other peoplke who made the great content that i used on this post.
If you want more content, you can check my Twitter and send me a message with some doubts, feedback or what post you want to see next, also clap 10+ times if you liked it 😉
And remember, the hard way, is best way, See you!
