aysegulsidmbblog

[aysegulsidmbblog]

Plugins for Visual Studio Code

On my previous post, I have written about the Visual Studio Code. The Visual Studio Code is a better text editor for me compared the others. However, plugins make it even better. There are some plugins I tried so far and I want to share the ones I liked the most.

The first and the most important one for me was “Live Server”. The Live Server plugin is allowing you to see the HTML codes you write in the browser at the same time. After writing your code, you don’t need to go to the browser side with the mouse and refresh the page. After using this plugin, I realized how much time and effort I saved with just installing a plugin.

The second helpful plugin is “Open In Browser”. I usually divide the screen in two parts and put the browser on one side and the editor to the other side. This way, I can see how the code displayed on the browser at the same time I am writing. However, I sometimes forget to open the browser or open a different HTML file. This plugin allows you to open the file you are working on a browser just by right clicking the name. This way you can make sure you are displaying the right HTML file. This happened to me a lot when I was trying to write HTML in class. I write my code, and looked at the browser but nothing changed, I tried  to find what is wrong.

[aysegulsidmbblog]

The Text Editor

The text editor is the most important tool for web development as it is the only tool that you need for creating a basic website. There are a lot of different text editors that you can chose. 

At first, I tried Atom, this was one of the suggested text editor during the lectures. Atom is simple and basic text editor, and it does the job. However, I wanted to try something else as well. When I was searching for other options, I found Visual Studio Code. This one looked more advanced for me, and I decided to try it. At first, it is not much different than other text editors. However, when you start writing, it gives you suggestions for the next thing you should write. For instance, when you write “back” it gives you possible things that you can write and by pressing enter, you can add it to your file. Other editors can do that as well but, Visual Studio Code seems doing it better in my opinion. Also, in its website, Microsoft gives a lot of information about things that you can do with Visual Studio Code. There are a lot of shortcuts and features explained on the website.  I would suggest everyone to try Visual Studio Code, it may save you some time when writing your code.

[aysegulsidmbblog]

Helpful Websites for Web Design

During my online research, I found some useful websites that I want to share in my blog. I personally tried to use these websites to learn more about HTML and CSS. Also, they helped me to learn more about web authoring in general.

The first one is css-tricks.com.This website is definitely must know for front end developers. It was a lot of articles about web design and CSS in general. A lot of good designers sharing their ideas and design choices. For instance, you can find design ideas for typography choices. You can look others design choices and get inspired. Also, the website includes guides for CSS as well.

The second website is landofcode.com. This website is for learning HTML, CSS and JavaScript. The good thing about the web site is that it gives you the technical information at first. You can read about HTML, CSS and JavaScript. After you study them, the website gives you to chance of practicing them as well. First, there are premade examples for you to look at. For example, you can select setting text color or background color examples for CSS. When you click on the link, the website opens a online text editor in one side and browser view on the other side, showing you both the code and the result at the same time. Also, it was exercises for users to practice and quizzes to check your knowledge. I personally suggest people to look at these websites to learn and practice more. Practicing will make your skills better.

[aysegulsidmbblog]

Free hosting

In my previous blog post, I tried to explain what the hosting is. Also, I mentioned you need to pay for your server. However, there are couple of different companies providing servers for free but for limited times. When you want to create an actual website, you need to rent a server, however, you can use these trials for practicing with servers and your practical websites.

First, you can use Google Cloud. The Google Cloud platform gives 300 USD credit to new users to try the platform. However, you can use it for maximum 90 days from your signup date. Google Cloud Services is fast and reliable platform for hosting your website.

The second company you can use is DigitalOcean. DigitalOcean is a well-known company which provides servers for you. Just like Google Cloud Services, they offer free trial. For new customers, DigitalOcean offers 100 USD credit to use it for 60 days from your signup date. You can use it this credit to host your website for 60 days.

The last one is Linode. Linode is also a well-known company for cloud computing which provides server for customers. Linode provides 100 USD credit for new users for 60 days.  In total you can use servers for free for 210 days which will provide enough time for you to practice and learn. These platforms can be also used to develop cloud-based apps and learn other cloud-based technologies.

[aysegulsidmbblog]

Web Hosting

The WordPress assignment taught me a very important thing for websites, servers. Of course, we have mentioned servers during our lectures, however, I have not used any server before. So, as we already know websites consisted of HTML and CSS files, or if you use WordPress, WordPress files. In order to make your website accessible for everybody, you need to store these files on servers. I have learned that these servers called as hosting. Servers are working 24/7 to keep your website alive. Also, these servers are located places called “datacenter”. 

For our assignment, we all had a free place on our school server, however, for your personal website, you need to rent a server from datacenter. You can not keep your website from your personal pc. Also, data centers has a very high speed internet connections to make websites faster, they have protective solutions to possible problems such as power cuts, and natural disasters like floods and earthquakes. These protections will make sure that your website will be working all time. There are a lot of different companies providing hosting for your websites. The prices are changing according to the specification of the server. In other words, the more powerful the server is, more expensive it is. It is important to select a good company to host your website.

[aysegulsidmbblog]

WordPress Plugins

After I tried WordPress, I was very impressed with things I can do with WordPress. However, I also discovered that plugins give us much more new features to add our websites. From design to security, there are a lot of different plugins available to download. Installing them is also quite easy to do. All I need to do was download, extract, and send it to the server. After that, they appeared on WordPress and ready to activate. I want to share some of them here on my blog. These ones, I believe is important to have and will be helpful when using WordPress.

The first one is called WPForms. This plugin is used to add forms to your website. It is a quite popular plugin so there are guides to how to create contact forms, such as contact form, newsletter signup forms and suggestions forms.

The second one is Elementor. I believe this is the most important plugin, at least for me. It makes designing a page a lot easier. It allows you to drag and drop elements into your page, change their position and edit them as you wish. Also, it has predesigned templates that you can use and edit.

The last one is UpdraftPlus. This plugin is designed for backup. You can manually backup your WordPress installation, but this plugin allows you to create automatic backup and use cloud services like Google Drive to store your backups. This might me crucial in case of data lost or cyber-attacks.

[aysegulsidmbblog]

WordPress

    The introduction to WordPress created many opportunities for me. Before learning about WordPress, I did not know that creating a website would be this easy. After the installation of WordPress, I was exploring the interface of the WordPress and creating my website. 

WordPress allows you to design your own webpage, you can edit your HTML code and CSS code if you want but that would not be the primary use case of WordPress for me. WordPress is makes everything easier with plugins and themes. I have tried to explore the theme and plugin market of WordPress, but I cannot finish it since there are a lot of themes and plugins on the market. The existing themes makes your life so easier when creating a website because you do not even write a line of HTML or CSS code for this to work. If you want to do it anyway, WordPress gives you to option to edit them as well. 

As far as I see, you can download everything on the market on WordPress website. However, the themes and plugins you downloaded might actually be demos of the original. These demos let you try them with limited editing options and limited feature but still you are able to see how your webpage will be. There are also some themes and a lot of plugins completely free to use without any restrictions.

 In my opinion WordPress is something I should learn in detail, find the best plugins, and make it ready for creating stunning web pages.

[aysegulsidmbblog]

Getting into designing with CSS

We are moving towards to details of CSS. In the last class, we have covered couple of different topics with in the CSS which made my web page look like a modern one.

First of all, colour, the most essential thing to design your webpage and with CSS, we are able to change the colour of text borders and backgrounds of our pages. The surprising thing for me was that, we have more than one way to specify the colour in CSS. Personally, I was familiar with the RGB colours and I thought that might be the only way to specify the colours. However, it turned out that we have other ways to do it as well. There are 16 pre-defined colours which we may access by typing the colour name such as black, red, green, etc. The last way to specify the colour is to use hex values that begins with # symbol and they are the most common way in CSS.

The second thing which is also essential to web design is the Box Model which tells us that web pages are made of boxes, basically every element we are creating with html becomes a box in our page and we have three basic things to style the boxes, padding, border and margin. The content of the element appears in the middle of the box so the distance between the content and the border of the box is called padding. The margin is the distance between the box border and the other elements. We have couple of different properties for each of them to apply styling.

Lastly, we also covered how to apply styling to links inside of the page which was the fun topic of the week for me. Basically, we have 5 different sates of link that we can specify different CSS.

When we were asked to apply what we learned to our previously created webpage, the final page looks far more stylish than before. The difference between our first webpage and the last one is definitely enormous.

[aysegulsidmbblog]

Started to Learn CSS

This week, we started to learn “CSS”, cascading style sheets and learning CSS will allow us to apply styling to webpages, CSS was its own rules and codes which are different than HTML. The CSS is now of the things that we need to learn in order to create webpages which look visually attractive. The latest version of the CSS is CSS3 and we will be learning that to style the text, background, borders and positions of the HTML elements.

There are three ways to use CSS; inline, embedded and external. The first method, inline, is applied to any element of the webpage like as an attribute with in html file, and our lecturer indicated that it's not a good way to do it. The second method, embedded, is also written within the html file but in a different section, its better than inline but the best way to use CSS is the last method which is external. In the external method, we are creating a different file with the extension of CSS and link that file to our HTML file. In this way, all of the CSS codes will be separated from the HTML file so it will be easy to manage. In order to link our HTML and CSS files we need to add <link real=“stylesheet” href=“stylesheet.css”> to the <head> of our HTML file.

As I mentioned before, CSS has its own rules, you need to identify the selector which is the element you want to apply styling, then the properties which is what would you like to apply to that selector and the values which is the value of properties. For instance, if you would like to change the font of the text inside your <p> element, your selector will be “p” (without < and >), then the property will be “font-family” and your value will be the type of the font such as “helvetica” or “verdana”.

This week we practiced the basics of CSS during the lab class and to be honest, I found it easier than comparing to my first week with HTML, but I know it will be much more complex in the upcoming weeks.

[aysegulsidmbblog]

HTML: Structure / Layout

We have learned the basics of HTML and practiced it in lab classes, the last thing to learn about html before starting to CSS classes was structuring. The lecture showed us that many webpages are designed in the same way and follows the same structural order. In general, a webpage starts with the header which is marked as <header> in html. Inside the header, we usually have the side logo and a navigation bar which is marked as <nav>. We should only have one <nav> inside the webpage. The second part of the website is called the main part, indicated as <main> in HTML which can include <section> and <article>. Besides that we have <aside> for creating a sidebar for our webpage. Lastly most of the webpages have <footer> at the end of the page.

Moreover, we have also learned the difference between inline and block level elements. Basically, block level elements will occupy the entire line of the webpage whereas, inline elements will appear in the same line.

Lastly, we have the grouping elements <div> and <span>. Before the HTML5, developer had to use <div> for grouping every section of the webpage. However, with the HTML5 we have new elements to group certain parts of a webpages, the elements I mentioned above. <header> for header, <main> for the main part of the page. <aside> for sidebar and <footer> for the end of the page. However, we still need to use <div> and <span> for certain grouping tasks when we need to identify different elements, in order to apply styling to them with CSS. To do that, we need to identify which <div> or <span> we want to apply the styling as there might be multiple div’s and span’s inside one webpage. To identify different elements we need to use class and id attributes. The same class attribute may appear multiple times in one webpage, however the id attribute may appear only once.

[aysegulsidmbblog]

The second exercise.

Compared with the previous week's lectures, this week's was more intense. In this lecture, the lecturer discussed internal and external links, various types of images, and how to create two different types of lists. During the lecture, I took my notes and everything looked easy to do. Although, during the lab exercise, I found the task difficult to accomplish. The process of adding paragraphs and headings was straightforward, however adding links proved difficult. Therefore, I was not able to complete even the first page during lab hours.

Once I got home, I decided to re-start from scratch, deleting everything I had done during the lab. Taking a closer look at it this time, I found that it wasn't that complicated. The thing is to know which tag comes first <img> or <a href=“”> and the same thing applies to <li>, the list tag as well. Through a couple of trials and the use of W3schools, I was able to complete the first page of my webpage and it matched the one on the exercise worksheet. This made the creation of the second webpage a lot easier since all you need to do is copy and paste the content from the first page. However, I decided not to do that and started writing the same lines again. In this way, I had a chance to practice more.  

In conclusion, I found that practice is the key to learning to do things in HTML. The more you practice it, it becomes easier and you are getting used to the structure.

[aysegulsidmbblog]

My Thoughts on The Lecture and Lab Class

Even though we have just begun our introduction to HTML, after the second lecture about Web Authoring I have started to feel the excitement of becoming a web developer. In preparation for the course, I searched for online courses and took one. I had no prior knowledge of HTML and I wanted to become acquainted with it before the semester began. Nevertheless, it was very encouraging to see that we are actually starting from scratch. In this lecture, the basics of HTML were explained in a way that everyone can understand. Hence, the lecture was easy to understand for me.

In addition, the laboratory class following the lecture provided a good setting to practice what we had just learned that week. What I liked about the lab was that every single thing on the slide was part of the lab practice. I was able to complete the task and submit it during the lab class. In any case, since I am not familiar with HTML, I tried more practicing at home. W3schools.com, the website mentioned during the lecture, provides a tool called “Try it Yourself” that can be accessed via this link: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

It is incredibly useful to people like me who are just getting started with HTML. After writing HTML code into the tool one can see exactly how it will appear once they click "run".

Although I've just begun the course, it's apparent that the more I practice, the more I'll learn.