Learn HTML, CSS, JavaScript from Scratch while building Flatiron Home page. Part 0: Setup
Welcome to my second blog post, if you have not checked out my first post and you are interested in learning Ruby and setting up your IDE check it out here. This series is going to be a long and interesting one, the reward is at the end of this series you will be able to put up a responsive landing page together using latest HTML, CSS and Javascript Specifications. You will also learn how to set up a development environment and all the tools you need to get productive as a developer. In the end, I will also be showing you how to put up your awesome creation on a static site cloud hosting.
To get the sense of what we will be building. We will be redesigning the homepage of Flatiron School Website.
The Flatiron website shows great aesthetic, and the homepage as a lot of component and sections that you will be using for most of your web project and I think tackling this redesign will put you on a good pedestal to building complex UI in the future.
In this part, we will be focusing on setting up our development environment so let’s dive in. As a software developer, one of the first tool you will want to have is an editor to crunch your code in. Your editor will be your second home so choose one carefully, there are many out there but I will be recommending the one I am using so it can make this setup easy to follow, and after this tutorial try some other out and you are always free to move house.
Editor of choice: VS CODE download here. Available for all operating system and it is 100% Free.
VS Code also enables us to install extensions that make our life easier as a developer. Most time it will suggest extensions to you based on the type of language you are coding in. For the purpose of this tutorial, I will recommend you install the following.
VS Code Extensions to install
Path Intellisense helps you require files into your project easily and since we are going to be using Sass it is called CSS with Superpowers on its website you can read about it. Sass makes writing CSS more enjoyable we will discuss more of it in part 1.
Now that you have your IDE ready we to the next phase or setting up our project structure. Setting up a project today can be exceedingly overwhelming stuff. Not because it is hard but because there are so many choices and ways out there to do it. I will not bore you will the platonic of choices available for now I will just make the choices for us based on convenience and ease of setup. After this, you can look at so many options in the wild to choose from.
To get started you will need to install code on your machine. Node: Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node is available for all operating system visit https://nodejs.org/en/download/ to install the one for your operating system make sure it is LTS version this means it a version with Long-Time Support.
If all goes well open your terminal and type: ` node -v ` this should print out the version of your node and Node come with NPM installed. NPM is one of the most popular Node Package Manager, it allows us to use other peoples code nicely packed for us.
Setting up a development environment seems like a lot of work at first then you start to get comfortable with it with time. Now to the package that does the heavy lifting for us.
Parcel: Blazing fast, zero-configuration web application bundler. It does just like the name put it. You can read more about it on their website linked above. for the purpose of our project, we will be using a web tool that makes it easy to setup Parcel.
How to create your project yourself
- Create an NPM project and install dependencies
2. Create .babelrc in the root and copy the code below into it
3. Create folders src and dist and create source code files
Seems like a lot of steps, but it is good to understand this process even thou it can feel intimidating. I already have the setup file on my Github for this course so you can go ahead and grab it by cloning the repo or downloading it as a zip file here.
Follow the read me on how to install and get it working on your machine
If you are new to Git: I will recommend you go through their easy to follow tutorial to get up to speed on using Github, there are other platforms, for this tutorial I recommend Github. https://guides.github.com/activities/hello-world/
Yea we are on a roll
You can drop your questions of feedback in the comment box, great to have you on board. Part 1 we will start fleshing out our website.
:)
