[et_pb_section fb_built="1" custom_padding_last_edited="on|desktop" next_background_color="#F2F2FA" admin_label="Header" _builder_version="4.17.4" use_background_color_gradient="on" background_color_gradient_direction="130deg" background_color_gradient_stops="#0c71c3 0%|#0c71c3 100%" background_color_gradient_start="#7876FE" background_color_gradient_end="#99D1FF" background_image="http://www.housemaids.no/wp-content/uploads/2022/02/marketing-bg6.png" parallax="on" custom_padding="7vw||10vw||false|false" custom_padding_tablet="100px||100px||true" custom_padding_phone="||||true" bottom_divider_style="ramp2" bottom_divider_height="250px" bottom_divider_flip="horizontal" bottom_divider_height_tablet="150px" bottom_divider_height_phone="110px" bottom_divider_height_last_edited="on|phone" hover_enabled="0" saved_tabs="all" global_colors_info="{}" sticky_enabled="0"][et_pb_row _builder_version="4.16" global_colors_info="{}"][et_pb_column type="4_4" _builder_version="4.16" custom_padding="|||" global_colors_info="{}" custom_padding__hover="|||"][et_pb_text _builder_version="4.16" text_font="Roboto||||||||" text_line_height="1.8em" header_font="Roboto|700|||||||" header_text_align="center" header_font_size="80px" header_line_height="1.2em" header_3_font="Roboto|700||on|||||" header_3_text_align="center" header_3_text_color="#ffffff" header_3_font_size="24px" header_3_letter_spacing="10px" header_3_line_height="2em" text_orientation="center" background_layout="dark" module_alignment="center" text_font_size_last_edited="off|desktop" header_font_size_tablet="40px" header_font_size_phone="32px" header_font_size_last_edited="on|phone" header_3_font_size_tablet="16px" header_3_font_size_phone="14px" header_3_font_size_last_edited="on|phone" header_3_letter_spacing_tablet="5px" header_3_letter_spacing_phone="" header_3_letter_spacing_last_edited="on|tablet" global_colors_info="{}"]

BLogG

Hva må du kunne for å lage nettsider?

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure="1_4,1_2,1_4" _builder_version="4.16" custom_padding="0|0px|27px|0px|false|false" global_colors_info="{}"][et_pb_column type="1_4" _builder_version="4.16" custom_padding="|||" global_colors_info="{}" custom_padding__hover="|||"][/et_pb_column][et_pb_column type="1_2" _builder_version="4.16" custom_padding="|||" global_colors_info="{}" custom_padding__hover="|||"][/et_pb_column][et_pb_column type="1_4" _builder_version="4.16" custom_padding="|||" global_colors_info="{}" custom_padding__hover="|||"][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" admin_label="Contact" _builder_version="4.16" background_color="#F2F2FA" custom_padding="80px||80px||true|false" saved_tabs="all" global_colors_info="{}"][et_pb_row _builder_version="4.17.4" _module_preset="default" hover_enabled="0" global_colors_info="{}" sticky_enabled="0"][et_pb_column type="4_4" _builder_version="4.16" _module_preset="default" global_colors_info="{}"][et_pb_text _builder_version="4.16" _module_preset="default" global_colors_info="{}"]

Å lage nettsider er veldig gøy, fordi du får brukt den kreative siden ved deg selv. Likevel er det en del man skal lære seg. Her er en introduksjon til hva du må kunne for å begynne å lage nettsider, og hvordan du kan utvikle deg videre.

[/et_pb_text][et_pb_text _builder_version="4.16" _module_preset="default" global_colors_info="{}"]

HTML og CSS

[/et_pb_text][et_pb_text _builder_version="4.16" _module_preset="default" text_font_size="18px" locked="off" global_colors_info="{}"]

Første steg til å lage nettsider består av å lage innhold via bruk av HTML (hyper text markup language) og style nettsiden ved bruk av CSS (cascade style sheets). Ved å lære deg disse to, har du kommet langt. Det finnes mange gode nettsider for å få en introduksjon til HTML og CSS, blant annet w3schools. I tillegg trenger du et program å kode i. De fleste bruker her tekstredigeringsprogram slik som VScode eller Atom, men dersom du ikke har anledning til å laste ned dette, finnes det andre muligheter, slik som JSfiddle eller Codepen, men det er her vanskeligere å få lagret prosjektene dine. Et siste alternativ er å opprette deg en bruker på Repl.it.

[/et_pb_text][et_pb_text _builder_version="4.16" _module_preset="default" custom_padding="0px||4px|||" locked="off" global_colors_info="{}"]

Struktur

[/et_pb_text][et_pb_text _builder_version="4.16" _module_preset="default" text_font_size="18px" global_colors_info="{}"]

HTML og CSS har sin egen struktur som man må sette seg inn i. Som allerede nevnt, så kan man finne gode ressurser til dette på internett. Når det gjelder CSS finnes det flere ulike layouts. Her er mitt tips å lese om og teste ut Box Model, Flexbox og CSS Grid. Her er det også lurt å finne fordeler og ulemper med bruk av disse stilene. Det er også viktig å vite at den ene utligner ikke den andre; de kan fint brukes sammen. En god ressurs når det gjelder å lære om Flexbox og CSS Grid er css-tricks. På disse sidene finner du en god introduksjon til CSS grid, og en introduksjon til CSS Flexbox.

[/et_pb_text][et_pb_text _builder_version="4.16" _module_preset="default" custom_padding="||2px|||" locked="off" global_colors_info="{}"]

Dynamiske nettsider

[/et_pb_text][et_pb_text _builder_version="4.16" _module_preset="default" text_font_size="18px" locked="off" global_colors_info="{}"]

For å kunne lage dynamiske nettsider, må man bruke feks Javascript, eller JS som er forkortelsen. Dette brukes blant annet for å få ting til å skje hvis man for eksempel trykker på knapper, ønsker å animere noe eller feks ønsker å gi feedback til dine besøkende. Javascript blir også brukt for å lagre cookies på hjemmesiden slik at tilbakevendende brukere får en bedre opplevelse. For å kunne lage dynamiske nettsider er det viktig å lære seg et godt kodegrunnlag for Javascript og lære seg hvordan JS jobber sammen med det som kalles HTML DOM. Ved å besøke se på w3schools sine Javascript eksempler kan du finne gode tips til hvordan du kan få HTML og JS til å være samarbeide.

[/et_pb_text][et_pb_text _builder_version="4.16" _module_preset="default" custom_padding="11px||0px|||" locked="off" global_colors_info="{}"]

Responsive nettsider

[/et_pb_text][et_pb_text _builder_version="4.16" _module_preset="default" text_font_size="18px" locked="off" global_colors_info="{}"]

Å lage nettsider nå til dags betyr at du må få hjemmesidene til å fungere på alle slags mobile enheter. Før i tiden gjaldt dette kun datamaskiner, men nå skal nettsiden se fin ut på alle slags flater, slik som mobiler, tablets, bærbare PCer og stasjonære PCer. Disse har alle forskjellige type størrelser på skjermene, og du må derfor justere utseende. Dette gjør du ved bruk av @mediaqueries. Det finnes mange forskjellige tips og oppskrifter på hvordan du gjør dette, slik som denne guiden til hvordan du bruker CSS media queries. I tillegg må du tenke på om du skal designe først for mobil (mobile first), eller først for PC (desktop first). Det er delte meninger om dette og det handler rett og slett om smak og behag. Jeg har prøvd begge deler, og har funnet ut at for meg gjelder “mobile first” fordi jeg da kan jobbe meg oppover. Dette er noe man må eksperimentere med.

[/et_pb_text][et_pb_text _builder_version="4.16" _module_preset="default" custom_padding="||2px|||" locked="off" global_colors_info="{}"]

Webapper

[/et_pb_text][et_pb_text _builder_version="4.16" _module_preset="default" text_font_size="18px" locked="off" global_colors_info="{}"]

Det er gøy å kunne mestre noe, og ved å bruke HTML og CSS får man raske resultater ved å plotte inn kode. Endelig har man laget noe, og det trenger ikke ta mye tid. Men ikke la deg stoppe ved å kun lære deg HTML, CSS og JS, for du kan alltids utvide kunnskapen din til flere JS rammeverk. Akkurat nå er Vue.js veldig populært til å lage webapper. Så hva i alle dager er en webapp?

Svært forenklet er en webapp en programvare som sender innhold en bruker ønsker å se. I stedet for å bytte fysiske sider når man klikker på ulike lenker, er det kun selve innholdet på nettsiden som endres. På denne måten lastes innholdet raskere enn ved å besøke statiske nettsider (kun HTML og CSS slik som er forklart helt i starten av dette innlegget). Man bruker fremdeles HTML og CSS i webapper også, men i tillegg koder man som oftest i ulike rammeverk, slik som Vue.js som er et Javascript rammeverk og Django som er et Python rammeverk. Her kan du lese mer om forskjellen mellom nettsider og webapper.

[/et_pb_text][et_pb_text _builder_version="4.16" _module_preset="default" custom_padding="||2px|||" locked="off" global_colors_info="{}"]

Rammeverk og biblioteker

[/et_pb_text][et_pb_text _builder_version="4.16" _module_preset="default" text_font_size="18px" locked="off" global_colors_info="{}"]

I dette innlegget har jeg hovedsaklig fokusert på HTML, CSS og Javascript, men det finnes andre webspråk enn dette. Her kan også Python være aktuell, så fortvil ikke dersom du lærer Python i løpet av studiet. Både Javascript og Python har en del rammeverk og biblioteker som kan brukes for å lage webapper og for å forenkle kodingen. For Javascript har man rammeverkene Vue.js, Node.js, Angular.js, mens for Python har man blant annet Flask og Django. I tillegg har man biblioteker man kan importere slik at man kan øke funksjonaliteten til det man ønsker å oppnå. For Javascript har man feks React og og jQuery, mens for Python har man feks Tensorflow og Scipy, selv om disse har mer funksjon når det gjelder maskinlæring.

Når du har lært deg det grunnleggende innenfor Javascript, eller Python hvis det er det du lærer, er det ingen feil i å begynne å utforske disse rammeverkene. Det finnes også utallige gode ressurser her også.

For å få mer informasjon om hvordan du kan utvikle dine ferdigheter innenfor web, ta en liten titt på Andreas Mehlsens oversikt over webskills.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" custom_padding_last_edited="on|desktop" prev_background_color="#F2F2FA" admin_label="Call to action" _builder_version="4.16" use_background_color_gradient="on" background_color_gradient_direction="130deg" background_color_gradient_stops="#7876FE 0%|#99D1FF 100%" background_color_gradient_start="#7876FE" background_color_gradient_end="#99D1FF" background_image="http://www.housemaids.no/wp-content/uploads/2022/02/marketing-bg6.png" parallax="on" custom_padding="10vw||7vw||false|false" custom_padding_tablet="100px||100px||true" custom_padding_phone="||||true" top_divider_style="ramp2" top_divider_height="250px" top_divider_flip="vertical" top_divider_height_tablet="150px" top_divider_height_phone="110px" top_divider_height_last_edited="on|phone" saved_tabs="all" global_colors_info="{}"][et_pb_row module_class=" et_pb_row_fullwidth" _builder_version="4.16" width="89%" width_tablet="80%" width_phone="80%" width_last_edited="on|desktop" max_width="89%" max_width_tablet="80%" max_width_phone="80%" max_width_last_edited="on|desktop" custom_margin_phone="|||" custom_margin_last_edited="off|desktop" custom_padding="|||" make_fullwidth="on" global_colors_info="{}"][et_pb_column type="4_4" _builder_version="4.16" custom_padding="|||" global_colors_info="{}" custom_padding__hover="|||"][et_pb_text _builder_version="4.16" text_font="||||||||" header_font="||||||||" header_2_font="Roboto|700|||||||" header_2_font_size="50px" header_2_line_height="1.4em" header_3_font="Roboto|700||on|||||" header_3_text_align="center" header_3_text_color="#ffffff" header_3_font_size="24px" header_3_letter_spacing="5px" header_3_line_height="2em" text_orientation="center" background_layout="dark" max_width="850px" module_alignment="center" custom_margin="|||" custom_padding="|||" text_font_size_last_edited="off|desktop" header_2_font_size_tablet="40px" header_2_font_size_phone="32px" header_2_font_size_last_edited="on|desktop" header_3_font_size_tablet="16px" header_3_font_size_phone="14px" header_3_font_size_last_edited="on|phone" global_colors_info="{}"]

Let’s Get Started

Ready To Make a Real Change? Let's Build this Thing Together!

[/et_pb_text][et_pb_button button_text="Setup a Free Meeting" button_alignment="center" _builder_version="4.16" custom_button="on" button_text_size="14px" button_text_color="#5968af" button_bg_use_color_gradient="on" button_bg_color_gradient_direction="90deg" button_bg_color_gradient_stops="#9ed8ff 0%|#aaffdb 100%" button_bg_color_gradient_start="#9ed8ff" button_bg_color_gradient_end="#aaffdb" button_border_width="0px" button_border_color="rgba(0,0,0,0)" button_border_radius="4px" button_letter_spacing="5px" button_font="Roboto|700||on|||||" background_layout="dark" custom_margin="|||" custom_padding="18px|34px|18px|34px|true|true" box_shadow_style="preset3" box_shadow_vertical="20px" box_shadow_blur="30px" box_shadow_spread="-10px" box_shadow_color="rgba(50,11,142,0.4)" button_letter_spacing_hover="5.5px" global_colors_info="{}" button_text_size__hover_enabled="off" button_one_text_size__hover_enabled="off" button_two_text_size__hover_enabled="off" button_text_color__hover_enabled="off" button_one_text_color__hover_enabled="off" button_two_text_color__hover_enabled="off" button_border_width__hover_enabled="off" button_one_border_width__hover_enabled="off" button_two_border_width__hover_enabled="off" button_border_color__hover_enabled="off" button_one_border_color__hover_enabled="off" button_two_border_color__hover_enabled="off" button_border_radius__hover_enabled="off" button_one_border_radius__hover_enabled="off" button_two_border_radius__hover_enabled="off" button_letter_spacing__hover_enabled="on" button_letter_spacing__hover="5.5px" button_one_letter_spacing__hover_enabled="off" button_two_letter_spacing__hover_enabled="off" button_bg_color__hover_enabled="off" button_one_bg_color__hover_enabled="off" button_two_bg_color__hover_enabled="off"][/et_pb_button][/et_pb_column][/et_pb_row][et_pb_row _builder_version="4.16" global_colors_info="{}"][et_pb_column type="4_4" _builder_version="4.16" custom_padding="|||" global_colors_info="{}" custom_padding__hover="|||"][et_pb_social_media_follow _builder_version="4.16" text_orientation="center" border_radii="on|34px|34px|34px|34px" global_colors_info="{}"][et_pb_social_media_follow_network social_network="facebook" _builder_version="4.16" background_color="#fcb6ab" global_colors_info="{}" follow_button="off" url_new_window="on"]facebook[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network="twitter" _builder_version="4.16" background_color="#fcb6ab" global_colors_info="{}" follow_button="off" url_new_window="on"]twitter[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network="linkedin" _builder_version="4.16" background_color="#fcb6ab" global_colors_info="{}" follow_button="off" url_new_window="on"]linkedin[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network="instagram" _builder_version="4.16" background_color="#fcb6ab" global_colors_info="{}" follow_button="off" url_new_window="on"]instagram[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network="dribbble" _builder_version="4.16" background_color="#fcb6ab" global_colors_info="{}" follow_button="off" url_new_window="on"]dribbble[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network="youtube" _builder_version="4.16" background_color="#fcb6ab" global_colors_info="{}" follow_button="off" url_new_window="on"]youtube[/et_pb_social_media_follow_network][/et_pb_social_media_follow][/et_pb_column][/et_pb_row][/et_pb_section]