{"id":99,"date":"2019-09-15T10:26:19","date_gmt":"2019-09-15T10:26:19","guid":{"rendered":"https:\/\/stud.hosted.hr.nl\/0986809\/?page_id=99"},"modified":"2020-04-13T14:43:04","modified_gmt":"2020-04-13T14:43:04","slug":"front-end","status":"publish","type":"page","link":"https:\/\/stud.hosted.hr.nl\/0986809\/buliding-blocks\/front-end\/","title":{"rendered":"Front-end"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"99\" class=\"elementor elementor-99\">\n\t\t\t\t\t\t<div class=\"elementor-inner\">\n\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-41c1d05 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"41c1d05\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3d3ef9b\" data-id=\"3d3ef9b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b0b7c99 elementor-widget elementor-widget-heading\" data-id=\"b0b7c99\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Inleiding <\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-5c8e985 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5c8e985\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-a74489d\" data-id=\"a74489d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2100555 elementor-widget elementor-widget-text-editor\" data-id=\"2100555\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>Er werd ontzettend van ons verlangt dat we building blocks gingen in plannen. Met goede moed heb ik daardoor ook front-end ingepland. Dit is mijn 2 keer dat ik een website maak. Ook de 2 keer dat ik met HTML en CSS werk. Het gesprek is puur voor een feedback om mij de goede richting op te sturen. In mijn CLE project hebben we gewerkt met Laravel omdat dit ook makkelijk te leren\/begrijpen is. De dingen die ik gemaakt heb zitten wel in Laravel maar heb ik alleen gelinkt door middel van laravel\/blade. Halverwege dat ik dit aan het schrijven was kon ik geen foto&#8217;s meer toevoegen door een foutmelding? Dit heb ik op een andere manier proberen op te lossen.\u00a0<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-b172809\" data-id=\"b172809\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-110e8c2 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"110e8c2\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4005e7a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4005e7a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-2d82f49\" data-id=\"2d82f49\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4b18b24 elementor-widget elementor-widget-image-gallery\" data-id=\"4b18b24\" data-element_type=\"widget\" data-widget_type=\"image-gallery.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-gallery\">\n\t\t\t<div id='gallery-1' class='gallery galleryid-99 gallery-columns-2 gallery-size-full'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"4b18b24\" data-elementor-lightbox-title=\"c126f52eba16ef9991ba0ddd2df82846\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MjI5MSwidXJsIjoiaHR0cHM6XC9cL3N0dWQuaG9zdGVkLmhyLm5sXC8wOTg2ODA5XC93cC1jb250ZW50XC91cGxvYWRzXC8yMDIwXC8wNFwvYzEyNmY1MmViYTE2ZWY5OTkxYmEwZGRkMmRmODI4NDYucG5nIiwic2xpZGVzaG93IjoiNGIxOGIyNCJ9\" href='https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/c126f52eba16ef9991ba0ddd2df82846.png'><img width=\"875\" height=\"341\" src=\"https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/c126f52eba16ef9991ba0ddd2df82846.png\" class=\"attachment-full size-full\" alt=\"\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/c126f52eba16ef9991ba0ddd2df82846.png 875w, https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/c126f52eba16ef9991ba0ddd2df82846-300x117.png 300w, https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/c126f52eba16ef9991ba0ddd2df82846-768x299.png 768w\" sizes=\"(max-width: 875px) 100vw, 875px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"4b18b24\" data-elementor-lightbox-title=\"ab89b9a7623499e6382f5d0658d489a3\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MjI5NiwidXJsIjoiaHR0cHM6XC9cL3N0dWQuaG9zdGVkLmhyLm5sXC8wOTg2ODA5XC93cC1jb250ZW50XC91cGxvYWRzXC8yMDIwXC8wNFwvYWI4OWI5YTc2MjM0OTllNjM4MmY1ZDA2NThkNDg5YTMucG5nIiwic2xpZGVzaG93IjoiNGIxOGIyNCJ9\" href='https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/ab89b9a7623499e6382f5d0658d489a3.png'><img width=\"1249\" height=\"516\" src=\"https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/ab89b9a7623499e6382f5d0658d489a3.png\" class=\"attachment-full size-full\" alt=\"\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/ab89b9a7623499e6382f5d0658d489a3.png 1249w, https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/ab89b9a7623499e6382f5d0658d489a3-300x124.png 300w, https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/ab89b9a7623499e6382f5d0658d489a3-1024x423.png 1024w, https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/ab89b9a7623499e6382f5d0658d489a3-768x317.png 768w\" sizes=\"(max-width: 1249px) 100vw, 1249px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"4b18b24\" data-elementor-lightbox-title=\"4e7196c409549719b05749bbf4b01f3b\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MjMwMiwidXJsIjoiaHR0cHM6XC9cL3N0dWQuaG9zdGVkLmhyLm5sXC8wOTg2ODA5XC93cC1jb250ZW50XC91cGxvYWRzXC8yMDIwXC8wNFwvNGU3MTk2YzQwOTU0OTcxOWIwNTc0OWJiZjRiMDFmM2IucG5nIiwic2xpZGVzaG93IjoiNGIxOGIyNCJ9\" href='https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/4e7196c409549719b05749bbf4b01f3b.png'><img width=\"788\" height=\"423\" src=\"https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/4e7196c409549719b05749bbf4b01f3b.png\" class=\"attachment-full size-full\" alt=\"\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/4e7196c409549719b05749bbf4b01f3b.png 788w, https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/4e7196c409549719b05749bbf4b01f3b-300x161.png 300w, https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/4e7196c409549719b05749bbf4b01f3b-768x412.png 768w\" sizes=\"(max-width: 788px) 100vw, 788px\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-2e38c28\" data-id=\"2e38c28\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-805bd37 elementor-widget elementor-widget-heading\" data-id=\"805bd37\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">HTML<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bcd7605 elementor-widget elementor-widget-text-editor\" data-id=\"bcd7605\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p><em>Je hebt onderzoek gedaan naar het werken met HTML5 middels een online cursus. Je kan een heldere structuur opzetten middels moderne semantische tags zoals NAV en SECTION. Je HTML bevat geen inline styles en javascript.<\/em><\/p><p>Zoals in de les werd aangeraden ben ik de online lessen gaan bekijken van Barry Luibregts en Jon Friskics op Pluralsight. Daarnaast heb ik ook een hoop Youtube flimpjes bekeken van onder andere CSS.<\/p><p>\u00a0<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ec36a7a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ec36a7a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-70932a4\" data-id=\"70932a4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8bc2422 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"8bc2422\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-99f2a0c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"99f2a0c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-14c77e0\" data-id=\"14c77e0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bab618f elementor-widget elementor-widget-heading\" data-id=\"bab618f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS Syntax<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de6cf56 elementor-widget elementor-widget-text-editor\" data-id=\"de6cf56\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p><em>Je kan werken met css selectors: tags, id\u2019s en classes. Je gebruikt flexbox of css grid om structuur in je layout aan te brengen. Je website is responsive door te werken met relatieve eenheden en media queries. Je site werkt goed op verschillende maten schermen en apparaten, \u00e9n in verschillende browsers.<\/em><\/p><p>Tags: tags{}. id: #id{}. classes: .classes{}<\/p><p>Ik had het liefst een foto willen invoegen maar dat werkte niet dus vandaar dat ik het even zo heb opgelost.\u00a0<\/p><p>De site werkt nog maar op 1 maat scherm omdat ik er nog niet aan toegekomen was om hem responsive te maken. Wel werkt hij in meerdere browsers omdat ik gekeken heb of mijn code de meeste browsers ondersteunt en dat doet het gelukkig.\u00a0<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-d04bc2b\" data-id=\"d04bc2b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-72049bc elementor-widget elementor-widget-accordion\" data-id=\"72049bc\" data-element_type=\"widget\" data-widget_type=\"accordion.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-accordion\" role=\"tablist\">\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1191\" class=\"elementor-tab-title\" data-tab=\"1\" role=\"tab\" aria-controls=\"elementor-tab-content-1191\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" href=\"\">Header<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-1191\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1191\"><pre>@import url('https:\/\/fonts.googleapis.com\/css?family=Montserrat:500&amp;display=swap');<br \/><br \/>.header{<br \/>    box-sizing: border-box;<br \/>    margin: 0;<br \/>    background-color: #03befc;<br \/>}<br \/>ul{<br \/>    padding-inline-start: 0;<br \/>}<br \/>li, a {<br \/>    font-family: 'Montserrat', sans-serif;<br \/>    font-weight: 500;<br \/>    font-size: 16px;<br \/>    color: white;<br \/>    text-decoration: none;<br \/>}<br \/>header{<br \/>    display: flex;<br \/>    justify-content: flex-end;<br \/>    align-items: center;<br \/>    margin-top: 20px<br \/>}<br \/>.nav_links{<br \/>    list-style: none;<br \/>}<br \/>.nav_links li{<br \/>    display: inline-block;<br \/>    padding: 0 10px;<br \/>}<br \/>.nav_links li a {<br \/>    transition: all 0.3s ease 0s;<br \/>}<br \/>.nav_links li a:hover{<br \/>    color: lightgray;<br \/>}<br \/>.name{<br \/>    margin-right: 750px;<br \/>}<\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1192\" class=\"elementor-tab-title\" data-tab=\"2\" role=\"tab\" aria-controls=\"elementor-tab-content-1192\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" href=\"\">Body<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-1192\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1192\"><pre>html, body {<br \/>    Margin:0;<br \/>    Padding:0;<br \/>    background-color:gray;<br \/>}<br \/>img {<br \/>    width: 40%;<br \/>    border: 5px solid black;<br \/>    display: block;<br \/>    margin: -15px auto 15px;<br \/><br \/><br \/>}<br \/>#innerHTML{<br \/>    color: gray;<br \/>}<\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1193\" class=\"elementor-tab-title\" data-tab=\"3\" role=\"tab\" aria-controls=\"elementor-tab-content-1193\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" href=\"\">Footer<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-1193\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"3\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1193\"><pre>.footer {<br \/>    background-color: #03befc;<br \/>    padding-bottom: 40px;<br \/>    color: white;<br \/>    margin-top: auto;<br \/>}<br \/>.p {<br \/>    text-align: center;<br \/>    padding-bottom: 5px;<br \/>    font-family: 'Montserrat', sans-serif;<br \/>    font-weight: 500;<br \/>    font-size: 25px;<br \/>    margin-top: 5px;<br \/>}<br \/>label{<br \/>    font-family: 'Montserrat', sans-serif;<br \/>    font-weight: 500;<br \/>    font-size: 16px;<br \/>}<br \/>input, label {<br \/>    float:left;<br \/>    margin-right: 10px;<br \/>    margin-left: 10px;<br \/>}<br \/>form{<br \/><br \/>}<br \/>button {<br \/>    background-color: green;<br \/>    color: white;<br \/>    padding: 2px;<br \/>}<\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6e82f16 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6e82f16\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e35744e\" data-id=\"e35744e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-79e6489 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"79e6489\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4174699 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4174699\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-8d34665\" data-id=\"8d34665\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2e05ee4 elementor-widget elementor-widget-image-gallery\" data-id=\"2e05ee4\" data-element_type=\"widget\" data-widget_type=\"image-gallery.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-gallery\">\n\t\t\t<div id='gallery-2' class='gallery galleryid-99 gallery-columns-1 gallery-size-medium'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"2e05ee4\" data-elementor-lightbox-title=\"hologram_gebruiker0000\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MjE2NSwidXJsIjoiaHR0cHM6XC9cL3N0dWQuaG9zdGVkLmhyLm5sXC8wOTg2ODA5XC93cC1jb250ZW50XC91cGxvYWRzXC8yMDIwXC8wM1wvaG9sb2dyYW1fZ2VicnVpa2VyMDAwMC5qcGciLCJzbGlkZXNob3ciOiIyZTA1ZWU0In0%3D\" href='https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/03\/hologram_gebruiker0000.jpg'><img width=\"300\" height=\"236\" src=\"https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/03\/hologram_gebruiker0000-300x236.jpg\" class=\"attachment-medium size-medium\" alt=\"\" decoding=\"async\" loading=\"lazy\" aria-describedby=\"gallery-2-2165\" srcset=\"https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/03\/hologram_gebruiker0000-300x236.jpg 300w, https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/03\/hologram_gebruiker0000-1024x805.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/03\/hologram_gebruiker0000-768x604.jpg 768w, https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/03\/hologram_gebruiker0000.jpg 1374w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-2165'>\n\t\t\t\tWirframe Gertjan\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-be2e14e\" data-id=\"be2e14e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b5d5cae elementor-widget elementor-widget-heading\" data-id=\"b5d5cae\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS Ontwerp<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-992b5aa elementor-widget elementor-widget-text-editor\" data-id=\"992b5aa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p><em>Je bent in staat om een bestaand visueel ontwerp\/wireframes, zowel desktop als mobile, om te zetten naar CSS code. Hiervoor kan je een ontwerp gebruiken uit de interactie ontwerp lessen, of een ontwerp uit CLE. Het ontwerp hoeft niet van jezelf te zijn.<\/em><\/p><p>Voor ons CLE project heeft Gertjan een wireframe gemaakt. Deze heb ik als voorbeeld genomen en heb ik zo goed mogelijk proberen na te maken.\u00a0<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-36f2bbe elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"36f2bbe\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2e0a800\" data-id=\"2e0a800\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b35a135 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"b35a135\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-926a7fb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"926a7fb\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-de21a55\" data-id=\"de21a55\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7efd8fc elementor-widget elementor-widget-heading\" data-id=\"7efd8fc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Javascript <\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa4dea6 elementor-widget elementor-widget-text-editor\" data-id=\"fa4dea6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p><em>Je begrijpt hoe je met modern ES6 javascript bij de website passende functionaliteit en interactie toe kunt voegen aan je website. Je website kan input van de gebruiker verwerken met javascript, en je kan de website updaten met javascript.<\/em><\/p><p>De event listener die kijkt of je op de img hebt geklikt. Als dat is gebeurt dan gaat hij de functie change uitvoeren. Dan voert hij in de input vakjes de gegevens in. Eerst kijkt de eventlistener of er op de button is geklikt als dat zo is krijg je een popup met wat er in de innerHTML staat. In mijn geval is dat &#8220;Je product is verzonden naar het hologram!&#8221;.<\/p><p>Je gebruikt een eventlistener omdat je anders in je HTML een onclick krijgt en dan is het on overzichtelijk wat HTML of JS is.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-1ccb6ca\" data-id=\"1ccb6ca\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-236abe1 elementor-widget elementor-widget-image-gallery\" data-id=\"236abe1\" data-element_type=\"widget\" data-widget_type=\"image-gallery.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-gallery\">\n\t\t\t<div id='gallery-3' class='gallery galleryid-99 gallery-columns-1 gallery-size-medium'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"236abe1\" data-elementor-lightbox-title=\"81756f84ff0b7ba7e5a48eadd53a88ec\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MjMwNiwidXJsIjoiaHR0cHM6XC9cL3N0dWQuaG9zdGVkLmhyLm5sXC8wOTg2ODA5XC93cC1jb250ZW50XC91cGxvYWRzXC8yMDIwXC8wNFwvODE3NTZmODRmZjBiN2JhN2U1YTQ4ZWFkZDUzYTg4ZWMucG5nIiwic2xpZGVzaG93IjoiMjM2YWJlMSJ9\" href='https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/81756f84ff0b7ba7e5a48eadd53a88ec.png'><img width=\"300\" height=\"180\" src=\"https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/81756f84ff0b7ba7e5a48eadd53a88ec-300x180.png\" class=\"attachment-medium size-medium\" alt=\"\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/81756f84ff0b7ba7e5a48eadd53a88ec-300x180.png 300w, https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/81756f84ff0b7ba7e5a48eadd53a88ec-768x461.png 768w, https:\/\/stud.hosted.hr.nl\/0986809\/wp-content\/uploads\/2020\/04\/81756f84ff0b7ba7e5a48eadd53a88ec.png 868w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4a28215 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4a28215\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-51b9fb2\" data-id=\"51b9fb2\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4fc0aaa elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"4fc0aaa\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Inleiding Er werd ontzettend van ons verlangt dat we building blocks gingen in plannen. Met goede moed heb ik daardoor ook front-end ingepland. Dit is mijn 2 keer dat ik een website maak. Ook de 2 keer dat ik met HTML en CSS werk. Het gesprek is puur voor een feedback om mij de goede [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":9,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/stud.hosted.hr.nl\/0986809\/wp-json\/wp\/v2\/pages\/99"}],"collection":[{"href":"https:\/\/stud.hosted.hr.nl\/0986809\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stud.hosted.hr.nl\/0986809\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stud.hosted.hr.nl\/0986809\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stud.hosted.hr.nl\/0986809\/wp-json\/wp\/v2\/comments?post=99"}],"version-history":[{"count":35,"href":"https:\/\/stud.hosted.hr.nl\/0986809\/wp-json\/wp\/v2\/pages\/99\/revisions"}],"predecessor-version":[{"id":2325,"href":"https:\/\/stud.hosted.hr.nl\/0986809\/wp-json\/wp\/v2\/pages\/99\/revisions\/2325"}],"up":[{"embeddable":true,"href":"https:\/\/stud.hosted.hr.nl\/0986809\/wp-json\/wp\/v2\/pages\/9"}],"wp:attachment":[{"href":"https:\/\/stud.hosted.hr.nl\/0986809\/wp-json\/wp\/v2\/media?parent=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}