Basic markup and styling

[00:00 - 00:13] We set up the project in the previous lesson, so now we have a local development server that serves our view app. Now we can really get started, and we will start by creating the markup and some styling for the resume builder.

[00:14 - 00:24] We want to structure our code by creating one component profile. This single file component setup requires us to have either a template or a script tag.

[00:25 - 00:32] If we don't have that, we will get an arrow. In view, all that should be rendered goes in between the template tags.

[00:33 - 00:38] You can write normal HTML in there. The magic of view, however, is that you can do more than that.

[00:39 - 00:55] You can render data from the components state and display other components as child components of your current component. That means whatever the child component's template contains will be displayed in the parent components template.

[00:56 - 01:03] For now, we only have one component, our app, that resides in the app.view file . We can add some markup already.

[01:04 - 01:13] We will add the tag main as a wrapper for our content and give it the class container. Next, we add the wrapper for the resume.

[01:14 - 01:23] Let's add a div for that with the ID of resume. You see, I added an ID and a class here.

[01:24 - 01:29] But where do we add the CSS rule for those? There are many ways to add styling in view.

[01:30 - 01:39] We could write everything in a separate CSS file that applies to every component. With our setup, we can use the main CSS file for that.

[01:40 - 01:47] Styling can also be applied in line, but this could clutter the HTML. We can also add component-specific styling.

[01:48 - 02:00] That means that the styling will only get applied to the elements of the component of the current file in a single file component setup. For that, we add the scoped attribute to the style tag.

[02:01 - 02:06] We will be using both. Scoped style for styling specific to a single component.

[02:07 - 02:17] In simple styling, that should be global, we add to the main CSS. Feel free to copy the styling code snippets from the course transcript below.

[02:18 - 02:34] The container class we added in our template should be given the element, a max with, as well as sent to the content by setting margin left and margin right to auto. Since this is a general styling, we added in the main CSS.

[02:35 - 02:43] We also add 40 pixel margin to the top and bottom. To distinguish our resume from the background, we give it a box shadow.

[02:44 - 02:54] We also set the height and width according to the international A4 standard that specifies the size of a page. It is commonly used for resumes in many parts of the world.

[02:55 - 03:08] In Not America, the most common paper size standard for letter size documents is known as letter or US letter. Which one you choose is up to you here.

[03:09 - 03:19] Now, before we go any further, how do we want to structure our resume? If you google resume examples, you find countless examples of different layouts .

[03:20 - 03:29] There are lots of inspirations. Even though we are going to make many styling choices configurable, we do have to decide on the layout.

[03:30 - 03:38] Many layouts divide the resume into two columns. A small column on the left and a bigger one on the right.

[03:39 - 03:46] This gives the resume a good structure, so we will do the same. We add a left and a right column inside the resume for that.

[03:47 - 04:00] By default, they will be underneath each other because the elements are block level elements, which means they will take up the full width. We need to set the parent to display flex.

[04:01 - 04:09] We are not using bootstrap in this app because we will barely need it. There are some really useful classes bootstrap provides when it comes to layered and spacing.

[04:10 - 04:21] But instead of loading bootstraps entire style sheet to use them, we will create some useful classes ourselves. In our main CSS, we add the class D minus flex.

[04:22 - 04:29] We set it to display flex. We can add this class to the resume diff now and the columns where we next switch other.

[04:30 - 04:43] We want the left column to be smaller than the right one, so we set left call to 30%, and the right call to 70%. Before adding more styling, we will add the main resume markup with placeholder content.

[04:44 - 04:51] This way, we can get an idea about the structure and style. A good place to start is by adding headlines.

[04:52 - 05:04] In the left column, we will add about me, contact, skills, certifications. In the right one, experience and education.

[05:05 - 05:19] These names are just placeholders because we will allow the user to edit them. We will wrap those headlines into H4 tags and add the class section headline to each.

[05:20 - 05:35] Most importantly, the resume needs a name and a position title. We add this to the top of the right column.

[05:36 - 05:42] Let's fill in some placeholder content in the left column. I have generated some placeholder content.

[05:43 - 05:52] You can copy it from the course transcript if you like. Underneath the about me headline, we add a paragraph with a small introduction.

[05:53 - 06:01] Contact gets a phone number, an email and an address. Let's also add a few qualifications and certifications.

[06:02 - 06:24] Next, we add placeholder content to the right column. For experience, we want to add job title, company location, time range, and a few description points regarding what we did there.

[06:25 - 06:38] The education entries we structure similarly. Each education entry needs the name of the degree, the university and location, time range, and some description bullet points.

[06:39 - 06:51] With this, we can highlight courses, achievements or activities. Now that we understand how the resume will be structured, let's add the rest of the styling.

[06:52 - 07:06] In the main CSS, we will add CSS variables for the main colors we will use. We will make those adjustable for the user in a later session.

[07:07 - 07:17] We give the left column a background color and a border to the right so that we can distinguish them properly. We also give both columns some padding.

[07:18 - 07:37] The section headlines will also get some styling to distinguish the headline from the normal text pattern. For the left column, we want the section headlines to have this underlined look that starts at the column separation line, so we use negative margin right here.

[07:38 - 07:51] To apply the same spacing to the different sections of our resume, we wrap them into a diff with a class resume section. Each section should contain a headline, such as about me and the content that belongs to it.

[07:52 - 08:10] Each section should add the same spacing at the bottom. We will add 30 pixel margin to the bottom of each section.

[08:11 - 08:21] In the right column, we want to improve the styling a bit. We will apply some styling to the personal name and personal title diff.

[08:22 - 08:41] This way, the underlined will start precisely at the column separation line. As mentioned before, feel free to copy the CSS snippet from the course transcript if you don't want to type this line by line.

[08:42 - 08:51] The list items are very far indented. It is styling that is applied by the browser automatically, as we can see when we inspect the element.

[08:52 - 08:58] We want to overwrite that for all unordered lists in the resume. There is also a margin added that we want to overwrite.

[08:59 - 09:08] In the main CSS, we set the font family to Sans Serif and the font size to 16 pixel. Now you can see the resume taking shape.

[09:09 - 09:20] We will give the user adjustment options, but the general structure will stay like this. It is time to move the placeholder data into the reactive components state and render data from there.