Бесплатно ответим на все вопросы, связанные с программами или университетом
Оставьте свой номер телефона, мы свяжемся с вами в течение 30 минут.
Web Development
Web Development is arguably the most popular form of programming today. What with the millions and billions of websites online today, it is likely to be on demand for many years to come. Aside from that, Web Development is fun, and the results are immediately noticeable since it's very visual. You design how a website looks and you program how it behaves.
This is why we start here. However, Web Development has many aspects. Typically it's divided into two main branches: Front-End and Back-End. While many small companies expect you to know both (this is what is meant as a Fullstack Engineer), we believe that taking a look at how the Front-End works has enough elements to give you an idea of programming in general.
Even Front-End development, or any programming for that matter, has many aspects and can take many hours to learn. So we have decided to split it into 3 main introductory parts: Web Design, where you will learn how to design a website, Programming, where you learn the basics of coding, and Web Development, where you take the two and glue them together.
If all you want to learn is programming, and don't want anything to do with websites, you can simply focus on that section. If all you want to do is create pretty websites, you can focus on that section. However, if you want to make websites that are interactive, we recommend you go through all three.
Having said that, you will not really learn Web Development by following these lessons and taking the exercises. The point of this website is to give you an idea of what that means. We use lessons from freeCodeCamp.org, which has more than 100 hours of curriculum. However, you will only take certain lessons we've chosen for you. If you like what you've done here, you are free to complete the entire curriculum, which should give you enough knowledge to build real websites.
Enough talk! Let's begin!
This is why we start here. However, Web Development has many aspects. Typically it's divided into two main branches: Front-End and Back-End. While many small companies expect you to know both (this is what is meant as a Fullstack Engineer), we believe that taking a look at how the Front-End works has enough elements to give you an idea of programming in general.
Even Front-End development, or any programming for that matter, has many aspects and can take many hours to learn. So we have decided to split it into 3 main introductory parts: Web Design, where you will learn how to design a website, Programming, where you learn the basics of coding, and Web Development, where you take the two and glue them together.
If all you want to learn is programming, and don't want anything to do with websites, you can simply focus on that section. If all you want to do is create pretty websites, you can focus on that section. However, if you want to make websites that are interactive, we recommend you go through all three.
Having said that, you will not really learn Web Development by following these lessons and taking the exercises. The point of this website is to give you an idea of what that means. We use lessons from freeCodeCamp.org, which has more than 100 hours of curriculum. However, you will only take certain lessons we've chosen for you. If you like what you've done here, you are free to complete the entire curriculum, which should give you enough knowledge to build real websites.
Enough talk! Let's begin!
Prerequisites
Before we begin, you need to create a free account on freeCodeCamp.org. Once you create an account, use the links in our lessons sections to complete specific chapters.
Part 1: Web Design
Lessons
Estimated time: 5 hours
To get a basic understanding of how to design a website, we recommend completing the three introductory chapters for HTML, CSS, and CSS Grid. HTML will teach you how to create content for a website, CSS will teach you how to make the content pretty, and CSS Grid will teach you how to layout your content to look like a real website.
To get a basic understanding of how to design a website, we recommend completing the three introductory chapters for HTML, CSS, and CSS Grid. HTML will teach you how to create content for a website, CSS will teach you how to make the content pretty, and CSS Grid will teach you how to layout your content to look like a real website.
- Complete all lessons in "Introduction to Basic HTML & HTML5"
- Complete all lessons in "Introduction to Basic CSS"
- Complete all lessons in "Introduction to the CSS Grid Challenges"
Exercise
Estimated time: 5-10 hours
Using your knowledge from the above three chapters, try to best replicate a website that looks like the screenshot below. Of course, feel free to make it even prettier; however, limit everything you do into a single .html file.
Using your knowledge from the above three chapters, try to best replicate a website that looks like the screenshot below. Of course, feel free to make it even prettier; however, limit everything you do into a single .html file.
Part 2: Programming
Lessons
Estimated time: 10 hours
Here you will learn the basics of programming. Not web programming, but programming in general. You need to first get an idea of programming before you can make a website interactive.
While Web Design allows you to immediately jump into Web Development and have something to see visually, it doesn't actually do anything. It doesn't have any logic. It just looks pretty. On the other hand, programming, at least for now, is going to be mostly writing stuff and seeing the output in your screen. Unlike Web Design however, Programming will allow you to transfer your knowledge into other programming areas, like Game Programming, Artificial Intelligence and anything you can imagine. And, in the next section, you'll even learn how this transfers into Web Development.
Here you will learn the basics of programming. Not web programming, but programming in general. You need to first get an idea of programming before you can make a website interactive.
While Web Design allows you to immediately jump into Web Development and have something to see visually, it doesn't actually do anything. It doesn't have any logic. It just looks pretty. On the other hand, programming, at least for now, is going to be mostly writing stuff and seeing the output in your screen. Unlike Web Design however, Programming will allow you to transfer your knowledge into other programming areas, like Game Programming, Artificial Intelligence and anything you can imagine. And, in the next section, you'll even learn how this transfers into Web Development.
- Complete all lessons in "Introduction to JavaScript"
Exercise
Estimated time: 5-10 hours
Calculate the Hamming Distance between two DNA strands.
Your body is made up of cells that contain DNA. Those cells regularly wear out and need replacing, which they achieve by dividing into daughter cells. In fact, the average human body experiences about 10 quadrillion cell divisions in a lifetime!
When cells divide, their DNA replicates too. Sometimes during this process mistakes happen and single pieces of DNA get encoded with the incorrect information. If we compare two strands of DNA and count the differences between them we can see how many mistakes occurred. This is known as the "Hamming Distance".
We read DNA using the letters C,A,G and T. Two strands might look like this:
GAGCCTACTAACGGGAT CATCGTAATGACGGCCT ^ ^ ^ ^ ^ ^^ They have 7 differences, and therefore the Hamming Distance is 7.
The Hamming Distance is useful for lots of things in science, not just biology, so it's a nice phrase to be familiar with :)
Implementation notes
The Hamming distance is only defined for sequences of equal length, so an attempt to calculate it between sequences of different lengths should not work. The general handling of this situation (e.g., raising an exception vs returning a special value) may differ between languages.
Calculate the Hamming Distance between two DNA strands.
Your body is made up of cells that contain DNA. Those cells regularly wear out and need replacing, which they achieve by dividing into daughter cells. In fact, the average human body experiences about 10 quadrillion cell divisions in a lifetime!
When cells divide, their DNA replicates too. Sometimes during this process mistakes happen and single pieces of DNA get encoded with the incorrect information. If we compare two strands of DNA and count the differences between them we can see how many mistakes occurred. This is known as the "Hamming Distance".
We read DNA using the letters C,A,G and T. Two strands might look like this:
GAGCCTACTAACGGGAT CATCGTAATGACGGCCT ^ ^ ^ ^ ^ ^^ They have 7 differences, and therefore the Hamming Distance is 7.
The Hamming Distance is useful for lots of things in science, not just biology, so it's a nice phrase to be familiar with :)
Implementation notes
The Hamming distance is only defined for sequences of equal length, so an attempt to calculate it between sequences of different lengths should not work. The general handling of this situation (e.g., raising an exception vs returning a special value) may differ between languages.
Part 3: Web Development
Lessons
Estimated time: 5 hours
Finally, the glue that puts "Web" and "Development" together. Using your knowledge from the previous two sections, you will learn how to take the website we created in the Web Design chapter and make it do stuff. We'll be using the most popular JavaScript library, jQuery. This library has been around since forever and skyrocketted JavaScript as the most used language on the planet.
Finally, the glue that puts "Web" and "Development" together. Using your knowledge from the previous two sections, you will learn how to take the website we created in the Web Design chapter and make it do stuff. We'll be using the most popular JavaScript library, jQuery. This library has been around since forever and skyrocketted JavaScript as the most used language on the planet.
- Complete all lessons in "Introduction to jQuery"
Exercise
Make sure you download jQuery and include it in your HTML file placing the line below in your <HEAD> element:
<script type = "text/javascript" src = "jquery-3.4.1.min.js" ></script> While the section on jQuery in freeCodeCamp only talked about code that runs when the page loads (anything inside "$(document).ready(function() {"), you can also run code when you click on something.
Remember in the Web Design section we talked about links that don't do anything, by simply using "#" for the "href" value. Building on top of that, we can create links that run JavaScript code when clicked. All you have to do is add an "onClick" attribute and call the function you want.
Here is an example of calling the "helloWorld" function in a link:
<a href="#" onClick="helloWorld();">Hello, World!<a>
So, knowing that and using your knowledge from all three sections, try to replicate as best as you can the behavior in the animation below. Basically, clicking the image should shrink it (hint: change the CSS height property) and click on the "Read More" should remove the right column (hint: use the remove() function).
<script type = "text/javascript" src = "jquery-3.4.1.min.js" ></script> While the section on jQuery in freeCodeCamp only talked about code that runs when the page loads (anything inside "$(document).ready(function() {"), you can also run code when you click on something.
Remember in the Web Design section we talked about links that don't do anything, by simply using "#" for the "href" value. Building on top of that, we can create links that run JavaScript code when clicked. All you have to do is add an "onClick" attribute and call the function you want.
Here is an example of calling the "helloWorld" function in a link:
<a href="#" onClick="helloWorld();">Hello, World!<a>
So, knowing that and using your knowledge from all three sections, try to replicate as best as you can the behavior in the animation below. Basically, clicking the image should shrink it (hint: change the CSS height property) and click on the "Read More" should remove the right column (hint: use the remove() function).
Now when you're done with both parts:
1. Upload the project to cloud (Google Drive, iCloud, Dropbox) or record a video of the exercise completed to YouTube and include the link in the final quizz;
2. Reflect on what you learned about the job and your experience from the exercise.
1. Upload the project to cloud (Google Drive, iCloud, Dropbox) or record a video of the exercise completed to YouTube and include the link in the final quizz;
2. Reflect on what you learned about the job and your experience from the exercise.
This exersice is designed for you by Panagiotis Peikidis, very talented and experienced Programmer and Founder of Morning Cup of Coding
