web development questions

(BlogPost_03)

  1. Become a Medium Master Create lists. You can start a bulleted list by typing a dash or asterisk. Then, just start typing your first item. Once you hit Enter, the list will be reformatted for you automatically. To start a numbered list, type “1.” and your first item.
  2. Two types of quotes. Select any text in the editor and click on the quote icon in the menu to make it a blockquote. Click the icon again to make it a pull quote.
  3. Drop caps. Select the first letter of a paragraph, and an option to turn it into a drop cap will appear in your formatting menu.
  4. Mention people. Type @ and then the name of the person you want to mention. Mentioning someone will link to their profile and send them a notification when you publish.
  5. Embed social media posts. You can embed a tweet or Facebook post in your story by pasting in its link and pressing Enter.
  6. Embed other Medium stories. You can embed another Medium story by pasting in its link and pressing Enter.
  7. Embed videos. You can embed videos from sites like YouTube, Vimeo, and Facebook by pasting in any video link and pressing Enter.
  8. Embed audio. You can embed audio from sites like Soundcloud or Spotify by pasting in any audio link and pressing Enter.
  9. Keyboard shortcuts in the editor. Use the Medium editor like a pro: Press Ctrl+? or ⌘+? while editing to see the list of keyboard shortcuts.
  10. Leave yourself TK notes. Write “TK” anywhere in your story as a placeholder and reminder to yourself to finish something later. Medium will warn you if you have any TKs left before you hit Publish.
  11. Use code blocks. For technical writers, you can include inline code blocks in your story by putting text between backticks. To include a separate code block or snippet, type three backticks into the editor.
  12. See word count. In the Medium editor, select the entire story (Ctrl+A or ⌘+A) or any passage to see the word count at the top of the page.
  13. Write or edit from mobile. Download Medium’s iOS app or Android app and write — or edit — on the go.

Images

Image options. In the Medium editor, click on any image to bring up the menu that allows you to change its size and position.

Image grids. You can create an image grid if you insert two or more images in your Medium story at the same time. Do this by holding Ctrl/⌘ or Shift while selecting image files.

Drag and drop images. You can drag and drop an image — or multiple images at once — from your desktop or other windows to place them in your story.

Link images. Click on an image in the editor and press Ctrl+K or ⌘+K to turn the image into a link.

Feature an image on your story. In the “Publish” drop-down menu, you can select which of the hi-res images from your story is featured in previews. Or select an image and hit “Shift+F.”

Publishing your story

Revision history. Click on the […] in the upper right corner of the editor, and then on Revision history to see the version history of your story. You can then view or revert to an earlier version of your story.

Publish as unlisted. You can publish a story as unlisted on Medium. It will be visible only to those who have its link, and it won’t appear on your profile or on Medium’s public pages. Click on the […] button in the upper right corner of the editor, and then click Manage unlisted setting. Choose an option and click Save.

Customize title and subtitle of your story. After finishing your story, click the […] button and select Title/subtitle. Select Custom title. Choose Custom title, input your custom display title, and then click Save. You must have a title, but a subtitle is optional.

Checking on/Influencing your story’s impact

Feature a story on your profile. Click on the down arrow next to any story on your profile page to feature it so that it occupies the top spot. If you don’t select one to feature, our system will choose a popular one for you.

Tag a story. Adding relevant tags to your post will help tell readers and our curators what your story is about. You can add up to five tags per story.

Your stats page. Go to your stats page to see an up-to-date summary of how your stories are doing (including the number of people who viewed, read, and clapped for them). Click on the story title or “Details” to go to a page with more information about the story’s performance, including top referrers of readers to your story.

See the conversation about your story on social media. You may see Twitter, Facebook, and/or LinkedIn as a referrer in the list of external referrals on a story’s stats page. If you click on the link, you can see tweets and posts about that particular story on those social media sites.

Text shots. Use text shots to share the best parts of your story on Twitter. Stories shared with text shots have been shown to have 3–5x more engagement than stories without them.

Input/output

Share your draft to get feedback. To generate a link to your draft, click on the […] button in the upper right corner of the editor, and then click Share draft. Using this link, others will be able to read your draft (and even leave private notes if they have a Medium account).

See all the applause. On any published story, click the number next to the clap icon to see a list of everyone who has applauded the story.

Import your story from elsewhere. Use our import feature (accessible from the dropdown menu after clicking your avatar) to bring a story you published somewhere else to Medium automatically. You can preview and edit it before publishing. Read more about importing and how it relates to SEO.

2-Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy?

For the past five years, mobile has dominated the desktop as the most popular form of digital media access. For the year 2017, the number of mobile users is expected to reach 4.7 billion and 58.9% of those users will be using their mobile to access the internet. That’s nearly 2.7 billion people that will be using the internet on their phones. That number alone proves the importance of designing webpages that function optimally on mobile devices. There are two main approaches to accomplishing this The Two Approaches: Mobile First and Responsive Web Design Mobile First is exactly as it sounds- creating a webpage for mobile first, before desktop. Within the last five years, designers and developers have shifted their thinking from desktop to mobile. What does that mean exactly and how does it change the design process? With mobile first, designers are forced to pare down information. There is a lot less real estate to work with on a mobile screen so designers must research and incorporate the most important functions to the mobile design. Designers are also working with a less powerful computer so they may be less ambitious with the functionalities they will develop.

Maybe you are saying to yourself “well, that all sounds great, but why should I care?” The mobile first approach is essential if you plan to have an online presence. It will only make your life easier in the long term. If you start designing desktop first then you are more likely to develop functionalities that do not process well on mobile, meaning you might have to scrap your desktop design and start over. Here are a few steps to getting your mobile first strategy off on the right foot:

1. Make a Content Inventory

Take the time to map out on a spreadsheet or equivalent tool all of the pages you will include on your mobile site.

2. Make a Visual Hierarchy

Start to prioritize the most important and move it to the top of the inventory you created. What content are you mobile users going to use most? Move that to the top.

3. Wireframe with the Smallest Breakpoints First

Use the smallest breakpoint model first and then scale up from there, expanding the screen until there is too much white space.

4. Enlarge Touch Points

Your mobile users won’t have the benefit of targeting with a fine, pixel-precise mouse. Fingers are much larger and as such need larger buttons to push. Apple recommends 44 pixels square for touch targets. Also, be sure to give hyperlinks plenty of space.

5. Avoid Hover at All Costs

Desktop designers sometimes count on users hovering the mouse over an item to interact with it. There is no great way for a mobile user to hover, the functionality just doesn’t exist. Steer clear of using hover in mobile design.

6. Think Beyond Webpage

Think more in terms of an app than a webpage. What other features could be added to enhance the mobile experience? Think about adding expandable widgets or AJAX calls to make it the process more user-friendly.

7. Test It

Get on your own mobile device and bring up the website. Do this before accessing it via desktop or laptop. Have your inventory list handy and go through everything you hoped to include. Does it function the way it is supposed to? Could it be made even better with some re-design?

What is a Responsive Website Design?

Responsive Website Design is the formatting of a website that it can be optimally viewed from any type of device: PC, tablet and smartphones. This might sound very familiar to the mobile first approach introduced above and this is because responsive web design is a feature of the mobile first design. However, responsive is different in that it starts with designing for desktop and working down in formatting for tablet and mobile.

From a design standpoint, responsive web design is a combination of moveable grids, layouts, and images that function from CSS media queries. So when the user is looking at a website on their phone and then moves to a desktop, they have a similar experience due to the flexibility of the layout. Pictures and content may be arranged, but the user can do and see everything on mobile and desktop.

Responsive came onto the scene before mobile first, that is sometimes why there is confusion between the two approaches. Another example of a responsive website would be if you were to grab the corner of your browser and readjust the size. Make it smaller and you will see the content rearrange itself so that it is not cut off. Believe it or not, it was once common for webpages to just end where the browser did so that user had to scroll around to find content.

If you are interested in using a responsive design approach first, here are two basic components to consider integrating:

1. Meta Tag

Use a meta tag in the head of your code to reset your viewpoint. Most mobile browsers scale to wide viewpoints to fit the screen. The viewpoint meta tag will reset this so that the viewpoint width fits the device, rather than initial scale.

2. CSS Media Queries

Media Queries are an essential piece for creating a responsive design. It engineers the conditions that tell the browser how to render a page for a specified viewpoint width. Basically, you are writing the code that tells the webpage that if a screen is 700 pixel, make the content 50% of the screen. That can be written for all of the screen sizes needed.

It is best to follow the trends of the time and utilize a mobile-first approach. Responsive design does not take into mind limiting content. Users will get more out of their experience if they only see the essential information on their mobile device. By only resizing the webpages, they still may not receive the functionality they need to have a positive user experience.

3-Have you played around with the new CSS Flexbox or Grid specs? What can you say about them?

  • One-dimensional layouts
    If you need to lay your content in one dimension, no matter if it’s horizontal (x-axis) or vertical (y-axis) and you want your layout to respond to the element’s content, then flexbox is what you’re looking for. It’s just right for (but not limited to) components.
  • Two-dimensional layouts
    If you need to display your content both on the x-axis and y-axis that means you have… A grid! This property is ideal for page layouts and complicated, non-linear components.

4-Can you give an example of an @media property other than a screen? Definition and Usage

The @media the rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

  • width and height of the viewport
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution

Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.

You can also use media queries to specify that certain styles are only for printed documents or for screen readers (media type: print, screen, or speech).

In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.

5-Describe one thing you learned in class today. Flexbox is made for one-dimensional layouts and Grid is made for two-dimensional layouts. This means that if you’re laying out items in one direction (for example three buttons inside a header), then you should use Flexbox: It’ll will give you more flexibility than CSS Grid.

6-What’s the difference between a relative, fixed, absolute and statically positioned element. The difference between relative and absolute is that relative is “relative” to itself ( left:15px will pad it to the left with 15px), but absolute is relative to its parent (first non-static parent that is) and applying the same attribute (left:15px) will result in it being shifted 15px away from the left edge of the parent element.

7-Describe pseudo-elements and discuss what they are used for. A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, :first-line can be used to change the font of the first line of a paragraph. Note: In contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.

8-What are some of the “gotchas” for writing efficient CSS? well I really think that there is this way here I guess Primarily about efficient CSS selectors

- Avoid key selectors that match large numbers of elements (tag and universal selectors)

- Prefer class and ID selectors over tag selectors

- Avoid redundant selectors

- Preferably don’t use * (universal selector)

  • And like any other code, try a group and reuse common properties.

“Coding”

“Web Development”

“@AustinCodingAcademy”

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store