farrasnazhif's blog

     After a several weeks of studying web development. I finally reach the mid exam. So, the task for this mid exam is to build an agency website especially on travel agency.  There is a several things to do while building this landing page which are:  Header / Hero Section Benefit Section Testimonials Section Detail Products / Services Offer / Discount (Opsional) Form FAQ (Frequently Asked Questions)  Footer I didn't finish the optional section because i ran out of time. However, i pretty satisfied by the result i made. Here's the sight of the landing page: The tools that i use is only html and css, however i use bootstrap aswell for the form section. Since i just create a landing page so using javascript is not too necessary. You can check he code through my github: https://github.com/farrasnazhif/pweb-a/tree/main/jasa-travel-website There is a video about the code but unfortunately it uses Bahasa. You can check it through this link:  https://youtu....

 https://github.com/farrasnazhif/pweb-a/tree/main/ajax-form

       Couple weeks ago i finished to learn CSS. In CSS, to specify a class we need to make one by one. For example, if we want to make a beautiful blue button with a complete style, we need to code like this. .login-btn {   background-color: #007bff;   color: white;   padding: 10px 20px;   border: none;   border-radius: 4px;   width: 100%;   cursor: pointer; }     There is so many styles that we have to insert into our CSS button and it could be irksome if we want to work fast.  However, there is a solution for that.  The solution is to use Bootstrap, we can make a nifty button by just calling "btn"  on the css class. Here's what it looks like. <button class="btn">Button</button> As a result, we can make the same button as the css class we specify one by one with just only a second. What if I want to add more or change the current style? Another interesting part about this bootstrap framewo...

 In the previous lesson, i created a form with only using HTML and CSS. But now, i've plugged javascript into the form to handle its logic.  Form Aunthenticator My first project, i created an authentication form that validates when users don't enter their email. You can check it through my github: https://github.com/farrasnazhif/js-form-authenticator.git , there's a documentation how the form works and the code as well. Search Form I created a search form that allows users to look up Indonesian postal codes. Users can select a province and a city, and the form will display the corresponding postal code based on their input. You can check it through my github: https://github.com/farrasnazhif/js-search-form.git , there's a documentation how the search form works and the code as well. Dynamic Dropdown This project is a bit different from my previous ones. In this project, I created a custom dropdown instead of using the standard HTML <select> tag. I designed my own ...

          In this lesson, I was assigned to build a landing page for a web development course platform. Currently, i just use HTML and CSS, however, i would add javascript eventually. I learned a lot when i was working on it. I used many new tags that i didn't know it before.  Here's the result, you can check it through this link:  https://tranquil-meerkat-376355.netlify.app/ Or if my domain is ever unavailable, I’ll give you a glimpse of the page 😁 . You can check out the code through my github: https://github.com/farrasnazhif/web-course.git

       In the previous lesson (Building Profile Page with HTML) I already created table and form inside my profile page. Though in this lesson I will expand the premise about table and form in HTML since i haven't explained it thoroughly.  Table      In HTML,  tag for table is table itself. So, in order to create a table, we need to wrap teh content inside tabel tag.  The tag is like this: <table></table>      Inside the table tag, we commonly use Table Row, Table Header Cell, and Table Data Cell . Table row stands for whatever the content insid the table row will packed by row. For header cell, as the name itself, header cell stands for header in the cell and by default, text inside header cell is bold and center-aligned. Lastly, table data cell defines regular cell in table and it goes with actual data. Below, these are tags for Table Row, Table Header Cell, and Table Data Cell. Table Row: <tr></tr...